Skip to main content

Sass Basic Notes

Sass Basis​

Variable​

Normal Variable​

  • start with $
$heading-color: green;

h1 {
  color: $heading-color;
}

String Variable​

  • #{$var}: combine with string

Nesting Variable​

refer to parent-selector, only use it on:

  • pseudo selectors and pseudo elements
.button {
  &:hover,
  &:focus {
    color: $color-button-hover;
  }

  &::after {
    color: $color-after;
  }
}
  • relationship selectors
.button {
  .sidebar & {
    font-size: 0.9rem;
  }
}

List​

  • length($list).
  • nth($list, $n).
  • set-nth($list, $n, $value).
  • index($list, $value).
  • list-separator($list)
  • append($list, $value, [$separator]).

Map​

  • map-get($map, $key).
  • map-merge($map, $map).
  • map-remove($map, $keys).
  • map-keys($map).
  • map-values($map).
  • map-has-key($map, $key).
$colors: (
  color1: blue,
  color2: red,
  color3: green,
);

@each $key, $color in $colors {
  .#{$color}-text {
    color: $color;
  }
}

arguments list​

@mixin dummy($a, $b, $c) {
  // …
}

// Yep
@include dummy(true, 42, 'kittens');

// Yep but nope
$params: (true, 42, 'kittens');
// stylelint-disable-next-line function-no-unknown
$value: dummy(nth($params, 1), nth($params, 2), nth($params, 3));

// Yep
$params: (true, 42, 'kittens');

@include dummy($params...);

// Yep
$params: (
  'c': 'kittens',
  'a': true,
  'b': 42,
);

@include dummy($params...);

!default flag​

only assign when variables hadn't been assigned

Directive​

Mixin and Include Directive​

@mixin box-shadow($x, $y, $blur, $c) {
  box-shadow: $x, $y, $blur, $c;
  // stylelint-disable-next-line declaration-block-no-duplicate-properties
  box-shadow: $x, $y, $blur, $c;
  // stylelint-disable-next-line declaration-block-no-duplicate-properties
  box-shadow: $x, $y, $blur, $c;
  // stylelint-disable-next-line declaration-block-no-duplicate-properties
  box-shadow: $x, $y, $blur, $c;
}

div {
  @include box-shadow(0, 0, 4px, #fff);
}

If Else Directive​

@mixin border-stroke($val) {
  /* stylelint-disable at-rule-empty-line-before */
  @if $val == light {
    border: 1px solid black;
  } @else if $val == medium {
    border: 3px solid black;
  } @else if $val == heavy {
    border: 6px solid black;
  } @else {
    border: none;
  }
  /* stylelint-enable at-rule-empty-line-before */
}
// Good
@if not index($list, $item) {
  // …
}

// Bad
@if index($list, $item) == null {
  // …
}

for loop​

@for $i from 1 through 12 {
  .col-#{$i} {
    width: 100% / 12 * $i;
  }
}

while loop​

$x: 1;

@while $x < 13 {
  .col-#{$x} {
    width: 100% / 12 * $x;
  }
  $x: $x + 1;
}

each​

@each $color in blue, red, green {
  .#{$color}-text {
    color: $color;
  }
}

import​

// import _variables.scss in main.scss
@import url('variables');

~ to import scss from node_modules

@import url('~bootstrap/scss/bootstrap');

extend​

@extend is basically about moving selectors around:

  • can't extend complex selector
  • can't extend cross media query
  • avoid extending from nested selectors
  • avoid chaining @extend directives
// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

// This CSS will print because %message-shared is extended.
%message-shared {
  padding: 10px;
  color: #333;
  border: 1px solid #ccc;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;

  border-color: green;
}

.error {
  @extend %message-shared;

  border-color: red;
}

.warning {
  @extend %message-shared;

  border-color: yellow;
}
.panel {
  height: 70px;
  background-color: red;
  border: 2px solid green;
}

.big-panel {
  @extend .panel;

  width: 150px;
  font-size: 2em;
}
Media Queries with extend​
%foo {
  content: 'foo';
}
// Wrong
@media print {
  .bar {
    // This doesn't work. Worse: it crashes.
    @extend %foo;
  }
}

// Right
@media print {
  .bar {
    @at-root (without: media) {
      @extend %foo;
    }
  }
}
// Right
%foo {
  content: 'foo';

  &-print {
    @media print {
      content: 'foo print';
    }
  }
}

@media print {
  .bar {
    @extend %foo-print;
  }
}

Built-in Functions​

Official Documentation

Color​

  • mix is better than lighten/darken
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

Math​

  • round($number).
  • ceil($number).
  • floor($number).
  • abs($number).
  • max.
  • min.
$value: 13.37;
$length: $value * 1em;

.whatever {
  padding-top: round($length); // 13em
}

type and unit​

  • unit($length).
  • unitless($length).
  • type-of($var).
  • is-type-of($var, $type).

Error Handle​

  • type-of
  • is-type-of
  • unit
  • unitless
  • @warn/@error

function error handle​

@function add-10($number) {
  @if type-of($number) != 'number' {
    @warn "`#{$number}` is not a number of `add-10`.";

    @return false;
  }

  @return $number + 10;
}

mixin error handle​

@mixin module($name) {
  // Initialize a validity checker boolean
  $everything-okay: true;

  // Check for argument validity
  @if type-of($name) != 'string' {
    @warn '"#{$name}" is not a string for "module".';
    $everything-okay: false;
  }

  // If everything's still okay, dump mixin content
  @if $everything-okay {
    @content;
  }
}

Lists Check​

@if length($value) > 1 and type-of($value) != map {
  // It is a list of multiple values
}

Project Structure​

sass/
|– abstracts/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|   ...                  # Etc…
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   |– _navigation.scss  # Navigation
|   ...                  # Etc…
|
|– layout/
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– themes/
|   |– _theme.scss       # Default theme
|   |– _admin.scss       # Admin theme
|   ...                  # Etc…
|
|– main.scss             # primary Sass file

in main.scss file:

  1. @charset 'utf-8';
  2. import abstracts
  3. import vendors
  4. import base
  5. import layout
  6. import components
  7. import themes (or pages when it's not partial directory)

When working on a very large project with a lot of abstract utilities, it might be interesting to group them by topic rather than type, for instance typography (_typography.scss), theming (_theming.scss), etc. Each file contains all the related helpers: variables, functions, mixins and placeholders.

Best Practice​

Performance​

  • mixin better than extend

Children Selector​

// Good
%button {
  display: inline-block;
  // … button styles

  // Relationship: a %button that is a child of a %modal
  %modal > & {
    display: block;
  }
}

.button {
  @extend %button;
}

// Bad Style
.modal {
  @extend %modal;

  > .button {
    @extend %button;
  }
}

Tools​

Framework​

Sprite Builder​

Grid System​

Media Query​