Rupali

Front-end developer || Build reusable code for future use || Ensure the technical feasibility of UI/UX designs

SASS

Introduction:

SCSS (Sassy CSS) which is the most commonly used syntax for CSS was derived from SASS (Syntactically Awesome Style Sheets). SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser. SCSS is like CSS with better formatting.SCSS is like CSS with better formatting.

SCSS is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss

Being an extension of CSS3, in SCSS, we can add nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Advantages of using SCSS?

  • SCSS is more expressive:

We can compress several lines of code in SASS syntax into a much less number of lines of SCSS. In SCSS, the standard lines can also be compressed when I’m doing something complicated and can be expanded again for reference.

  • It encourages proper nesting of rules:

If you use the comma operator at a high level, it increases the file size of the final CSS. This can result in making the code really hard to perform overriding of rules.

  • SCSS allows the user to write better inline documentation:

SASS is flexible with comments, but any good developer will prefer inline documentation which is available in SCSS. Inline documentation makes the lines of code self explanatory.

  • Integrating existing CSS tools and CSS codebase is much easier:

Syntax highlighting is a widely used CSS tool and is supported in SCSS. SCSS allows you to use the existing code, and help improve its internal structure without altering the external behavior of the code.

Additionally, Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff. It allows you to declare and define variables, which finally helps us to normalize the code and reduce the redundancy. For example,

  • Instead of repeating #ff0000 many times in your CSS file, in SCSS, we can just set $red: #ff0000 once and use it as many times as we want.
  • SCSS also supports the use of custom functions which accept parameters and are used to prevent unused repetitions.These functions are known as mixins.
  • We can also inherit the properties of one selector into another selector by making use of extensions.
  • SCSS allows us to do math using operators. We can perform simple calculations inside our code for better output.

           Let’s see all the features of sass in more detail:

  1. Sass Variables:

Variables are a way to store information that you can re-use later.With Sass, you can store information in variables, like:

  • strings
  • numbers
  • colors
  • booleans
  • lists
  • nulls

Sass uses the $ symbol, followed by a name, to declare variables:

Sass Variable Scope:

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

Look at the following example:

SCSS Syntax:

So, the CSS output will be:

  1. Sass Nested Rules and Properties:

Sass Nested Rules

Sass lets you nest CSS selectors in the same way as HTML.

Look at an example of some Sass code for a site’s navigation:

Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector.

While in CSS, the rules are defined one by one (not nested):

  1. Sass @import and Partials:

Sass keeps the CSS code DRY (Don’t Repeat Yourself). One way to write DRY code is to keep related code in separate files.

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. 

Sass Importing Files

Just like CSS, Sass also supports the @import directive.

The @import directive allows you to include the content of one file in another.

The CSS @import directive has a major drawback due to performance issues; it creates an extra HTTP request each time you call it. However, the Sass @import directive includes the file in the CSS; so no extra HTTP call is required at runtime!

Sass Import Syntax:

@import filename;

Example:

@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.

Sass has a mechanism for this: If you start the filename with an underscore, Sass will not transpile it. Files named this way are called partials in Sass.

So, a partial Sass file is named with a leading underscore:

Sass Partial Syntax:

  _filename;

  1. Sass @mixin and @include:

Sass Mixins:

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

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


A mixin is defined with the @mixin directive.

Sass @mixin Syntax:

@mixin name {

  property: value;

  property: value;

  …

}

Using a Mixin:

The @include directive is used to include a mixin.

selector {

  @include mixin-name;

}

 

 

Share