#268 Sass Basics

May 30, 2011 | 13 minutes | Rails 3.1

Sass extends CSS with variables, nesting, mixins and more. Here I show how to convert plain CSS to SCSS in a Rails 3.1 app.

Click to Play Video ▶

Download:
source codeProject Files in Zip (80.5 KB)
mp4Full Size H.264 Video (27.7 MB)
m4vSmaller H.264 Video (15 MB)
webmFull Size VP8 Video (16.5 MB)
ogvFull Size Theora Video (38 MB)

Browse Source Code

Resources

          application.css.scss
        
/*
 *= require_self
*/
@import "layout.css.scss";
@import "projects.css.scss";

          layout.css.scss
        
$main-color: #1E7B12;

@mixin rounded-corners($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FFF;
  font-family: verdana;
  font-size: 14px;
}

#header {
  background-color: $main-color;
  color: #FFF;
  padding: 4px 100px;
  border-bottom: solid 5px darken($main-color, 10%);

  h1 {
    font-size: 30px;
  }
}

a {
  color: $main-color;
  text-decoration: none;
  &:hover {
    text-decoration: underline;
  }
}

#container {
  margin: 0 100px;
}

          projects.css.scss
        
#projects_controller {
  .new_project {
    background-color: $main-color;
    color: #FFF;
    padding: 5px 12px;
    margin: 10px 0;
    font-size: 16px;
    @include rounded-corners(5px);
  }

  .project {
    border: solid 1px #777;
    margin: 20px 0;
    padding: 7px 12px;
    @include rounded-corners(10px);
  }

  .project h2 {
    margin: 0;
  }
}

          layouts/application.html.erb
        
<body id="<%= params[:controller].parameterize %>_controller">