/sass-basic-lecture

Primary LanguageHTML

SASS Basics

Objectives

  • What is SASS? What does it give that out of the box CSS doesn't?
  • .sass vs .scss, what are the main differences?
  • How to complie SASS files to plain CSS
  • Key SASS functionality & fundamentals
    • Nested Selectors
    • Variables
    • Mixins
    • Extends***
    • Other Functions & functionality
  • How to structure SASS files***

Examples of SCSS and Sass

SCSS Section Design

SASS CSS Cassette Art

Installing Sass Locally & Command Line Compilation

Install Sass

sass --watch style.css

VSCode Plugin for SASS compilation

Sass

Live Sass Compiler

Codepen also for following along

CodePen link

Nested Selectors

/* SASS file */
nav.navigation{
    width: 100%
    ul{
        list-style: none;
        li{
            bakground: #ccc;
        }
    }
}
======
/* Complied CSS file */
nav.navigation{
    width: 100%;
}
nav.navigation ul{
    list-style: none;
}
nav.navigation ul li{
    background: #ccc;
}

Variables

$white: #FAF6F6;
$main-color: #FEC3A6;

.section{
    background: $white;
    color: $main-color;
}

Mixins

/* SASS file */
@mixin flexbox-base($direction, $align-i, $justify-c){
    display: flex;
    flex-direction: $direction;
    align-content: $align-i;
    justify-content: $justify-c;
}

.selector {
    @include flexbox-base(column, center, center)
}
=====================
/* Compiled CSS file*/
.selector{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

Extends

/* SASS file */

%light-border{
  border-radius: 6px;
  border: 1px solid #ccc;
}

.selector {
    @extend %light-borders;
}

Other Functions

  • lighten(color, percentage)
  • darken(color, percentage)
  • transparentize(color, alpha-amount)
  • rgba(color, alpha-amount)

Resources