Sass: CSS with SuperPower

Photo by Nick Karvounis on Unsplash

In Programming, nowadays every language comes with its framework which allows writing less code and more stuff with great efficiency and flexibility. Like JavaScript has Angular, React, and Vue like frameworks which further convert into JavaScript in order to run.

For CSS there is also multiple Framework or Plugins which supports functional programming and stuff, frameworks like Less, Styles

So, Sass is a Syntactically Awesome Stylesheet which is a CSS Preprocessor or Extension which allows you to go beyond the natural capabilities of CSS, with Sass we can write more conditional, functional styling like programming language

So as Browser only understands CSS file, it later compiled to regular CSS files with Sass Compiler

For Sass Files, we will use extension .scss

Sass Compiler

To Compile the Sass into regular CSS, we have to way which watch our changes and converts scss file into CSS

  • node-sass: Node-sass is an npm package that installs globally in your system and converts the sass file to CSS file into desired location.

Official Package Link: Click Here

  • Live Sass Compiler: If you are using VSCode, then there is an extension that compiles your Sass into CSS files on the go

→ For Live Sass Compiler, to define the desired directory, need to add configuration in settings.json of vs code.

Live Sass compiler Config

Official Link: Click Here

Features of Sass

Variables in CSS

With Sass, we can write variables in Sass

  • Prefixed with “$”: Every variable in sass is prefixed with $ sign which can use globally in the stylesheet.
  • The variables are easier to write instead of writing custom CSS properties again and again.

Nesting:

Nesting is a highlighted feature of sass that allows writing children of HTML selector we can write in on selector and it gets automatically creates multiple children selectors in CSS.

Modules

Modules allow splitting into separate files through which we can write sass for particular components. Unlike CSS there are no multiple files that are getting load, moreover, it adds multiple sass files into one file during compilation to CSS.

Mixins & Functions

Allows creating block of CSS like programing language function where we can write a function which further compiles into basic CSS.

  • Mixins didn’t return something like the function it just renders the property based on the code written inside the mixin.
  • While using mixin we need “@include” in prefix to call the mixin.
  • We can provide parameters to the mixins, which passes like variables with $ prefix.

Inheritance

It’s another cool feature that allows to use or inherit a class and can share the same code.

  • Use @extend to inherit the pre-defined class

Conditionals

Conditionals like in programming language we can add the if-else block and write more precise CSS. It works within mixins.

  • We can write Variables in a string using #{$variable};
  • @if, @else if, and @else supported.

Thanks for Reading My Blog on Sass: A CSS Preprocessor, Visit My Website for More Stuff https://iparagsaxena.in

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Parag Saxena

Parag Saxena

Working as Fronted Dev, Writing Blogs on Technologies i found fascinating. Also, fond of playing around with API’s & UI/UX Design.