Advanced nesting

• Nesting makes code complicated
• The Inception Rule: don’t go more than four levels deep
• Style in a modular way
• Consider if removing it could simplify your code
• Possible to use selectors:
  • &:hover
  • &:focus
  • &::before

/* SCSS */
.element {
  &:hover {
    color: blue;
  }
}
 
/* CSS */
.element:hover {
  color: blue;
}

Mixins

• @mixin
• Can obtain full CSS rules
• Define styles that can be re-used without needing non-semantic classes
• Can take arguments which allows you to produce a wide variety of styles with very few mixins
• May contain:
  • selectors, possibly mixed with properties
  • parent references

/* SASS EXAMPLE */

@mixin corners($radius, $color) {
    border-radius: $radius;
    border-top-right-radius: $radius * 2;
    border-top-right-radius: $radius * 2;
    border-bottom-left-radius: $radius * 2;
    a {
        color: $color;
    }
}

.block1 {
    @include corners(2px, green);
}

.block2 {
    @include corners(5px, red);
    background: #00f;
}

Extend

• Written as @extend
• Allows you to extend attributes from a class or id onto another selector

/* SASS EXAMPLE */

%bar {
    height: 14px;
    font-size: 10px;
    > div {
        float: left;
        clear: none;
    }
}

.menu {
    @extend %bar;
    background: #333;
}

.nav {
    @extend %bar;
}

Functions

• Works with a value of a style attribute
• Possible to use inbuild functions or to create them
• Portable for next projects
• Best practice:
  • Use short names
  • Use functions to calculate values
  • No camelCase or snake_case

@function function-name($arg1, $arg2) {
  @return $arg1 + $arg2
}

Create a function

Media queries

• Nest your media queries
• Always add them to the bottom
• It's possible to use variables

/* SASS EXAMPLE */

.container {
    .left {
        background: #000;
	color: #fff;
        margin: 5px;
	float: left;
	width: 100px;
	a {
	    display: block;
	    color: #fff;
	}
	@media (max-width: 480px) {
	    width: 95%;
	    a {
	        display: inline;
                color: #333;
	    }
	}
    }
    .content {
        margin: 5px;
	background: #eee;
	display: inline-block;
	width: 60%;
	@media (max-width: 480px) {
	    width: 95%;
            background: #00f;
	}
    }
}

Interpolation and if/else loops

• Interpolation: slotting values into other values
  
• Built in Ruby, which uses #{} for expression substitution
  
• @if statement can be followed by several @else if statements and one @else statement

/* SASS EXAMPLE */


@mixin color-class($color) {
    .#{$color}.color {
        color: $color;
	background-image: url("images/#{$color}.jpg");
	@if $color == red {
	    border: 5px solid red;
	}
    }
}

@mixin block($width) {
    @if $width > 100px {
        padding: 0px;
    } @else if $width == 100px {
        padding: 15px;
        .heading {
            content: "Dis man";
	}
    } @else {
        padding: 10px;
    }
}

div {
    @include block(100px);
}

@include color-class(blue);
@include color-class(red);

Loops with @for and @each

• @for repeatedly outputs a set of styles. For each repetition, a counter variable is used to adjust the output.
  
• @each sets $var to each item in the list or map, then outputs the styles it contains using that value of $var.

/* SASS EXAMPLE */

.block {
    width: 100%;
    height: 10px;
}

@each $member in vishu, effi, ian {
    .company.#{$member} {
        background: url("images/#{$member}.jpg")
    }
}

@for $i from 1 through 3 {
    .block:nth-child(#{$i}) {
        background: darken(white, $i);
    }
}