SASS

Syntactically Awesome Style Sheets

Installera först

Windows: http://rubyinstaller.org/ eller sök på ruby installer

Sen i terminalen: gem install sass

SASS är ett superset av CSS

SASS kan allt som CSS kan

Med sass får vi variabler,funktioner, loopar etc. i CSS

All sass konverteras till vanlig css

preprocessor

Syntax för SASS

.container{
  background: hsl(330, 50%, 55%);
}    
          

Även fast vi använder sass behöver vi inte använda dess funktioner..

...men vi ska använda dem

Filändelser

Standard filändelse: .scss

Kan förekomma: .sass

.sass syntax

.container
  background: hsl(330, 50%, 55%)
    
          

Indenteringbaserad

.scss syntax

.container{
  background: hsl(330, 50%, 55%);
}    
          

"Vanlig syntax"

Men vad är det som är så bra med det då?

Filstruktur

Nja.

Nice.

Hitta rätt snabbt, lägga till nytt material enkelt

.scss-filer

Sass-filerna är enbart för utvecklingsbruk. Vi länkar fortfarande till vår .css-fil

Vi konverterar alltid till .css

SASS

$Variabler

/* Deklarera med $ */
$primary-color: hsl(330, 50%, 55%);

.container{
  background: $primary-color;
}    
          

Kan vara alla olika egenskaper

/* main.scss */
$full-width: 100%;

.container{
  width: $full-width;
}    
          

Kan kombineras

/* Doesn't have to be kebab-case */
$main-margin: 2rem;

.container{
  margin: 0 0 $main-margin $main-margin;
}    
          

Variabler i variabler

$main-padding: 2rem;
$super-padding: main-padding * 2;
          

Nesting

nav a{
  color: #fff;
}
          

Väljer alla a-element i nav

sass nesting

nav{    /* i .scss-filen */
  a{
    color: #fff;
  }
}

nav a{    /* i vår konverterade css-fil */
  color: #fff;
}

sass ampersand

/* main.scss */
  a{
    color: marine;
    &:hover {
      color: #fff;
    }
  }
}

& ersätter föräldern

sass ampersand

/* main.scss */
  .box{
    color: marine;
    &-article{
      color: #fff;
    }
  }
}

nav{
  li{
    a{
      em{
        span{

        }
      }
    }
  }
}

Partials

Vi behöver inte ha allt i samma .css-fil

Lättare med sass

/* i main.scss */
@import "shame";

body{
  /* Style goes here */
}

_partials

Partials börjar med _: _shame.scss

Vi behöver inte inkludera varken _ eller .scss när vi använder @import

Mixins & Functions

Keep it DRY

Mixins och funktioner gör så att vi kan återanvända kod som vi använder ofta

Flex

/* i main.scss */
@mixin flex-center(){
  display: flex;
  align-items: center;
  justify-content: center;
}

/* i main.scss */
.container{
  @include flex-center;
}

/* i main.css */
.container{
    display: flex;
    align-items: center;
    justify-content: center;
}

Skicka med variabler

@mixin flex($align){
  display: flex;
  align-items: $align;
  justify-content: center;
}
  

Defaults

@mixin flex($align: center){
  display: flex;
  align-items: $align;
  justify-content: center;
}
  

Flera variabler

@mixin flex($align: center, $justify: center){
  display: flex;
  align-items: $align;
  justify-content: $justify;
}
  

Vanligt användningsområde: Vendor prefix

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
  

• -webkit-: Chrome
• -moz-: Firefox
• -ms-: IE
• -o-Opera

Bourbon

Färdiga mixins för vanliga problem

Övriga funktioner i SASS

Operatorer

• +
• -
• *
• /
• %

Faktiska funktioner

@function advancedMath($a, $b){
  @return $a * $b;
}
        

Lists

/* main.scss */
$colors: red green blue;

/* Det är skillnad på dessa två */

$colors: "red green blue";

Maps

/* main.scss */
$colors:(
  "red":  "#ff0000",
  "green": "#00ff00",
  "blue": "#0000ff"
);
  

if/for/while/each

/* main.scss */
@mixin color($color){
  @if $color == white{
    background: black;
  } @else{
    background: teal;
  }
}

Dokumentation

http://www.sass-lang.com/documentation/file.SASS_REFERENCE.html

Övning: använd sass i ett projekt

• Standardfärg? Vanligt förekommande mått? gör en $variabel
• Upprepade kodblock? Gör en mixin
• Gör minst en mixin där du skickar med variabler och en där du använder default parameters
• Dela upp din kod, lägg alla mixins i t.ex. _mixins.scss och importera i main.scss