Getting Started with SASS

Introduction to sass

You may hear a lot about sass and many people told you that when you learn sass it will be your magic wand to style your website dynamically! that’s true and easy to learn come with me …🚶

Why SASS and what is it?

• we need to use logic into our style
• browsers are understanding only normal CSS files

simply this is the problem which SASS came to solve it.

SASS (Syntactically Awesome Stylesheets) is a pre-processor for CSS which introduces to you programming logic in a style dress that’s amazing right!

so you can use sass features and then it compiled to CSS to be understandable through the browsers

How to install SASS?

you could compile your sass code with three ways:

1- Ruby

• https://www.impressivewebs.com/sass-on-windows/
• https://sass-lang.com/install

2- Gulp / grunt / webpack … (or any task runner)

• Gulp as example: https://css-tricks.com/gulp-for-beginners/

3- node sass

Watch and Compile Sass in Five Quick Steps

let’s dive into some sass features 🔥

SASS nesting:

Nesting is one of the most important features of sass it let you nest CSS selectors inside each other.

SASS nesting

like you observed in the above example CSS with nesting looks like HTML hierarchy which makes more sense, it’s clearly shown that (.child) element is inside (.container) element in HTML DOM tree.

SASS provides us with ampersand sign (&) it could be used as shorthand for parent selectors

Best Practice: DON’T nest more than three levels.

we can also nest properties which have related namespaces such as background, font, and border Nested properties are similar to nested selectors. However, you need to include (:) let’s look at an example

.container {
  background: {
    color: red;
    position: center;
    size: cover;
  }
}

SASS variables

even CSS has its own variables (: root) but still sass variables have the power to go through some logic will cover that later. but for now, how could I define a sass variable?

SASS variables

simply it starts with the dollar sign $ then followed by the variable name.

if you had experience with javascript variables it’s the same concept instead of (var) keyword you use ($) in sass and instead of = you use (:) in sass.

Best Practice: NAME your variables with descriptive and reusable names such as (primary, secondary, warning…etc) DON’T name it likes its value (blue, red, aboutUsPadding …etc)

Thank you for reading, if you have any comments let me know, please :)

That’s all for today see you soon in my next story …👋