• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to SASS
 

Introduction to SASS

on

  • 6,948 views

 

Statistics

Views

Total Views
6,948
Views on SlideShare
1,915
Embed Views
5,033

Actions

Likes
2
Downloads
32
Comments
0

7 Embeds 5,033

http://jonathandean.com 2459
http://www.jonathandean.com 2447
http://jonathandean.net 74
http://localhost 45
http://webcache.googleusercontent.com 5
http://translate.googleusercontent.com 2
https://www.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Introduction to SASS Introduction to SASS Presentation Transcript

    • SASS For The Win!
      An introduction to SASS
      Oct. 13, 2011
      1
      Created for Magma Rails 2011 - www.magmarails.com
      Slides posted at http://tinyurl.com/magma-haml-sass
      Sample code from this presentation can be found in the following sample app:
      https://github.com/jonathandean/SASS-and-HAML-FTW
    • What is SASS?
      Syntactically Awesome Stylesheets
      Smarter CSS
      Gives you variables and methods (mixins) for CSS
      Lets you nest declarations
      Provides selector inheritance
      Lets you do math with your variable values
      Works by compiling .sass or .scss files into normal valid .css
      Commonly used in Ruby on Rails applications but can be used in any web project
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      2
    • SASS and SCSS
      Two available syntaxes
      SASS
      SCSS
      HAML-style indentation
      No brackets or semi-colons, based on indentation
      Less characters to type
      Enforced conventions/neatness
      Semi-colon and bracket syntax
      Superset of normal CSS
      Normal CSS is also valid SCSS
      Newer and recommended
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      3
    • SASS and SCSS
      Two available syntaxes
      SASS
      SCSS
      $txt-size: 12px
      $txt-color: #333
      $link-color: #999
      #main
      font-size: $txt-size
      color: $txt-color
      a
      color: $link-color
      $txt-size: 12px;
      $txt-color: #333;
      $link-color: #999;
      #main{
      font-size: $txt-size;
      color: $txt-color;
      a{
      color: $link-color;
      }
      }
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      4
    • SASS and SCSS
      Both syntaxes have the same functionality
      Both of the previous examples compile to:
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      5
      #main{
      font-size: 12px;
      color: #333333;
      }
      #main a{
      color: #999999;
      }
      • Already demonstrated basic variable usage and nesting
      • Note: Some examples compile using different formatting, I changed them for the slides for readability
    • More on nesting
      You can reference the parent selector with &
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      6
      Resulting CSS
      SCSS
      #content{
      font-size: 12px;
      &, a{
      color: #333;
      }
      }
      #content{
      font-size: 12px;
      }
      #content, #content a{
      color: #333;
      }
    • Selector inheritance
      You can also extend other CSS declarations with @extend
      .error{
      color: red;
      }
      .seriousError{
      @extend .error;
      font-weight: bold;
      }
      Resulting CSS
      .error, .seriousError{
      color: red;
      }
      .seriousError{
      font-weight: bold;
      }
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      7
    • Mixins
      Mixins are sets of reusable styles, almost like methods in other languages
      @mixin awesome-text{
      font-size: 24px;
      font-weight: bold;
      color: blue;
      }
      p{
      @include awesome-text;
      }
      Resulting CSS
      p{
      font-size: 24px;
      font-weight: bold;
      color: blue;
      }
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      8
    • Mixins with parameters
      Mixins can also take parameters
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      9
      SCSS
      @mixin awesome-text($size){
      font-size: $size;
      font-weight: bold;
      color: blue;
      }
      p{
      @include awesome-text(24px);
      }
      li{
      @include awesome-text(18px);
      }
      Resulting CSS
      p{
      font-size: 24px;
      font-weight: bold;
      color: blue;
      }
      li{
      font-size: 18px;
      font-weight: bold;
      color: blue;
      }
    • More advanced mixin example
      @mixin image-replace($image-url){
      &, & a{
      display: block;
      background: url($image-url) no-repeat;
      }
      a{
      text-indent: -99999px;
      text-decoration: none;
      }
      }
      h1{
      @include image-replace(“images/header.gif”);
      }
      Resulting CSS
      h1, h1 a{
      display: block;
      background: url(“images/header.gif”) no-repeat;
      }
      h1 a{
      text-indent: -99999px;
      text-decoration: none;
      }
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      10
    • Mathematic operations
      You can do simple math operations with your variable values, even if they have units
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      11
      $page-width: 500px;
      $sidebar-width: 100px;
      $content-width: $page-width - $sidebar-width;
      #main{
      width: $page-width;
      #sidebar{
      width: $sidebar-width;
      }
      #content{
      width: $content-width;
      }
      }
      Resulting CSS
      #main{
      width: 500px;
      }
      #main #sidebar{
      width: 100px;
      }
      #main #content{
      width: 400px;
      }
    • Mathematic operations
      Supported operations: +, -, *, /, %
      The division operator (/) is also valid in normal CSS
      font: 10px/8px; // stays font: 10px/8px;
      So it is only used as division in three cases
      When one of the values is stored in a variable
      $content-width: 500px;
      width: $content-width/2; // becomes width: 250px;
      When surrounded by parenthesis
      width: (500px/2); // becomes width: 250px;
      When part of another math expression
      width: 10px + 500px/2; // becomes width: 260px;
      To use variables in the CSS version without doing math operations
      $some-val: 10px;
      $another-val: 8px;
      font: #{$some-val}/#{$another-val}; // font: 10px/8px;
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      12
    • Interpolation
      You can use variables in selectors and property declarations
      $class-name: wrapper;
      $attribute-name: font;
      div.#{$class-name}{
      #{$attribute-name}-size: 12px;
      }
      Resulting CSS
      div.wrapper{
      font-size: 12px;
      }
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      13
      Warning: RubyMine may not recognize this syntax and highlight it as an error
    • Control directives
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      14
      @if
      $type: big;
      p{
      @if $type == big{
      font-size: 24px;
      }
      }
      Resulting CSS
      p{
      font-size: 24px;
      }
      @if / @else
      $type: small;
      p{
      @if $type == big {
      font-size: 24px;
      } @else if $type == medium{
      font-size: 18px;
      } @else {
      font-size: 16px;
      }
      }
      Resulting CSS
      p{
      font-size: 16px;
      }
    • Control directives
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      15
      Resulting CSS
      .item-1{
      width: 10px; }
      .item-2{
      width: 20px; }
      .item-3{
      width: 30px; }
      @for
      @for $i from 1 through 3 {
      .item-#{$i} {
      width: 10px * $i;
      }
      }
      @each
      @each $item in item1, item2{
      .#{$item}{
      width: 500px;
      }
      }
      .item1{
      width: 500px; }
      .item2{
      width: 500px; }
      @while
      $i: 6;
      @while $i > 0 {
      .item-#{$i} {
      width: 10px * $i;
      }
      $i: $i - 2;
      }
      .item-6{
      width: 60px; }
      .item-4{
      width: 40px; }
      .item-2{
      width: 20px; }
    • Importing other SASS files
      Import other .sass or .scss files using @import
      @import “reset”;
      @import “reset.css.scss”; // File extension also allowed
      You can also create partials that will only be imported to other files and not compiled to .css files themselves
      Just name the partial with an underscore in the front, such as _sample.css.scss
      Now import the same way: @import “sample”;
      Handy for organizing styles into multiple files but compiling to only one file for use on the web
      Note: when using the Rails 3.1 asset pipeline, name your files with .css.scss or .css.sassextentions instead of just .scss or .sass
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      16
    • Nested properties
      Simplify the declaration of name-spaced CSS properties
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      17
      Resulting CSS
      SCSS
      .sassy{
      font:{
      size: 12px;
      weight: bold;
      }
      }
      .sassy{
      font-size: 12px;
      font-weight: bold;
      }
    • Color operations
      You can also do mathematic operations on color values
      color: #010203 + #040506; // color: #050709;
      Howthisiscomputed
      #010203 + #040506 = #050709
      01 + 04 = 05
      02 + 05 = 07
      03 + 06 = 09
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      18
    • Variable defaults
      Will only assign the variable if it hasn’t been defined yet
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      19
      $page-color: #333;
      $page-color: #666 !default;
      $section-color: #999 !default;
      // won’t be assigned because $page-color has already been defined
      // will be assigned because $section-color hasn’t been defined yet
      Handy for when you import a partial in some files but not in all of them and want the value from the partial to take precedence if it has already been defined
    • Using SASS without Rails
      gem install sass
      sass --watch path/to/input.scss:path/to/output.css
      Sass will auto-compile to output.css each time input.css is modified
      Use it for any project you have CSS
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      20
    • Using SASS in a Rails application
      Rails 3.1
      Included by default!
      Put your filename.css.scss files in app/assets/stylesheets/
      The Asset Pipeline will deal with compiling them for you
      See the sample application!
      For older versions
      Add the following to your Gemfile
      gem “sass”
      You can put your sass files anywhere, but why not use the new convention introduced by 3.1
      Use sass --watch in the command line or another gem such as Compass
      Oct. 13, 2011
      An Introduction to SASS by Jonathan Dean - www.jonathandean.com
      21