SASS SCSS Cheatsheet

Setup Node SASS Watch

If your a frontend web developer, then CSS is your bread-and-butter. For a long time, CSS is all us frontend devs had.

CSS is pretty limited. It lacks variables and functions which can be quite useful for styling the frontend of websites, especially useful when it comes to complex custom designs.

Why use SCSS?

1. Trying to code the styles for an intricate custom design with just css will take longer and be more challenging as you will need to write so much repetitive css that your css code base can easily become unorganised and unmaintainable.
2. When using Scss you can utilize the power of functions and variables to create more organised, maintainable and reusable code.

In order to use SASS you need a way to convert it into CSS because browsers can’t read Sass. This is where Node comes into it..

Use Node to compile SCSS to CSS and Watch SASS files for changes

Need a simple way to output CSS from SASS? One simple way is to do the following:
CD into your project directory and install sass

Install Node modules into your project

npm init
npm install sass

The npm init command will create a package.json file, open it and add the scripts to it.

Add scripts to your package.json

Configure SASS Watch with CSS output

Note that the output of these files is relative to the package.json file

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "sass --watch scss/style.scss:assets/custom.css"
  },

Example 2: Output css file into the same directory as your package.json file

Here we use a ‘.’ dot to output into the same folder as a package.json file. Which in my case is usually the theme root.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "sass --watch scss/style.scss:."
  },

Now, it’s execution time. In your project directory run the scss script.

npm run scss

Every time you save the style.scss file it will compile to custom.css the assets folder.

Watching

You need the sass-watch module installed to watch for changes and automatically compile scss to css.

sass --watch sass:css

Comments

// I will not show when compiled
/* I will be shown when compiled */

Imports

@import 'foo';

Variables

$foo: #000 !default;
$bar: baz qux quux corge;

Interpolation

$foo: bar;

.baz-#{$foo} {
// .baz-bar { }
}

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation

Concatenation

$foo: 'serif';

.bar {
$font: 'sans-' + $foo; // 'sans-serif'
}

Mixins

@mixin foo($bar, $baz: false) {
color: $bar;
@if baz {
border-radius: $baz;
}
}

.qux {
@include foo(#000, 10px);
}

Variable arguments

@mixin bar($baz...) {
box-shadow: $baz
}

.qux {
$baz: 0px 4px 5px #666, 2px 6px 10px #999;
@include bar($baz);
}

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#defining_a_mixin

Extend

%foo {
color: #000;
}

.bar {
background: #fff;
}

.baz {
@extend %foo; // color: #000
@extend %qux !optional; // fail silenty if not found
@extend .bar; // background: #fff
}

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

Control directives

if, if else, else

$foo: bar;

.qux {
@if $foo == bar {
color: #000;
} @else if $foo == baz {
color: #fff;
} @else {
color: #999;
}
}

.qux {
color: if($foo == bar, #000, #999); // if([condition], [if true], [else])
}

$foo: "foo";
$bar: "bar";
$qux: "qux";

@if ($foo == "foo" and not ($bar == "bar")) or ($qux == "qux") {
// second condition is true
}

each

$foo: bar baz qux;

@each $f in $foo {
.quux-#{$f} {
background: url(quux-#{$f}.png); // .quux-bar { background: url(quux-bar.png) }
}
}

for

.qux {
@for $i from 1 through 5 {
&.qux-#{$i} {
// .qux.qux-1 { }
}
}
}

while

$i: 1;

.qux {
@while $i <= 5 {
&.qux-#{$i} {
// .qux.qux-1 { }
}

		$i: $i + 1;
	}
}

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#control_directives

Function directives

@function foo($bar, $baz) {
@return ($bar / $baz);
}

.qux {
width: foo(10px, 2px); // 5px
}

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#functions

List functions

$foo: bar baz qux quux;
$grault: garphly, waldo, fred, plugh;

length($foo); // 4 (index starts at 1)
append($foo, corge); // bar baz qux quux corge (does not alter original)
join($foo, $grault); // bar baz qux quux garphly, waldo, fred, plugh
index($foo, baz); // 2
nth($foo, 2); // baz
zip($foo, $grault); // [bar garphly] [baz waldo] [qux fred] [quux plugh]

zip() example

```css
$users: foo bar;
$colors: blue green;
$style: zip($names, $colors); // [foo blue] [bar green]
@each $u in $style {
.users-#{nth($u, 1)} {      // .users-foo { }
background: nth($u, 2);   // background: blue;
}
}

Color functions

$foo: #ff0000;

rgba($foo, 0.8); // rgba(0, 255, 0, 0.8)
lighten($foo, 20%); // #66ff66
darken($foo, 20%); // #009900
saturate($foo, 20%); // lime
desaturate($foo, 20%); // #19e619
mix(#ff0000, #0000ff); // #7f007f
mix(#ffff00, #0000ff, 20%); // #3300cc (3rd parameter is percentage of first color)
grayscale($foo); // grey
invert($foo); // magenta
complement($foo); // magenta
scale_color($foo, $lightness: 20%); // #33ff33
scale_color($foo, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]); // changes color aspect(s) relative, rather than linearly, to the start value

source

Number functions

$foo: 1.4;
$bar: 1.3 4.5 -2.8;

round($foo;) // 1
ceil($foo); // 2
floor($foo); // 1
abs($foo); // 1.4
percentage($foo) // 140%
min($bar...) // -2.8
max($bar...) // 4.5

http://sass-lang.com/documentation/Sass/Script/Functions.html#number_functions

Media queries

.foo {
@media (min-width: 768px) {
// @media (min-width: 768px) { .foo { } }
}
}

Using a mixin

@mixin respond-to($media) {
@if $media == desktop {
@media (min-width: 960px) {
@content;
}
} @else if $media == tablet {
@media (min-width: 768px) {
@content;
}
}
}

.foo {
@inclue respond-to(tablet) {
// @media (min-width: 768px) { .foo { } }
}
}

SCSS maps

Sass maps are useful because they intice you to keep your colors and sizes organised. It’s more readable to scan through all the items listed in sass map. It can also be easier to remember values of a sass map.

And example of sass map usage.

Creating sass maps

$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745,
);

Implementing sass maps

$primaryColor: map-get($colors, primary);

Add to map

// Create your own map
$custom-colors: (
  "custom-color": #900
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $custom-colors);

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#media