Learn SASS for CSS — A Complete Guide to CSS Preprocessor

What is CSS Preprocessor?

What is SASS?

How to use SASS? How does it work?

npm install -g sass
  • SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax
  • Indented (simply called ‘Sass’): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it’s quicker to write.

What are the features of SASS?

$myColor: #000;$fontSize: 20px;.class {  color: $myColor;  font-size: $fontSize;
}
sass index.scss build/stylesheets/index.css
$color: red;header {  $color: green;  color: $color; // output -> green}p {  color: $color; // output -> red}
nav {  h1 { … }  li { … }}
@import ‘variables’;
@mixin important-text($fontsize) {  color: #fff;  font-size: $fontsize;}.demo_text {  @include important-text(15px);}
  • The @extend directive lets you share a set of CSS properties from one selector to another.
  • It is useful if you have almost identically styled elements that only differ in some details.
  • abs(num)
  • ceil(num)
  • floor(num)
  • max(num1, num2)
  • round(num)
  • random(num) // between 1 & num
  • length(list)
  • rgb(255, 255, 255) // range -> 0 to 255
  • rgba(255, 255, 255, 0) // alpha range -> 0 to 1

Why SASS over CSS?

--

--

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
Siddharth Rastogi

Siddharth Rastogi

I am a full stack developer, I have an expertise in Web Development. I write tech stuff and share my knowledge with others with the help of articles.