Sass CheatSheet

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself.

---

Sass stands for Syntactically Awesome Stylesheet

Sass is an extension to CSS

Sass is a CSS pre-processor

Sass is completely compatible with all versions of CSS

Sass reduces repetition of CSS and therefore saves time

Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006

Sass is free to download and use

• Reduces the time to create and maintain CSS.
• Sass allows us to have a modular organization of styles, which is vital for large projects.
• It provides advanced structures typical of programming languages, such as variables, lists, functions, and control structures.
• Sass allows to generate different types of output, compressed, normal or minimized, working both in development and in production, it is also effortless.
• It allows us to watch the files in such a way that, if there has been a change in the style sheet, it is automatically regenerated (watch mode).
• It has very few dependencies, especially the new version, which is dart-sass. In previous versions, it relied on many Ruby libraries and was a bit cumbersome to install, but with the new version, installation is easy.
• There are many associated tools, many libraries made with Sass, and a critical community of users.

• You have to learn to use a new tool, which, for some, is a disadvantage.
• There is a consumption time in the CSS generation or compilation process, especially if the SCSS file is enormous. It is not a long time, but there is a slight delay.
• It has a more complex syntax than CSS.

Sass Syntax This syntax is a little different from the standard CSS syntax. It doesnt differ much. For example, it prevents you from putting semicolons at the end of property values. Also, the keys are not used and instead are made indented.

SCSS Syntax It is a syntax quite similar to the syntax of CSS itself. The CSS code is a valid SCSS code. We could say that SCSS is a CSS code with some extra things. In practice, although writing with Sass syntax might be faster, it is less recommended, because it takes you further away from the CSS language itself. Not only does it force you to learn more, but your code will be less like standard CSS, and therefore it is normal for you as a developer to feel less at home using Sass syntax. On the other hand, when you use SCSS, you have the advantage that your lifelong CSS code will be valid for the preprocessor, being able to reuse more your knowledge and possible style codes that you have been working with on projects.

$defaultColor: #e40000;
$defaultBackgroundColor: green;

a {
  color: $defaultColor;
  background-color: $defaultBackgroundColor;
}

$wk: -webkit-;

.rounded-box {
  #{$wk}border-radius: 4px;
}

/*
 Block comments
*/


// Line comments

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


h1 {
    @include heading-font;
}

.markdown-body {
    a {
      color: rgb(57, 57, 75);
      &:hover {
        color: rgb(255, 0, 0);
      }
    }
}

To Properties

text: {
    align: center;          // like text-align: center
    transform: uppercase;   // like text-transform: uppercase
}

.button {
    
}

.push-button {
    @extend .button;
}

@import './other_sass_file';
@import '/code', 'lists';


// Plain CSS @imports
@import "yourcssfile.css";
@import url(yourcssfile);

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


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

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


body {
    @include pad(15px);
}

$default-padding: 10px;


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


body {
    @include pad(15px);
}

rgb(100, 120, 140)

rgba(100, 120, 140, .5)

rgba($color, .5)

mix($a, $b, 10%)   
// Result: 10% a, 90% b

darken($color, 5%)
lighten($color, 5%)


saturate($color, 5%)
desaturate($color, 5%)
grayscale($color)


adjust-hue($color, 15deg)
complement($color)    // like adjust-hue(_, 180deg)
invert($color)


fade-in($color, .5)   // aka opacify()
fade-out($color, .5)  // aka transparentize()
rgba($color, .5)      // sets alpha to .5

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


// RGB
red($color)         // 0..255
green($color)
blue($color)

// Changes by fixed amounts
adjust-color($color, $blue: 5)
adjust-color($color, $lightness: -30%) // darken(_, 30%)
adjust-color($color, $alpha: -0.4)     // fade-out(_, .4)
adjust-color($color, $hue: 30deg)      // adjust-hue(_, 15deg)


// Changes via percentage
scale-color($color, $lightness: 50%)


// Changes one property completely
change-color($color, $hue: 180deg)
change-color($color, $blue: 250)

unquote('hello')
quote(hello)


to-upper-case(hello)
to-lower-case(hello)


str-length(hello world)
str-slice(hello, 2, 5)     // "ello" - it's 1-based, not 0-based
str-insert("abcd", "X", 1) // "Xabcd"

unit(3em)        // 'em'

unitless(100px)  // false

floor(3.5)
ceil(3.5)
round(3.5)
abs(3.5)


min(1, 2, 3)
max(1, 2, 3)


percentage(.5)   // 50%
random(3)        // 0..3

variable-exists(red)    // checks for $red
mixin-exists(red-text)  // checks for @mixin red-text
function-exists(redify)


global-variable-exists(red)


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

feature-exists(global-variable-shadowing)

• global-variable-shadowing
• extend-selector-pseudoclass
• units-level-3
• at-error

@for $i from 1 through 4 {
    .item-#{$i} { left: 20px * $i; }
}

$menu-items: home about contact;


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

$backgrounds: (home, 'home.jpg'),
              (about, 'about.jpg');


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

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

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

.#{$klass} { ... }      // Class
call($function-name)    // Functions


@media #{$tablet}
font: #{$size}/#{$line-height}
url("#{$background}.jpg")

$list: (a b c);


nth($list, 1)  // starts with 1
length($list)


@each $item in $list { ... }

$map: (key1: value1, key2: value2, key3: value3);


map-get($map, key1)