SCSS Important Points

##Major function of SASS

  • Variables
  • Nesting
  • Operators(Mathematical operations)
  • Partials and imports (write multiple files and import to single file)
  • Mixins (write reusable pieces of CSS)
  • Functions (can return a value)
  • Extends (inheritance)
  • Control Directives(Complex code using conditional and loops)(usually for frameworks)

Variables

To declare

$color: #FFFFFF;
1

To Use

li{
    color: $color;
}
1
2
3

& - Ampersand keyword and nesting

li{
    &:first-child{

    }
}
1
2
3
4
5

Result = li:first-child

Operations

li{
    background-color: darken($color, 15%);
}
1
2
3

Mixins

To declare:

@mixin clearfix{
    &::after{
        content: "";
        clear: both;
        display: table;
    }
}
@mixin style-link-text($color){
    text-decoration: none;
    text-transform: uppercase;
    color: $color;
}
1
2
3
4
5
6
7
8
9
10
11
12

To use:

li{
    @include clearfix;
}
a:link {
    @include style-link-text(#fff);
}

1
2
3
4
5
6
7

Functions

To declare:

@function divide($a, $b){
    @return $a/ $b;
}
1
2
3

To use:

li{
    margin:divide(60, 2)*1px;
}
1
2
3

Extend

To declare:

%btn-placeholder{
    //...
}
1
2
3

To use:

li{
    @extend %btn-placeholder;
}
1
2
3

Extend is copying the selector when compiling, mixins is copying the decoration when compiling.