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

Sass Way

Sass Way

A simple introduction to Sass

Filippo Gangi Dino

April 27, 2015
Tweet

More Decks by Filippo Gangi Dino

Other Decks in Programming

Transcript

  1. Introduction First of all, we assume that you know CSS

    use CSS write CSS love CSS suffer from CSS
  2. Introduction Sass is an attempt to use CSS without pain

    and with a modern approach. You will love Sass!
  3. About “Sass (Syntactically Awesome StyleSheets) is an extension of CSS

    that adds power and elegance to the basic language.“
  4. About “Sass (Syntactically Awesome StyleSheets) is an extension of CSS

    that adds power and elegance to the basic language.“ Sass improves CSS’s syntax in order to provide extra features and handy tools. The point is not to turn CSS into a fully-featured programming language; Sass wants to help where CSS fails.
  5. Preprocessor Sass is a preprocessor for CSS. A preprocessor is

    a program that processes its input data to produce output that is used as input to another program.
  6. Preprocessor Sass is a preprocessor for CSS. A preprocessor is

    a program that processes its input data to produce output that is used as input to another program. There are also many other CSS preprocessors like LESS or Stylus.
  7. Output style :nested #main { color: #fff; background-color: #000; }

    #main p { width: 10em; } Sass compiles CSS in four different outputs.
  8. Output style Sass compiles CSS in four different outputs. :compact

    #main { color: #fff; background-color: #000; } #main p { width: 10em; }
  9. Output style Sass compiles CSS in four different outputs. :expanded

    #main { color: #fff; background-color: #000; } #main p { width: 10em; }
  10. Output style Sass compiles CSS in four different outputs. :compressed

    #main{color:#fff;background-color:#000} #main p{width:10em}
  11. Sass VS SCSS Soon enough, Sass maintainers decided to close

    the gap between Sass and CSS by providing a CSS-friendly syntax called SCSS(Sassy CSS). The motto is: if it’s valid CSS, it’s valid SCSS.
  12. Sass VS SCSS Soon enough, Sass maintainers decided to close

    the gap between Sass and CSS by providing a CSS-friendly syntax called SCSS(Sassy CSS). The motto is: if it’s valid CSS, it’s valid SCSS. Since then, Sass (the preprocessor) has been providing two different syntaxes: Sass and SCSS. They are strictly equivalent in features.
  13. Sass VS SCSS Sass means both the preprocessor and its

    own syntax. Sass describe a syntax indentation-sensitivity. Sass SCSS Sass Preprocessor Syntaxes
  14. Curly braces Sass syntax simplifies the readability removing curly braces

    and semicolons. // Sass .selector color: #DDD width: 10% // CSS .selector { color: #DDD; width: 10%; }
  15. Indentation Two spaces indents, no tabs, meaningful use of whitespaces.

    .selector color: #DDD width: 10% .another-selector width: 100%
  16. Nesting The selectors can be nested. This feature offers a

    way for stylesheet authors to compute long selectors by nesting shorter selectors.
  17. Nesting The selectors can be nested. This feature offers a

    way for stylesheet authors to compute long selectors by nesting shorter selectors. // Sass nav ul color: red li color: black a text-decoration: none &:hover color: white // CSS nav ul { color: red; } nav li { color: black; } nav a { text-decoration: none; } nav a:hover{ color: white; }
  18. Brackets Brackets can be used to affect the order of

    operations. // Sass .item width: 1em + (2em * 3) .item width: (1em + 2em) * 3 // CSS .item { width: 7em; } .item { width: 9em; }
  19. Numbers Number Number is a data type that allow calculations.

    Remember also units are numbers, not strings.
  20. Numbers Zero. Numbers should have leading zero before a decimal

    value. // Yes opacity: 0.5 // No opacity: .5
  21. Numbers Zero Unit. When the value is zero don’t write

    the measurement unit. // Yes top: 0 // No top: 0px
  22. Strings String CSS doesn’t require strings to be quoted. Sass

    also doesn’t require strings to be quoted, but it is a good practice. This improves the understanding.
  23. Strings String CSS doesn’t require strings to be quoted. Sass

    also doesn’t require strings to be quoted, but it is a good practice. This improves the understanding. //Yes $font-stack: 'Helvetica Neue Light', 'Helvetica', sans-serif //No $font-stack: Helvetica Neue Light, Helvetica, sans-serif
  24. Maps Map The associations must always be surrounded by brackets

    and comma separated. A map can be used like a list of key - value pairs.
  25. Maps // _config.sass $colors: (sexy: #FA6ACC, glamour: #F02A52, sky: #09A6E4)

    // _component.sass .element background-color: map-get($colors, sky)
  26. Lists List It’s equivalent of an array. A list is

    a flat data structure used to store values.
  27. Lists List It’s equivalent of an array. A list is

    a flat data structure used to store values. $list: 'item1', 'item2', 'item3' $font-stack: 'Helvetica', 'Arial', sans-serif
  28. Partials File partials / inclusions With Sass you can split

    project in different partials ( name starts with _ ) included by @import directive. Remote resources can be imported with the same directive too. No more 2.000 CSS lines.
  29. Partials // It’s possible to nest @import 'vendors/bootstrap', 'vendors/jquery-ui' @import

    'utils/variables', 'utils/functions', 'utils/mixins', 'utils/placeholders' @import 'base/reset', 'base/typography' @import 'layout/navigation', 'layout/grid', 'layout/header', 'layout/footer', 'layout/sidebar', 'layout/forms' @import 'components/buttons', 'components/carousel', 'components/cover', 'components/dropdown' @import 'pages/home', 'pages/contact' @import 'themes/theme', 'themes/admin'
  30. Partials Some word about architecture, conventions and more... not now!

    “One file to rule them all, One file to find them, One file to bring them all, And in the Sass way merge them.” J.R.R. Tolkien
  31. Conditions/loop Conditions / loop @if condition ... @else ... @if

    $var == *something* width: 50% @else width: 40%
  32. Conditions/loop Conditions / loop @for $i from 1 through 3

    { ...} @for $count from 1 through 3 .item-#{$count} width: 30em * $count
  33. Conditions/loop Conditions / loop @each $var in <list or map>

    . The directive @each set $var in each element of the list or map.
  34. Conditions/loop Conditions / loop @each $var in <list or map>

    . The directive @each set $var in each element of the list or map. $colors: (sexy: #FA6ACC, glamour: #F02A52, sky: #09A6E4) $list: ‘sexy’, ‘glamour’, ‘sky’ @each $item in $list .item-#{$item} background-color: map-get($colors, $item)
  35. Conditions/loop Conditions / loop @while <condition> { ... } $i:

    6 @while $i > 0 .item-#{$i} width: 2em * $i $i: $i - 2
  36. Interpolation Interpolation Selectors and properties can be interpolated through the

    use of #{...} $name: ’foo’ $attr: ’border’ p.#{$name} #{$attr}-color: blue
  37. Variables Variables are the essence of any programming language. They

    allow us to reuse values without having to copy them over and over again. Variables must be defined before the use. Scoping: local variables override previous and global variables. Pay attention! Sass doesn’t have constants. The convention say to write variables that you don’t want to override UPCASED.
  38. Variables $base-color: blue h1 color: $base-color // color: blue .wrapper

    $base-color: red h1 color: $base-color // color: red // Upcased constant $CONSTANT: 1em $variable: 10px
  39. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px
  40. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px
  41. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings
  42. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units
  43. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px
  44. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px width: ( 1in + 1px ) // => 1.01042in # Compatible, use in
  45. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px width: ( 1in + 1px ) // => 1.01042in # Compatible, use in width: ( 10px / 2px ) // => 5 # WAAT? remove px. It makes 10/2 and px/px
  46. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px width: ( 1in + 1px ) // => 1.01042in # Compatible, use in width: ( 10px / 2px ) // => 5 # WAAT? remove px. It makes 10/2 and px/px $number: 10px width: $number/2 // 5px # with vars do not need brackets width: round(10.1)/2px // 5px # with functions do not need brackets
  47. Operations width: 10px + 2px // 10px + 2px #

    Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px width: ( 1in + 1px ) // => 1.01042in # Compatible, use in width: ( 10px / 2px ) // => 5 # WAAT? remove px. It makes 10/2 and px/px $number: 10px width: $number/2 // 5px # with vars do not need brackets width: round(10.1)/2px // 5px # with functions do not need brackets color: ( #020304 + #040506 ) // #060810 # it makes 02+04=06, 03+05=08, 04+06=10
  48. Functions Sass has a lot of functions for all data

    types (and more like selectors). Now some helpful examples.
  49. Functions Number functions. percentage(100px / 50px) // 200% => Converts

    a unitless number to a percentage. round(12.4) // 12 => Rounds a number to the nearest whole number. random([$limit]) // Returns a random number. Default is between 0 and 1.
  50. Functions String functions. str-length("foo") // 3 => String length to-upper-case("foo")

    // "FOO" => Converts a string to upper case to-lower-case("BAR") // "bar" => Converts a string to lower case
  51. Functions Color functions. darken(#800, 20%) // #200 => Color darkness

    increased by 20% lighten(#800, 20%) // #e00 => Color lightness increased by 20% invert(#800) // Invert color transparentize(rgba(0, 0, 0, 0.8), 0.2) // rgba(0, 0, 0, 0.6) => Increase color opacity
  52. Functions List functions. length($list) // returns the length (if not

    a list, returns 1) nth($list, $index) // returns the value at $index position in $list append($list, $value[, $separator]) // appends $value to the end of $list using $separator join($list1, $list2[, $separator]) // appends $list2 to $list1 zip(*$lists) // WTF?
  53. Mixins Mixins allow you to define groups of selectors and

    CSS properties that can be re-used. Mixins accept parameters. Don’t abuse the power of mixins!
  54. Mixins @mixin name ($something) // or =name($something) =border-radius($radius = 2px)

    -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius // Use mixins .button +border-radius(10px)
  55. Extends Directive @extend allow you to share CSS properties with

    others selectors. //Sass .message border: 1px solid #ccc padding: 10px color: #333 .success @extend .message border-color: green //CSS .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border: 1px solid #ccc; padding: 10px; color: #333; border-color: green; }
  56. Extends Extend-only selector: are similar to class selectors using “%”.

    Only the selectors that extend them will be included in the output stylesheet.
  57. Extends Extend-only selector: are similar to class selectors using “%”.

    Only the selectors that extend them will be included in the output stylesheet. //Sass %red-button background-color: blue color: white .button @extend %red-button margin: 0 .huge-button @extend %red-button .another-button @extend %red-button //CSS .button { background-color: blue; color: white; margin: 0; } .huge-button { background-color: blue; color: white; } .another-button { background-color: blue; color: white; }
  58. Extends Extend-only selector: are similar to class selectors using “%”.

    Only the selectors that extend them will be included in the output stylesheet. //Sass %red-button background-color: blue color: white .button @extend %red-button margin: 0 .huge-button @extend %red-button .another-button @extend %red-button //CSS .button, .huge- button, .another-button { background-color: blue; color: white; } .button { margin: 0; }
  59. Around Sass In this scenario we have a lot of

    approaches evolution. From mixin collections to CSS framework… do you know Bootstrap?
  60. Around Sass DRY (don’t repeat yourself) .button { background-color: red;

    } .title { color: red; } $main-color: red .button background-color: $main-color .title color: $main-color
  61. Around Sass BEM-like Naming BEM splits components’ classes into three

    groups: Block: The root of the component. Element: A component part of the Block. Modifier: A variant or extension of the Block. .room {} .room__head {} .room--bathroom {}
  62. Around Sass sass/ | |– base/ | `– _typography.sass #

    Typography rules | |– components/ | |– _buttons.sass # Buttons | |– _dropdown.sass # Dropdown | `– _navigation.sass # Navigation | |– helpers/ | |– _variables.sass # Sass Variables | |– _functions.sass # Sass Functions | |– _mixins.sass # Sass Mixins | `– _helpers.sass # Class & placeholders helpers | |– layout/ | |– _header.sass # Header | `– _footer.sass # Footer | |– pages/ | |– _home.sass # Home specific styles | `– _contact.sass # Contact specific styles | |– themes/ | |– _theme.sass # Default theme | `– _admin.sass # Admin theme | |– vendors/ | |– _bootstrap.sass # Bootstrap | `– _jquery-ui.sass # jQuery UI | | `– main.sass # primary Sass file Omitting OOCSS discussion this is a basic stylesheets structure.
  63. Around Sass Compass Compass is the main Sass framework out

    there. Developed by Chris Eppstein, one of the two core designers of Sass. Compass is composed by: . Vendor prefixes . Math helpers like cos, sin, pi and such . Color helpers like shade, tint and such . Image helpers like image-width and image-height . A sprite builder We don’t use Compass anymore.
  64. References Sass documentation sass-lang.com/documentation/file.sass_REFERENCE.html Install Sass sass-lang.com/install Architecture for Sass

    projects www.sitepoint.com/architecture-sass-project/ Sass functions sass-lang.com/documentation/Sass/Script/Functions.html Sass and compass color functions jackiebalzer.com/color DRY en.wikipedia.org/wiki/Don%27t_repeat_yourself CSS naming convention cssguidelin.es/#naming-conventions Architecture of a Sass project www.sitepoint.com/architecture-sass-project/ Compass compass-style.org Why I Don’t Use Compass Anymore www.sitepoint.com/dont-use-compass-anymore Sass Color Functions sass-guidelin.es/assets/images/lighten-darken-mix_huge.png