Sign in through GitHub
Sass Basics

#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_code 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;
  }
}