ADVANCED

Sass basics in short

  • Syntatically Awesome stylesheets
  • Extension language that compiles into plain CSS
  • Sass is for developers, CSS for browsers
  • Install it with an application, using the command line or clone it of gitHub

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;
}
/* SCSS */
.element {
  &hover {
    color: blue;
  }
}
 
/* CSS */
.elementhover {
  color: blue;
}
/* SCSS */
.element {
  & .hover {
    color: blue;
  }
}
 
/* CSS */
.element .hover {
  color: blue;
}
/* SCSS */
.element {
  &-hover {
    color: blue;
  }
}
 
/* CSS */
.element-hover {
  color: blue;
}
/* SCSS */
.element {
  &.hover {
    color: blue;
  }
}
 
/* CSS */
.element.hover {
  color: blue;
}
/* SCSS */
.element {
  &:hover & {
    color: blue;
  }
}
 
/* CSS */
.element:hover .element {
  color: blue;
}
/* 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;
}
/* CSS OUTPUT */

.block1 {
    border-radius: 2px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px; 
}

    .box a {
        color: green; 
    }

.block2 {
    border-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background: #00f; 
}
  
    .button a {
        color: red; 
    }

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;
}
/* CSS OUTPUT */

.menu, .nav {
    height: 14px;
    font-size: 10px; 
}

    .menu > div, .nav > div {
        float: left;
        clear: none; 
    }

.menu {
    background: #333; 
}

Sass libraries

  • Help you to build your project faster & cleaner
  • If you use a library, stick to its conventions
  • UI frameworks:
    • Bootstrap
    • Foundation CSS
  • Focussed on tools to write better Sass:
    • Bourbon
    • Compass

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
}
.element {
  padding: function-name(20px, 15px);
}

Create a function

.element  {
  padding: 35px;
}

Output in CSS

Add function to element & add values

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;
	}
    }
}
/* CSS OUTPUT */

.container .left {
    background: #000;
    color: #fff;
    margin: 5px;
    float: left;
    width: 100px; 
}

.container .left a {
    display: block;
    color: #fff; 
}

@media (max-width: 480px) {
    .container .left {
        width: 95%; 
    }
    .container .left a {
        display: inline;
        color: #333;
    } 
}

.container .content {
    margin: 5px;
    background: #eee;
    display: inline-block;
    width: 60%; 
}

@media (max-width: 480px) {
    .container .content {
        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);
/* CSS OUTPUT */


div {
    padding: 15px;
}

div .heading {
    content: "Dis man"; 
}

.blue.color {
    color: blue;
    background-image: url("images/blue.jpg"); 
}

.red.color {
    color: red;
    background-image: url("images/red.jpg");
    border: 5px solid 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);
    }
}
/* CSS OUTPUT */

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

.company.vishu {
    background: url("images/vishu.jpg"); 
}

.company.effi {
    background: url("images/effi.jpg"); 
}

.company.ian {
    background: url("images/ian.jpg"); 
}

.box:nth-child(1) {
    background: #fcfcfc; 
}

.box:nth-child(2) {
    background: #fafafa; 
}

.box:nth-child(3) {
    background: #f7f7f7; 
}

Mixin, variables, interpolation

and @each loop

/* SASS EXAMPLE */

@mixin block($size: 15px, $color: red, $display: block) {
    width: $size;
    height: $size;
    background: $color;
    display: $display;
}

.block {
    @include block($display: inline);
}


@mixin company($department, $members...) {
    @each $member in $members {
        .#{$department}.#{$member} {
            background: url("images/#{$department}/#{$member}.jpg")
        }
    }
}

@include company(development, maria, victoria, geordy);
@include company(systems, daniel);
/* CSS OUTPUT */

.block {
    width: 15px;
    height: 15px;
    background: red;
    display: inline; 
}

.development.maria {
    background: url("images/development/maria.jpg"); 
}

.development.victoria {
    background: url("images/development/victoria.jpg"); 
}

.development.geordy {
    background: url("images/development/geordy.jpg"); 
}

.systems.daniel{
    background: url("images/systems/daniel.jpg"); 
}

Any questions?

Made with Slides.com