SASSMAS


sass-lang.com

slid.es/bennyschudel/sassmas


DEC13 - @bennyschudel

Installation

ruby

$ gem install sass

node.js (uses libsass - faster)

$ npm install node-sass

Interactive Shell

$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

BASICS

  • Import / Partials
  • Comments
  • Data Types
  • Variables
  • Nesting
  • Mixins
  • Extend/Inheritance
  • Operators
  • Functions
  • Control Directives
  • Specials

Import / Partials

Imports
@import 'site';

Partials

@import '_partial';

Partials are not compiled individually.

Comments

/* This comment
   is preserved. */
   
body {
  color : black;
}
/* This comment
   is preserved. */
   
body {
  color: black;
}
// This is not.

body {
  color : black;
}
body {
  color: black;
}
    
    

Data Types

  • Numbers
    1.2, 13, 10px
  • Strings  (with and without quotes)
    "foo", 'bar', baz
  • Colors
    blue, #04a3f9, rgba(255, 0, 0, 0.5)
  • Booleans / Null
    true, false, null
  • Lists (separated by spaces or commas)
    1.5em 1em 0 2em
    Helvetica, Arial, sans-serif

VarIABLEs

$font-serif : Georgia, serif;
$font-color : blue;

body {
  font-family : $font-stack;
  color : $font-color;
}
body {
    font-family : Georgia, serif;
    color : blue;
}
    
    
    

Default value

$font-color : red !default;

body { 
  color : $font-color;
}
body {
    color : red;
}
    
    

String Interpolation

$name : 'Fanny';

p {
    &:before {
        content : "Hi #{$name}!"
    }
}
p:before {
  content: "Hi Fanny!";
}
    
    
    
    

Interpolated strings are unquoted ;)

$selector : 'error';

p {
    &.#{$selector} {
        color : red;
    }
}
p.error {
  color: red;
}
    
    
    
    

nesting

nav {
  ul {
    margin : 0;
    padding : 0;
    list-style : none;
    
    li {
        display : inline-block;
    }
  }

  a {
    display : block;
    padding : 0.5rem 1rem;
    text-decoration : none;
  }
}
nav ul {
  margin : 0;
  padding : 0;
  list-style : none;
}

nav ul li {
  display : inline-block;
}

nav a {
  display : block;
  padding : 0.5rem 1rem;
  text-decoration : none;
}
    
    

Mixins

@mixin border-radius($radius : 1rem) {
  -webkit-border-radius : $radius;
     -moz-border-radius : $radius;
      -ms-border-radius : $radius;
       -o-border-radius : $radius;
          border-radius : $radius;
}

.box {
    @include border-radius(10px);
}
.box {
  -webkit-border-radius : 10px;
     -moz-border-radius : 10px;
      -ms-border-radius : 10px;
       -o-border-radius : 10px;
          border-radius : 10px;
  }
}
    
    
    
    

Extend/Inheritance

%message {
  border-style : solid;
  border-width : 1px;
  padding : 1rem;
}

.success-message {
  @extend %message;

  border-color : green;
  color : darkgreen;
}

.error-message {
  @extend %message;

  border-color : red;
  color : darkred;
}
.success-message, .error-message {
  border-style : solid;
  border-width : 1px;
  padding : 1rem;
}

.success-message {
  border-color : green;
  color : darkgreen;
}

.error-message {
  border-color : red;
  color : darkred;
}
    
    
    
    

Operators

+ , - , * , / , %

.container {
  width : 100%;
}

article {
  float : left;
  width : 600px / 960px * 100%;
}

aside {
  float : right;
  width : 300px / 960px * 100%;
}
.container {
  width : 100%;
}

article {
  float : left;
  width : 62.5%;
}

aside {
  float : right;
  width : 31.25%;
}

Functions

p {
  color : rgba(red, 0.5);
}
p {
  color : rgba(255, 0, 0, 0.5);
}

Arguments

@mixin border($color, $width)

@mixin border($color : red, $width : 1px)  // keyword arguments

@mixin border($args...)  // variable arguments

sass-lang.com/documentation/Sass/Script/Functions.html

Custom Functions

$grid-width   : 40px;
$gutter-width : 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar {
  width : grid-width(5);
}
#sidebar {
  width : 240px;
}

Control Directives

  • @if / @else if
  • @for
  • @while
  • @each

@if / @else if

$type : second;
p {
  @if $type == first {
    color : blue;
  }
  @else if $type == second {
    color : red;
  }
  @else {
    color : black;
  }
}
p {
  color : red;
}
    
    
    
    
    
    
    
    
    

@for

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2rem * $i;
  }
}
    
    
    
    
.item-1 {
  width: 2rem;
}
.item-2 {
  width: 4rem;
}
.item-3 {
  width: 6rem;
}

@while

$i: 6;

@while $i > 0 {
  .item-#{$i} {
    width: 2rem * $i;
  }
  
  $i: $i - 2;
}
.item-6 {
  width: 12rem;
}
.item-4 {
  width: 8rem;
}
.item-2 {
  width: 4rem;
}

@each

@each $animal in puma, deer, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
.puma-icon {
  background-image: url('/images/puma.png');
}
.deer-icon {
  background-image: url('/images/deer.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

Specials

Combine selector ( &... )

p {
    &.swiss {
        color : red;
    }
}
p.swiss {
  color : red;
}
    
    

Parent selector ( ... & )

p {
    &.swiss {
        color : red;
        
        .europe & {
            color : blue;
        }
    }
}
p.swiss {
  color: red;
}

.europe p.swiss {
  color: blue;
}
    
    

@content

@mixin ie6 {
  * html {
    @content;
  }
}
@include ie6 {
  #logo {
    background : url(logo.png);
  }
}
* html #logo {
  background : url(logo.png);
}







$color: white;
@mixin colors($color : blue) {
  @content;
  border-color : $color;
}
.colors {
  @include colors {
    color : $color;
  }
}
.colors {
  color : white;
  border-color : blue;
}
    
    
    
    
    
    

@debug

@debug 10em + 12em;
Line 1 DEBUG: 22em

@warn

@mixin adjust-location($x) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";

    $x : 1px * $x;
  }
  
  position : relative;
  left : $x;
}

ADVICE / PITFALLS

  • avoid deep nesting » complex selectors
  • always check generated css code
  • use source map support
  • make heavy use of @extend
  • prefix global variables
  • write readable code (not always easy ;)
  • use libsass (faster - if possible)
  • define mixins whenever you can
  • maybe write custom functions

NEXTSTEPS



RTFM  

sass-lang.com/documentation


LEARN

thesassway.com


COMMUNITY

sass-lang.com/community


DEMOTIME


codepen.io/bennyschudel/pen/qHoAD


Questions?


THANKYOU

+

MERRY SASSMAS

SASSMAS

By Benny Schudel

SASSMAS

  • 887