×
Sass Part 1 – An introduction, Sass variables and Nesting rules and properties in Sass


Sass Part 1 – An introduction, Sass variables and Nesting rules and properties in Sass

December 15, 2019

Hey, folks! Welcome to the  Sass series. The aim of this series is to give a general idea of what Sass is, why it is beneficial and what are the key properties of Sass which makes it beneficial. Becoming an expert is in Sass can be achieved through rigorous practice and hands-on experience in real projects. This series will give you guys a platform to start with.

WHAT YOU WILL LEARN

  • Sass is a CSS preprocessor
  • Sass has two syntaxes
  • Sass syntax allows variables, mixins, nesting rules and properties, function
  • Variables declared using $ , 7 data types are supported,and scope of variable.
  • Interpolation for selector or property names using {}
  • Parent selector using and nesting

 

 

Sass or syntactically awesome stylesheet

Sass is a CSS preprocessor that will generate CSS files for your project.

“A CSS preprocessor is a program that will generate CSS  from a syntax supported by it.”

Sass generates CSS files from .sass or .scss files that have their own syntax. Sass allows using features like variables,functions, mixins, etc that CSS files do not allow(CSS now supports variables but the usage is a bit different and browser support is limited).

 

SASS is originally written in Ruby. A c/c++ port called libSass is available now. The node-sass library binds Node.js to the libSass so that Node.JS based projects can use the preprocessor. Other major preprocessors are LESS, stylus, postCSS, etc.

Sass makes writing CSS files easy, efficient and faster.

 

 

Sass syntaxes – SCSS and SASS syntax

Sass can be written using two syntaxes, SASS and SCSS.

SASS syntax uses indentation and newline whereas SCSS(Sassy CSS) uses braces to identify code blocks and semicolons to identify the end of a line. SCSS is similar to CSS and it is the most used syntax. So we will be following SCSS syntax.

Now we will see how the variables, functions, mixins, nesting rules, etc can be used in sass file to generate CSS.

 

Variables in SCSS

Variables in SCSS are declared using a $ symbol. The variable can be text, number, null, boolean, list of values or map.

The way in which the ID names are given is called interpolation. Interpolation is used to provide variable names to selectors and properties.

The generated CSS will look like this

TRY IT OUT

Just like in language like JavaScript,Sass variables also have scope.

If declared outside any selector in root,the variable will be available to all selectors. If declared inside a specific selector, the scope of variable will be limited to the selector and it’s children.

There are 7 data types supported by SASS,

Numbers – SCSS supports numbers as variable values.number can or cannot have units along with them.

TRY IT OUT

 

 

String – SCSS supports strings as variable values.

TRY IT OUT

 

 

Colors – SCSS accepts all color extensions like RGB, HEX.

TRY IT OUT

 

 

Lists  – Lists are separated by commas or spaces

TRY IT OUT

 

Map – Maps are key-value pairs of the following form.

We can get value belonging to an individual key using map-get.

TRY IT OUT

Read more on other map methods here

Sass supports true and false as boolean values and they also support null value

 

 

Nesting

Nested rules in CSS can be achieved easily by using SCSS syntax. & is the character used in SASS to refer the outer selector in nested selectors. In the below example to give a different background to a nested element is used to refer to the parent selector.

TRY IT OUT

see more about parent selectors in nested selectors here

https://sass-lang.com/documentation/style-rules/parent-selector

 

Now to achieve the below CSS,

the SCSS  will be like this.

This will generate the above CSS.

TRY IT OUT

 

Now consider the following CSS in which the -sub will represent the inner selectors.

The SCSS to generate the CSS will look like this

TRY IT OUT

 

 

 

Nested PropertiesSome properties in CSS are nested.For example font-related properties.Font style properties includes font-weight,font-family,font-style,font-color. With SASS they can be written in the following say so that the generated CSS will have these properties.

The SCSS syntax to generate the above CSS will be like the following.

TRY IT OUT

We will learn more about the SCSS syntax in upcoming parts of this series. https://www.sassmeister.com/ is a place where you can write SCSS and see its results in CSS.

 

Note: Code snippets given here are just examples to show how the  Sass features work.

 

 

WHAT YOU HAVE LEARNED

  • Sass is a CSS preprocessor that will generate CSS.
  • Sass has two syntaxes SCSS and SASS in which SCSS is the most used
  • Sass syntax allows variables, mixins, nesting rules, function
  • Variables declared using $ and 7 data types are supported
  • Interpolation for selector or property names using {}
  • Parent selector using and nesting

The next part of this series will cover in detail about Sass @rules and directives.

No Comments

Leave a Reply

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