Sass Primer

Sa Prime Elle Meredith

CSS Disadvantage • Lack of essential features • Not DRY
• Diﬀicult to maintain • Multiple HTTP requests when using @import

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

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

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/

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/

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;

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

Variable Syntax $grid-columns or $grid_columns

Neﬆing // html <body class="users index"> // .scss body.users {
// everything here will be applied // to the users views }

Neﬆing // .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; }

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

& 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; }

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

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

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

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

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/

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

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

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

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

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));

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

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

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

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

Sass Primer

Sass Primer

Elle Meredith

More Decks by Elle Meredith

Other Decks in Programming

Featured

Transcript

Sa Prime Elle Meredith

CSS Disadvantage • Lack of essential features • Not DRY

What i Sa ? • Syntactically awesome style sheets •

Syntax // .sass .foo display: block width: 960px margin: 0

Variable : Font Library $font-serif: Constantia, "Lucida Serif", Lucida, "DejaVu

Variable : Colou Library $body: #444; $bkg: #e1e1e1; $laugh_cyan: #57a2c2;

Variable : Colou Library $alert_bg: #fcf8e3; $alert_color: #c09853; $alert_border: #fbeed5;

Variable : Numbe $grid-columns: 12; $grid-column-width: 6.382978723%; $grid-gutter-width: 2.127659574%; Values

Variable Syntax $grid-columns or $grid_columns

Neﬆing // html <body class="users index"> // .scss body.users {

Neﬆing // .scss table { tr:nth-child(2n) { background: #eceeea; }

& The Parent Selecto p { color: #000; &.success {

& The Parent Selecto // with modernizr and IE .menu-item

Mixin @mixin reset-list { list-style: none; margin: 0; padding: 0;

Mixin with Paramete @mixin my-button($color: green) { color: $color; }

Function & Operation $max-width: 18 * 36px + (17 *

Colou Function $main-color: #3352A1; $bold-color: saturate($main-color, 25%); // adjust-hue($color) is

If Else… $col-width: 30px; $gutter-width: 10px; @mixin span($n, $margin-right: true)

Responsive Grid // target / context = result @function calc-em($desired-size,

Media Querie .profile-pic { float: left; width: 250px; @media screen

File Structure application.scss ie.scss email.css mixins.scss modules/_aside.scss modules/_base.scss modules/_forms.scss modules/_normlize.scss

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

Bourbon & Compa With both of these libraries you get

GUI Compile • CodeKit: http://incident57.com/codekit/ • Compass.app http://compass.handlino.com/ • LiveReload

E o Debu ing Sass::SyntaxError in Devise/sessions#new Showing /app/views/layouts/devise/sessions.haml where

In Summary • Variables • Nesting • Mixins • Functions

Thank You Elle Meredith Twitter: @aemeredith Slides: https://speakerdeck.com/aemeredith/sass-primer Typefaces: MissionScript