Sass is a CSS pre-processor.

1. What are Sass and Scss?

  • Sass stands for Syntactically Awesome Stylesheet
  • Sass is an extension to CSS
  • Sass is a CSS pre-processor
  • Sass is completely compatible with all versions of CSS
  • Sass reduces repetition of CSS and therefore saves time
  • Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
  • Sass is free to download and use
  • In css3, sass called scss.

2. How does sass works?

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling. So, you need to give a transpiler some Sass code and then get some CSS code back.

3. Sass variable

Variables are a way to store information that you can re-use later.

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}

#container {
width: $myWidth;
}

4. Sass nesting

SCSS allows us to nest CSS selectors in a similar manner. Nesting is a shortcut to creating CSS rules. So instead of writing so many lines of CSS just to be specific on the style we want to apply to an element, we simply nest it.

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

5.Sass mixin

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

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes. A mixin’s name can be any Sass identifier, and it can contain any statement other than top-level statements.

@mixin name {
property: value;
property: value;

}

And the way of calling your mixin.

selector {
@include mixin-name;
}

--

--

--

Front-end web developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Welcome To The World Of Linux! Part 2

The Infiniverse Land System

Eth 2.0 Dev Update #44 — “More Optimizations”

Creating VHD Azure blob SAS URL from Azure Managed Image

NLP with Python: Biden vs Trump Inauguration Speech Top 20 Words

Someone Was Asking About Devops …

Building a Social Media Site With Python and Django: Part 11 Adding Comment Replies

Agile: On The Ground !!

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
Mohiuddin Mazumder

Mohiuddin Mazumder

Front-end web developer

More from Medium

CSS Grid: dynamic number of columns with a min width

How to build an accessible form with HTML5?

Don’t be shy, let’s try using ­

“Connect Four” Game in Pure CSS (no JavaScript!)