Sass Essentials


Published on

Essentials knowledges to develop with css preprocessor SASS (Syntactically Awesome Style Sheets)

Published in: Software
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Sass Essentials

  1. 1. SASS ESSENTIALS Sass: Syntactically Awesome Style Sheets @romiguelangel
  2. 2. : About me Miguel Ángel Ríos | @romiguelangel Frontend Developer at and
  3. 3. : What is SASS ? SASS is a pseudo-language that adds superpowers to your css, allowing use variables, functions, control statements, inheritance, interpolation, etc ..
  4. 4. : How can SASS help you ? Scalability Maintenance Increase development speed Apply DRY (Don’t Repeat Yourself) More control over the code Apply Clean Code principles ...
  5. 5. : How it say ? SASS or SCSS ? You can type SASS with two syntaxes : body font-family: $font-base background-color: white p, a font-size: $size-base h1, .h1 font-size: $size-base * 1.5 a text-decoration: none &, &:active, &:visited color: black &:hover +transition(color, 0.25s) color: $color-selected SASS Don't use brackets or semicolons .SASS file extension Elements indentation set specification level of your selectors
  6. 6. : How it say ? SASS or SCSS ? body { font-family: $font-base; background-color: white; } p, a { font-size: $size-base; } h1, .h1 { font-size: $size-base * 1.5 } a { text-decoration: none; &, &:active, &:visited { color: black; } &:hover { @include transition(color, 0.25s); color: $color-selected; } } SCSS Use brackets and semicolons .SCSS file extension Every valid CSS3 stylesheet is a valid SCSS CSS SCSS You can type SASS with two syntaxes :
  7. 7. : but, How can I install it ? Open a terminal and : # Require ruby $ gem install sass # Test $ sass -v Sass 3.3.4 (Maptastic Maple)
  8. 8. : All right, how can I convert my css ? $ sass-convert [input] [output] # CSS to SASS $ sass-convert main.css main.sass # CSS to SCSS $ mv main.css main.scss # SCSS to SASS $ sass-convert main.scss main.sass Open a terminal and :
  9. 9. : Processing CSS $ sass [--option] [input]:[output] # Create or update main.css once $ sass --update main.sass:main.css # Active watcher and update main.css by each change $ sass --watch main.sass:main.css # Compile all folder files into css folder $ sass --watch .:../css # Output compressed in one line $ sass --watch .:../css --style compressed Leave open a terminal and :
  10. 10. : Variables $ Prefixed with $ symbol Can be colors, values, fonts, arithmetic operations, etc .. Can contain more than one item, making a list that can be traveled with a control statement. $font-base: arial, sans-serif $color-base: #333333 $color-selected: #FFA500 $size-base: 12px $size-large: $size-base * 1.5 body font: family: $font-base size: $size-base h1, .h1 font-size: $size-large a color: $color-base &:hover color: $color-selected Store information and reused after
  11. 11. : Nesting Keep nesting proportion. e.g. If you indent first with n tabs, you need to use the same tabs for all levels of nesting. You can indent with tabs or spaces, but not both at once. It’s recommended to not exceed the 3 levels of indentation, to avoid high levels of specification in the output file. .product display: inline-block .product-header text-align: center .product-content max-height: 300px .product-footer background-color: #EEE li float: left margin-right: 10px &:last-child margin: 0 N1 N2 N3 Clear hierarchy thanks to indentation
  12. 12. : Partials & Imports We can import other style files (partials) to build our output file. There are two partials types : Without underscore e.g. buttons.sass Generates an output file css also included in the parent file. With underscore e.g. _buttons.sass NO generates output file, are only included in the parent file. // inside of main.sass @import _reset.sass @import media.sass Load different modules to make your css _reset main media main media CSS SASS
  13. 13. : Mixins To declare can be used both prefixes : = or @mixin Once generated will be included with the @include or + sign followed by the name of the mixin and its arguments Don’t need arguments, you can only generate blocks with styles @mixin border-radius($radius) -webkit-border-radius: $radius -moz-border-radius: $radius border-radius: $radius =clearfix display: inline-block &:after content: "." display: block height: 0 clear: both visibility: hidden * html & height: 1px .block +border-radius(10px) @include clearfix Encapsule styles and use like a function
  14. 14. : @Extend and %placeholders Using @extend inherit all the properties of the element we need The %placeholders avoid generating the root element in the output file, reducing our code and making it more semantic It’s not recommended to extend major selectors (h1, ul, li, etc ..), it could generate inheritance loops %button-base display: inline-block text-align: center padding: 5px 10px cursor: pointer border: 1px solid #BBB .button-success @extend %button-base background-color: green .button-remove @extend %button-base background-color: red .button-remove-disabled @extend .button-remove pointer-events: none Inheritance from selectors and classes
  15. 15. : Interpolation We will use #{$var} to put a variable inside a string, class, id or to generate a property. // Into elements $color: red .button-#{$color} color: $color // Into strings $sprite: ‘sprite27.png’ .icon-home background: url(‘img/#{$sprite}’) // Into properties $property: border-radius $values: 10px =super-mixin($property, $values) -webkit-#{$property}: $values -moz-#{$property}: $values #{$property}: $values Variables into elements, strings and properties
  16. 16. : Operations & Basic functions $grid: 12 // max columns $margins: 1% $container: 100% @function gridder($columns) $t1: $container / $grid $t2: ($t1 * $columns) @return $t2 - $margins * 2 .container_#{$grid} width: $container margin: 0 overflow: hidden .grid_2 width: +gridder(2) Are available the basic arithmetic operations : addition +, subtraction -, multiplication*, division /, modulus % @function directive always requires a @return value to return Convert n to percent : n * 1% Convert p to number : p * 0.01 Arithmetic operations and a little function
  17. 17. : Control directives & expressions $size-base: 12px $font-base: ‘Helvetica’ $color: red h1 @if $font-base == ‘Helvetica’ font-size: $size-base * 2 line-height: 1em margin-bottom: 1em @else if $font-base == arial color: blue line-height: 0.5em @else font-size: $size-base line-height: normal @if , @for and @each with list variables We can evaluate expressions with the usual logical operators : equal sign ==, not equal !=, less than <, greater than >, less than or equal to <=, greater than or equal to >= And also you can concatenate conditions with boolean operators and, or, not // @if ($a == 1) and ($b > 2)
  18. 18. : Control directives & expressions @for $i from 1 through 3 .item-#{$i} width: $i * 2px $icons: home, cart, search @each $icon in $icons $name: icon-#{$icon} $url: url(‘img/#{$name}.png’) .#{$name} background: $url @if , @for and @each with list variables // for output .item-1 { width: 2px } .item-2 { width: 4px } .item-3 { width: 6px } // each output .icon-home { background: url(‘img/icon-home.png’)} .icon-cart { background: url(‘img/icon-cart.png’)} .icon-search { background: url(‘img/icon-search.png’)} csssass
  20. 20. Thanks ! @romiguelangel Miguel Ángel Ríos | Frontend Developer