Sass Primer

Sass Primer

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

492d339a2ec66fa8d80e937abddb58e6?s=128

Elle Meredith

December 11, 2012
Tweet

Transcript

  1. Sa Prime Elle Meredith

  2. CSS Disadvantage • Lack of essential features • Not DRY

    • Difficult to maintain • Multiple HTTP requests when using @import
  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
  4. Syntax // .sass .foo display: block width: 960px margin: 0

    auto // .scss .foo {display: block; width: 960px; margin: 0 auto;}
  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/
  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/
  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;
  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
  9. Variable Syntax $grid-columns or $grid_columns

  10. Nesting // html <body class="users index"> // .scss body.users {

    // everything here will be applied // to the users views }
  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; }
  12. & The Parent Selecto p { color: #000; &.success {

    color: green; } &.failure { color: red; } } a { color: #999; &:hover { color: #999; } }
  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; }
  14. Mixin @mixin reset-list { list-style: none; margin: 0; padding: 0;

    } .siderbar ul { @include reset-list; }
  15. Mixin with Paramete @mixin my-button($color: green) { color: $color; }

    input[type=submit] { @include my-button(red); }
  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
  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
  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/
  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
  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
  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
  22. a lication.sc @import 'vendor'; @import 'mixins'; @import 'modules/normalize'; @import 'modules/base';

    @import 'modules/*';
  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));
  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/
  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
  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
  27. Thank You Elle Meredith Twitter: @aemeredith Slides: https://speakerdeck.com/aemeredith/sass-primer Typefaces: MissionScript

    and Source Sans Pro