Skip to main content

CSS

SCSS​

SASS (Syntactically Awesome Stylesheet) is a type of pre-processing language.

2 format:

.scss SCSS (Sassy CSS)

.sass Indented

Dev tools: VSCode, Live Sass Compiler, Live Server

Live Sass Compiler:

A button "Watch Sass" to compile .scss or .css to .css.

In "Watching..." mode will auto compile.

@mixin​

@mixin example_base {
  ...
}

@mixin example_advanced($parameter1, $parameter2) {
  ...
}

@include​

selector1 {
  @include example_base; // Define by @mixin
  ...
}

selector2 {
  @include example_advanced(argument1, argument2); // Define by @mixin
  ...
}

&:

.el-row {
    &.one-child {
        margin-bottom: 0;
    }
    &:last-child {
        margin-bottom: 1;
    }
}

sass syntax, select parent. After compile:

.el-row.one-child { margin-bottom: 0; }
.el-row:last-child { margin-bottom: 1; }