SCSS – all you need to know

SASS (SCSS) – is a CSS preprocessor that helps to reduce the CSS code and its repetition. Thus SCSS saves time of frontend developer.

What you need to know at first:

  1. Really, Sass stands for Syntactically Awesome Stylesheet. It’s completely compatible with all versions of CSS.
  2. Sass is free to download and use. But a browser does not understand SCSS code. So you need a transpiler.
  3. Sass keeps the CSS code DRY (Don’t Repeat Yourself)
  4. Sass files have the “.scss” file extension.
  5. SASS lets you use features that do not exist in CSS, like
  • variables,
  • nested rules,
  • mixins,
  • imports,
  • inheritance,
  • built-in functions.

SASS example

When using Sass, and the primary color changes, you only need to change it in one place.

/* define variables for the primary colors */ $primary_1: #a2b9bc; /* use the variables */ .main-header { background-color: $primary_1; }

SASS variables

$variablenamevalue;

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
} 

CSS Output:

body { font-family: Helvetica, sans-serif; font-size: 18px; color: red; } #container { width: 680px; }

Sass variables are only available at the level of nesting where they are defined.

$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

<P> will be red, while <h1> will be green.

But !global has more priority and indicates that a variable is global, which means that it is accessible on all levels. So if $myColor: green !global both <p> and <h1> will be green.

SAAS nesting

Because you can nest properties in Sass, it is cleaner and easier to read than standard CSS.

nav {
  ul {}
  li {}
  a {}
}

instead of the following in CSS:

nav ul {}
nav li {}
nav a {}

You can also write properties that have the same prefix, like font-family, font-size and font-weight or text-align, text-transform and text-overflow as nested properties:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

SASS @import

You can create small files with CSS snippets to include in other Sass files. Examples of such files can be: reset file, variables, colors, fonts, font-sizes, etc. 

@import "variables";
@import "colors";
@import "reset";

SASS Partials

By default, Sass transpiles all the .scss files directly. However, when you want to import a file, you do not need the file to be transpiled directly. So write underscore before scss name. For example, _colors.scss To transpile it into main css file, write @import “colors” without underscore.

Sass @mixin and @include

The @mixin directive lets you create CSS code that is to be reused throughout the website.

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

A tip on hyphens and underscore in Sass: Hyphens and underscores are considered to be the same. This means that @mixin important-text { } and @mixin important_text { } are considered as the same mixin!

The @include directive is created to let you use (include) the mixin.

.danger {
  @include important-text;
  background-color: green;
}

A mixin can also include other mixins and they accept variables.

It’s easy to use @mixin for webkit properties like this:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.myBox {
  @include transform(rotate(20deg));
}

SASS @extend

The @extend directive lets you share a set of CSS properties from one selector to another.

The @extend directive is useful if you have almost identically styled elements that only differ in some small details.

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

By using the @extend directive, you do not need to specify several classes for an element in your HTML code, like this: <button class=”button-basic button-report”>Report this</button>. You just need to specify .button-report to get both sets of styles.

(Visited 59 times, 1 visits today)

Leave a comment

Your email address will not be published. Required fields are marked *