Sass (basis)

Installation

Step 1:

Sass Structure

Folders and files

sass/
|
|- components/
|  |- _buttons.scss
|  |- _carouse.scss
|  |- _cover.scss
|- helpers/
|  |- _variables.scss
|  |- _functions.scss
|  |- _mixins.scss
|- layout/
|  |- _grid.scss
|  |- _header.scss
|  |- _footer.scss
|- pages/
|  |- _home.scss
| main.scss

Importing

In main.scss add the files you created. Add variables and other helpers ones first, because refer to them in other files

@import "helpers/variables";
@import "helpers/functions";
@import "helpers/mixins";
@import "components/buttons";
@import "components/carousel";
@import "components/cover";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "pages/home";

Usage

Nesting Selectors

 .parent {
  color: blue;
  .child {
    font-size: 12px;
  }
  &:hover {
  color: black;
  }
}

↓CSS:

.parent {
  color: blue;
}

.parent:hover {
  color: black;
}

.parent .child {
    font-size: 12px;
}

Nesting Properties

.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

↓CSS:

.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

Variables In Sass

$translucent-white: rgba(255,255,255,0.3);

↓ use it in .scss

`background-color: $translucent-white;`

Lists

$standard-border: 4px solid black;

↓ use it in .scss

.parent {
  border: $standard-border;
}

Maps

$border-size: ("min": 2px, "medium": 4px, "max": 6px)

↓ use it in .scss

read more about Function

@Mixin

Create a variable with a set of prepared properties. If there are variables+parameters in the rules сreate "@mixin name" to describe rule and use "@include mixin_name" to add into class rules described in mixin without combining into one declaration and rules

@mixin backface-visibility {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

can contains arguments +with default value +with nesting

@mixin dashed-border($width, $color: #FFF) {
  border: {
     color: $color;
     width: $width;
     style: dashed;
  }
}

↓ use it in .scss

span { //only passes non-default argument
    @include dashed-border(3px);
}
 
p { //passes both arguments
    @include dashed-border(3px, green);
}
 
div { //passes out of order but explicitly defined
   @include dashed-border(color: purple, width: 5px); 
}

Functions

@each $item in $list {
  //some rules and or conditions
}

@for $i from $begin through $end {
   //some rules and or conditions
}

width: if( $condition, $value-if-true, $value-if-false);

↓ use it in .scss

@for $i from 1 through $total {
  .ray:nth-child(#{$i}) {
    background: adjust-hue(blue, $i * $step);
    width: if($i % 2 == 0, 300px, 350px);
    margin-left: if($i % 2 == 0, 0px, 50px);
   }
}

@mixin deck($suit) {
 @if($suit == hearts || $suit == spades){
   color: blue;
 }
 @else-if($suit == clovers || $suit == diamonds){
   color: red;
 }
 @else{
   //some rule
 }
}

@Extend

Use rules fron another class

.lemonade {
  border: 1px yellow;
  background-color: #fdd;
}
.strawberry {
  @extend .lemonade;
  border-color: pink;
}

%Placeholders

Create %placeholder with a ruleset and use "@extend %placeholder_name" in class to add "class_name" to the declaration of the rules described in the placeholder

%absolute{
   position: absolute;
}

use it in .scss

.banner {
  font-family: 'Pacifico', cursive;
  border: {
    top: $border;
    bottom: $border;
  } 

  .slogan {
    background-color: $translucent-white;
    @include dimensions(50%, 200px);
    @extend %absolute;

    span {
      @extend %center;
      @extend %absolute;
    }
  }
}

↓ .css

.banner .slogan, .banner .slogan span {
  position: absolute;
}