Sass Primer

An introduction to sass including tips and some suggestions for best practices to using sass

Transcript

1. Sa Prime
   Elle Meredith
   

   View Slide

2. CSS Disadvantage
   • Lack of essential features
   • Not DRY
   • Difficult to maintain
   • Multiple HTTP requests when using @import
   

   View Slide

3. What i Sa ?
   • Syntactically awesome style sheets
   • An extension of CSS, which adds additional
   functionality
   • Generates well-formatted CSS
   • Makes it easier to organise and maintain your styles
   • Written in Ruby, and distributed as gem
   

   View Slide

4. Syntax
   // .sass
   .foo
   display: block
   width: 960px
   margin: 0 auto
   // .scss
   .foo {display: block; width: 960px; margin: 0 auto;}
   

   View Slide

5. Variable : Font Library
   $font-serif: Constantia, "Lucida Serif",
   Lucida, "DejaVu Serif", "Bitstream Vera
   Serif", "Liberation Serif", Georgia, "Times
   New Roman", serif;
   $font-sans: Frutiger, Univers, Calibri, "Myriad
   Pro", Myriad, "DejaVu Sans Condensed",
   "Liberation Sans", HelveticaNeue, "Helvetica
   Neue", Helvetica, Arial, sans-serif;
   Check: http://www.sitepoint.com/eight-definitive-font-stacks/
   

   View Slide

6. Variable : Colou Library
   $body: #444;
   $bkg: #e1e1e1;
   $laugh_cyan: #57a2c2;
   $laugh_magenta: #e8188d;
   // .scss
   body { font: 12px $font-serif; color: $body;
   background: $bkg; }
   Taken from: http://laughtrack.com.au/
   

   View Slide

7. Variable : Colou Library
   $alert_bg: #fcf8e3;
   $alert_color: #c09853;
   $alert_border: #fbeed5;
   $success_bg: #dff0d8;
   $success_color: #468847;
   $success_border: #d6e9c6;
   $error_bg: #f2dede;
   $error_color: #b94a48;
   $error_border: #eed3d7;
   $info_bg: #d9edf7;
   $info_color: #3a87ad;
   $info_border: #bce8f1;
   

   View Slide

8. Variable : Numbe
   $grid-columns: 12;
   $grid-column-width: 6.382978723%;
   $grid-gutter-width: 2.127659574%;
   Values taken from an older version of: http://twitter.github.com/bootstrap/
   Good example of variables usage: https://github.com/thomas-mcdonald/bootstrap-sass/blob/master/vendor/assets/
   stylesheets/bootstrap/_variables.scss
   

   View Slide

9. Variable Syntax
   $grid-columns or $grid_columns
   

   View Slide

10. Nesting
    // html
    
    // .scss
    body.users {
    // everything here will be applied
    // to the users views
    }
    

    View Slide

