SASS reference sheet

sassref.scss

/* Importing (you can use scss type as well) */
@import 'import.css';


/* variables */

$black: #000;

body{
    background-color: $black;
}


/* inheritance */

%shared {
    font-size: 10px;
}

#something {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

body{
    @extend %shared;
    background-color: $black;
    box-shadow: 1px 1px 1px #000;
}

h1{
    @extend %shared;
     @extend #something;
    background-color: $black;
}


/* Mixin */
@mixin cssProp($prop1) {
    color:$prop1;
    background: green;

    /*specifying the content*/
    @content;
}

body{
   @include cssProp(red){
       background-repeat: repeat
   }; 
}



/*List functions*/

$NestedList: 1px 1px 1px #000, 1px 1px 1px #fff;
/* comma at the end */
$NestedList2: 3px 3px 3px #000,;


$zip1: 1px 2px 3px 4px;
$zip2: #000 #fff #aaa #ccc;

body{
    background: length($NestedList);
    background: nth($NestedList, 2);
    background: set-nth($NestedList, 1, 2px 2px 2px #000);
    background: join($NestedList , $NestedList2 , comma );
    background: zip($zip1, $zip2);
}


/* Maps */

$map1: (
    'black': #000
);

.foo{
    content: map-keys($map1);
    // content: map-values(map: );
    // content: map-has-key(map: , key: );
    // content: map-get(map: , key: );
    // content: inspect(map-merge(map1: , map2: ) )
    // content: inspect(map-remove(map: , keys: ))
}



/* Operators */

div{
    width: 5+10;
    width: round(5+10.5);
    width: ceil(5+10.5);
    width: floor(5+10.5);
    width: abs(5+10.5);
    width: percentage(5+10.5);
    width: random(100);
}


/* Directive */

$color: #000;

span {
    @if $color==#000{
        background: $color;
    }
    //"else if" or
    @else{
        background: #fff;
    }
}


/* Loops */

@for $i from 1 through 6{
    h#{$i}{
        font-size: #{$i}px;
    }
}

@each $head in h1,h2,h3{
    #{$head}{
        font-size: 10px;
    }
}

$i:0;

@while $i < 3 {
    h#{$i}{
        font-size: 55;
    }
    $i: $i + 1;
}

/* Function Directive */

@function list-match($list1, $list2){
    $len1: length($list1);
    $len2: length($list2);

    @if $len1 == $len2{
        @return true
    }
    @else {
        @return false
    }
}

$list1: 1,2,3;
$list2: 1,2,3;

h1{
    background-repeat: list-match($list1, $list2);
}