Sass Basics

How does it work?

Installation

npm install node-sass
npm install fs-extra

Installation

//build.js
var sass = require('node-sass');
var fs = require('fs-extra');

let sassConfig = {
    file: 'styles/main.scss'
};

let result = sass.renderSync(sassConfig);
fs.writeFileSync('styles/app.css', result.css);

Run build

node build.js

Features

Variables

$main-color: #bada55;

.button {
    background-color: $main-color;
    ...
}

.textbox {
    background-color: $main-color;
}

Features

Nesting

.profile {
    .picture {
        ...
    }

    .name {
        ...
    }
}
------------
.profile .picture {...}

.profile .name {...}

Features

Import

//_variables.scss

$main-color: $bada55
------------
//main.scss
@import '_variables';

html {
    background-color: $main-color;
}

Features

Mixins

@mixin truncate($truncation-boundary) {
    max-width: $truncation-boundary;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.input-box {
    background-color: red;
    @include truncate(300px);
}

Features

Extensions

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

Features

Operators

.button-small{
    width: $button/3 * 2px;
    padding: $button-padding/4 + 5px;
}

Features

@each

$list: adam john wynn mason kuroir;

@each $author in $list {
    .photo-#{$author} {
        background-image: url("avatars/#{$author}.png");
    }
}

Combine it with native features

Cool native features

calc()

.button {
    width: calc(100% - 20px);
}

Cool native features

html {
    --main-color: #bada55;
}

.button {
    background-color: var(--main-color);
    ...
}

.textbox {
    background-color: var(--main-color);
}

Native variables

Cool native features

let html = document.querySelector('html');

html.style.setProperty('--color', 'green');

Native variables  + JS

Cool native features

Native variables  + JS

All you need to know