11. Nesting
    // .scss
    table {
    tr:nth-child(2n) { background: #eceeea; }
    th, td { padding: 10px;
    p { color: #555; }
    }
    }
    // css output
    table tr:nth-child(2n) { background: #eceeea; }
    table th, table td { padding: 10px; }
    table th p { color: #555; }
    table td p { color: #555; }
    

    View Slide

12. & The Parent Selecto
    p { color: #000;
    &.success { color: green; }
    &.failure { color: red; }
    }
    a { color: #999;
    &:hover { color: #999; }
    }
    

    View Slide

13. & The Parent Selecto
    // with modernizr and IE
    .menu-item {
    display: inline-block;
    .ltie8 & {
    display: inline;
    zoom: 1;
    }
    }
    // css output
    .menu-item { display: inline-block; }
    .ltie8 .menu-item { display: inline ; zoom: 1; }
    

    View Slide

14. Mixin
    @mixin reset-list {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .siderbar ul { @include reset-list; }
    

    View Slide

15. Mixin with Paramete
    @mixin my-button($color: green) {
    color: $color;
    }
    input[type=submit] {
    @include my-button(red);
    }
    

    View Slide

16. Function & Operation
    $max-width: 18 * 36px + (17 * 10px);
    .container { width: $max-width; // 818px
    color: #66EE99 + #666666; // #CFF
    }
    Ref: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
    

    View Slide

17. Colou Function
    $main-color: #3352A1;
    $bold-color: saturate($main-color, 25%);
    // adjust-hue($color) is the same as complement($color)
    $accent-color: adjust-hue($bold-color, 60deg);
    $main-gray-color: grayscale($main-color);
    $highlight-color: lighten($main-color, 20%);
    $shadow-color: transparentize(darken($main-color, 20%), 0.2);
    .main { color: $main-color; }
    .bold { color: $bold-color; }
    .accent { color: $accent-color; }
    .gray { color: $main-gray-color; }
    .highlight { color: $highlight-color; }
    .shadow { color: $shadow-color; }
    Ref: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
    

    View Slide

18. If Else…
    $col-width: 30px;
    $gutter-width: 10px;
    @mixin span($n, $margin-right: true) {
    width: ($col-width * $n) + ($gutter-width * ($n - 1));
    @if $margin_right {
    margin-right: $gutter-width; }
    @else {
    margin-right: 0;
    }
    }
    .container { @include span(24, false); margin: 0 auto; }
    .main { @include span(15); }
    Blueprint CSS framework: http://www.blueprintcss.org/
    

    View Slide

19. Responsive Grid
    // target / context = result
    @function calc-em($desired-size, $context) {
    @return ($desired-size / $context) * 1em
    }
    // so for example if body font-size is 100%, which equates
    // to 16px and we want our target font-size to be 24px
    h1 { font-size: calc-em(24, 16); } // => 1.5em
    // or for example to get a flexible grid layout
    @function calc-percent($desired-size, $context) {
    @return percentage($desired-size / $context)
    }
    .container { width: 90%; margin: 0 auto; }
    .main { width: calc-percent(900, 960); } // => 93.75%
    Ref: Responsive Web Design by Ethan Marcotte, http://www.abookapart.com/products/responsive-web-design
    Ref: http://thesassway.com/advanced/pure-sass-functions
    

    View Slide

20. Media Querie
    .profile-pic { float: left; width: 250px;
    @media screen and (max-width: 320px) {
    width: 100px; float: none;
    }
    @media screen and (min-width: 1200px) {
    float: right;
    }
    }
    // css output:
    profile-pic { float: left; width: 250px; }
    @media screen and (max-width: 320px) {
    .profile-pic { width: 100px; float: none; }
    }
    @media screen and (min-width: 1200px) {
    .profile-pic { float: right; }
    }
    Ref: http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
    

    View Slide

21. File Structure
    application.scss
    ie.scss
    email.css
    mixins.scss
    modules/_aside.scss
    modules/_base.scss
    modules/_forms.scss
    modules/_normlize.scss
    modules/_calendar.scss
    modules/_dashboard.scss
    modules/_my_profile.scss
    

    View Slide

22. a lication.sc
    @import 'vendor';
    @import 'mixins';
    @import 'modules/normalize';
    @import 'modules/base';
    @import 'modules/*';
    

    View Slide

23. Bourbon & Compa
    With both of these libraries you get a bunch of helpers and mixins
    that make your development even easier
    • Bourbon: http://bourbon.io/
    • Compass: http://compass-style.org/
    // Bourbon
    @include background(linear-gradient(red, green) left repeat);
    // Compass
    @include background-image(linear-gradient(left top, white, #ddd));
    

    View Slide

24. GUI Compile
    • CodeKit: http://incident57.com/codekit/
    • Compass.app http://compass.handlino.com/
    • LiveReload http://livereload.com/
    • Scout http://mhs.github.com/scout-app/
    

    View Slide

25. E o Debu ing
    Sass::SyntaxError in Devise/sessions#new
    Showing /app/views/layouts/devise/sessions.haml where line #6
    raised:
    Invalid CSS after "...), margin-right": expected ";", was ":
    $gridGutterWi..."
    (in /app/assets/stylesheets/screen.scss)
    // Application Trace
    app/assets/stylesheets/screen.scss:18
    app/assets/stylesheets/application.scss:6
    

    View Slide

26. In Summary
    • Variables
    • Nesting
    • Mixins
    • Functions and Operations
    • Ways to use Sass for responsive grids and media queries
    • File structuring
    • Existing mixins libraries
    • GUI Compilers
    • Error debugging
    

    View Slide

27. Thank You
    Elle Meredith
    Twitter: @aemeredith
    Slides: https://speakerdeck.com/aemeredith/sass-primer
    Typefaces: MissionScript and Source Sans Pro
    

    View Slide