Your SlideShare is downloading. ×
Introduction to SASS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Introduction to SASS

8,548
views

Published on

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,548
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
    • 6. 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;
    }
  • 7. 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
  • 8. 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
  • 9. 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;
    }
  • 10. 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
  • 11. 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;
    }
  • 12. 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
  • 13. 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
  • 14. 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;
    }
  • 15. 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; }
  • 16. 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
  • 17. 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;
    }
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 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