SCSS notation cheat sheet

About this content

This content is posted on the site I run for easier viewing, so please use that as well. [Sass] SCSS Notation Cheat Sheet

What is SCSS notation?

SCSS notation is one of the writing styles of Sass. Sass has SCSS notation and SASS notation, and SCSS notation is often used because it is compatible with CSS. The extension should be ".scss".

What is Sass

Abbreviation for "Syntactically Awesome Style Sheet", a CSS metalanguage made by Ruby designed and developed so that CSS can be written efficiently.

Basic writing

SCSS

div{
  p{
    color: red;
  }
}

Nested structure system

Nested structure

Described in a nested structure (like HTML)

See the Pen Sass_scss_nest by engineerhikaru (@engineerhikaru) on CodePen.

See parent selector

Described by referring to the name of the parent selector

See the Pen Sass_scss_parent-reference by engineerhikaru (@engineerhikaru) on CodePen.

Namespace nesting

Describe what is described in the namespace in CSS (font-family etc.) in a nested structure

See the Pen Sass_scss_namespace-nest by engineerhikaru (@engineerhikaru) on CodePen.

Variable system

variable

Group frequently used values into variables

See the Pen Sass_scss_variable by engineerhikaru (@engineerhikaru) on CodePen.

Array variables

Collect frequently used values with array variables

See the Pen Sass_scss_array-variable by engineerhikaru (@engineerhikaru) on CodePen.

Group variable

Summarize frequently used styles

See the Pen Sass_scss_group-variable by engineerhikaru (@engineerhikaru) on CodePen.

Inheritance system

import

Import the split SCSS file

SCSS

// basic.When reading an SCSS file called scss
@import "basic";

Inheritance

Inherit the style used elsewhere

See the Pen Sass_scss_extend by engineerhikaru (@engineerhikaru) on CodePen.

grammar

Conditional branch

Change the style depending on the conditions

See the Pen Sass_scss_if-else by engineerhikaru (@engineerhikaru) on CodePen.

repetition

Repeat style

See the Pen Sass_scss_for by engineerhikaru (@engineerhikaru) on CodePen.

Iteration (array variable)

Repeat using array variables

See the Pen Sass_scss_foreach by engineerhikaru (@engineerhikaru) on CodePen.

Calculation / color

Four arithmetic operations

Calculate in style

See the Pen Sass_scss_calculation by engineerhikaru (@engineerhikaru) on CodePen.

String concatenation

String concatenation in style

See the Pen Sass_scss_concatenation by engineerhikaru (@engineerhikaru) on CodePen.

Brightness adjustment

Adjust the brightness of the base color

See the Pen Sass_scss_brightness by engineerhikaru (@engineerhikaru) on CodePen.

Saturation adjustment

Adjust base color saturation

See the Pen vYNVVjr by engineerhikaru (@engineerhikaru) on CodePen.

Transparency adjustment

Adjust the transparency of the base color

See the Pen Sass_scss_transparency by engineerhikaru (@engineerhikaru) on CodePen.

Hue adjustment

Adjust the hue of the base color

See the Pen Sass_scss_hue by engineerhikaru (@engineerhikaru) on CodePen.

Complementary colors & inversion of colors

Complementary or invert the base color

See the Pen Sass_scss_inversion by engineerhikaru (@engineerhikaru) on CodePen.

Mix colors

Mix the base colors (2)

See the Pen Sass_scss_color-mix by engineerhikaru (@engineerhikaru) on CodePen.

Other

Comment out

SCSS

//1-line comment
/* 
Multi-line comment(Remains after compilation)
*/

Unquoting

Remove quotes ("") from strings

See the Pen Sass_scss_quote by engineerhikaru (@engineerhikaru) on CodePen.

Uppercase & lowercase

Uppercase or lowercase strings

See the Pen Sass_scss_upper-case by engineerhikaru (@engineerhikaru) on CodePen.

Returns the absolute value

Returns the absolute value of a number

See the Pen Sass_scss_abs by engineerhikaru (@engineerhikaru) on CodePen.

Return round up

Returns a round-up of numbers

See the Pen Sass_scss_ceil by engineerhikaru (@engineerhikaru) on CodePen.

Return truncation

Returns truncation of numbers

See the Pen Sass_scss_floor by engineerhikaru (@engineerhikaru) on CodePen.

Returns rounding

Returns rounding of numbers

See the Pen Sass_scss_round by engineerhikaru (@engineerhikaru) on CodePen.

About this content

This content is posted on the site I run for easier viewing, so please use that as well. [Sass] SCSS Notation Cheat Sheet