CSS SASS Fundamentals

Cascading Style Sheets gets an additional layer of flexibility, reusability, and power via the late compiled SASS notation, supported by NodeJS and Microsoft IIS web environments, to make modern rich clients for both web browsers and desktops

Comments

/* Block Comments*/
// Single Line Comments

Extend

.button {
    ...
}

.push-button {
    @extend .button
}

Variables

$red: #833

body {
    color: $red;
}

Nesting

.markdown-body { a { color: blue; &:hover { color: red; } } }

Property Nesting

text: {
    align: center;
    transform: uppercase;
}

Mixins

@mixin heading-font {
    font-family: sans-serif;
    font-weight: bold;
}

h1 {
    @include heading-font;
}

Mixin Properties

@mixin font-size($n) {
    font-size: $n * 1.2em;    
}

body {
    @include font-size(2);
}

Mixin Default Values

@mixin pad($n: 10px) {
    padding: $n;
}

body {
    @include pad(15px);
}

Mixin Default Variables

$default-padding: 10px;

@mixin pad($n: $default-padding) { padding: $n; }

body { @include pad(15px); }

Compose

@import './external_file.sass';

Color

rgba

a {
    color : rgb(100,120,140);
}

div {
    color : rgba(100,120,140,0.5);
}

$grey = rgb(100,120,140);

span {
    color: ($grey, 0.5);
}

Mixing color

$a = rgb(100,120,140);
$b = rgb(140,70,100);

$c = mix($a, $b, 10%);

Modify color

$color = rgb(50,70,90);

//HSLA
hue($color);        // 0deg to 360deg
saturation($color); // 0% to 100%
lightness($color);  // 0% to 100%
alpha($color);      // 0..1 (opacity)

red($color);        // 0 to 255
green($color);      // 0 to 255
blue($color);       // 0 to 255

// Adjust Hue
adjust-hue($color, 15deg);
complement($color);
invert($color);

// Adjust Saturation
saturate($color, 5%);
desaturate($color, 5%);
grayscale($color);

// Adjust Lightness
darken($color, 5%);
lighten($color, 5%);

// Adjust Alpha
fade-in($color, 0.5); // Increases opacity, decreases transparency
fade-out($color, 0.5); // Decreases opacity, increases transparency

// Adjust Colors
adjust-color($color, $blue: 5);

Utility functions

Math

floor(4.2);      // 4
ceiling(4.2);    // 5
round(4.2);      // 4
abs(4.2);        // 4.2
min(1,2,3);      // 1
max(1,2,3);      // 3
percentage(0.4); // 40%   
random(4);       // 0..4

Misc

// Existance
variable-exists(red);     // $red
mixing-exists(red-text);  // @mixin red-text
function-exists(redify);  // redify()
global-variable-exists(red); // $red

// Selectors
selector-append('.menu','li','a')   // .menu li a
selector-nest('.menu','&:hover li') // .menu:hover li
selector-extend(...)
selector-parse(...)
selector-replace(...)
selector-unify(...)

Conditional logic

// If then else
@if $position == 'left' {
   position: absolute;
   left: 0;
}
@else if $position == 'right' {
   position: absolute;
   right: 0;
}
@else {
   position: static;
}

// For value
@for $i from 1 through 5 {
    .item-#{$i} { left: 20px * $i; }
}

// For each
$menu-items: home about services contact;

@each $item in $menu-items {
    .photo-#{$item} {
        background: url('images/#{item}.jpg');
    }
}

// For each with Two parameters per item
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}

// While loop
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}