Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass Primer

Sass Primer

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

Elle Meredith

December 11, 2012
Tweet

More Decks by Elle Meredith

Other Decks in Programming

Transcript

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

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

    auto // .scss .foo {display: block; width: 960px; margin: 0 auto;}
  4. 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/
  5. 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/
  6. 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;
  7. 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
  8. Nesting // html <body class="users index"> // .scss body.users {

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

    color: green; } &.failure { color: red; } } a { color: #999; &:hover { color: #999; } }
  11. & 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; }
  12. Mixin with Paramete @mixin my-button($color: green) { color: $color; }

    input[type=submit] { @include my-button(red); }
  13. 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
  14. 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
  15. 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/
  16. 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
  17. 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
  18. 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));
  19. 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
  20. 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