SCSS

SCSS means Sassy CSS

Variables

This component was made by Stratis Dermanoutsos. The code can be found here.

Nesting

  • CSS

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • SCSS

    This component was made by Stratis Dermanoutsos. The code can be found here.

or for pseudo classes and pseudo elements

  • CSS

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • SCSS

    This component was made by Stratis Dermanoutsos. The code can be found here.

Mixins

  • CSS

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • SCSS

    This component was made by Stratis Dermanoutsos. The code can be found here.

They can also take arguments

This component was made by Stratis Dermanoutsos. The code can be found here.

if-else statements

This component was made by Stratis Dermanoutsos. The code can be found here.

foreach loops

This component was made by Stratis Dermanoutsos. The code can be found here.

functions

This component was made by Stratis Dermanoutsos. The code can be found here.

Extras

  • Color adjustments

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Inline SVG color through variable

    This component was made by Stratis Dermanoutsos. The code can be found here.

    Why this is useful? Cause sometimes SVGs will be needed inside your SCSS and this is the easiest and most efficient way to change their color. Notice the use of function. Mozilla does not support HEX values so we convert the value to RGB.

  • Convert px to em values

    This component was made by Stratis Dermanoutsos. The code can be found here.

Resources