Nesting in SASS

by with No Comment SASS

Learn Nesting in SASS with easy guide and working examples

Nesting in SASS / SCSS is easy with the help of “&” to achieve the nesting. In SASS “&” behaves uniquely and it denotes the current selector.  The selector changes as we nest down.  If we want to define a division with a width of 80% and aligning to a centre with margin style, we use the following code.

.main{
    width:80%;
    margin: 0 auto;
}

Now if we want to apply the class inside main and with the name of main_new. The class main_new defines the style inside the main class. We can nest it with the following code.

.main{
    width:80%;
    margin:0 auto;
    &_new{
        font-size: 2em;
    }
}

The above SCSS will compile into the following CSS code. 

.main {
    width:80%;
    margin:0 auto;
}
.main_new{
    font-size: 2em;
}

To copy the SCSS expression string to the subclass, we can use “#{&}” to copy the entire main class expression to the following subclass. If we want to achieve the CSS as mentioned below, we can use the nesting with interpolation.

Desired CSS

.main{
    width:80%;
    margin:0 auto;
}

.main .main_new{
    font-size:2em;
}

Actual SCSS Code

.main{
    width:80%;
    margin:0 auto;
    #{&}_new{
        font-size: 2em;
    }
}

Successfully, you have learned nesting in SASS. In the next tutorial, we will be learning Partials in SASS, how to implement partials in your website project

Variables in SASS

by with No Comment SASS

What are variables in SASS and Learn Variables in SASS

Sass variables are basic: you relegate a value to a name that starts with $, and afterwards, you can allude to that name rather than the actual worth. In any case, notwithstanding their straightforwardness, they’re perhaps the most valuable tool Sass brings to the table. Variables make it conceivable to lessen redundancy, do complex math, arrange libraries, and considerably more.

A variable affirmation looks a great deal like a property assertion: it’s composed <variable>: <expression>. In contrast to a property, which must be pronounced in a style rule or at-rule, variables can be proclaimed anyplace you need. To utilize a variable, simply remember it for worth.

CSS also has its variables, and CSS variables are compatible with almost 90% of the available browsers. Following is CSS variable syntax.

:root{
	--blue:#1e90ff;
}

To call the variable syntax in CSS is as follows.

p{
	background-color: var(--blue);
}

SASS variables are easy to implement. The SASS variable starts with $ and its easy to call the variable by prefixing the $ just before the variable name. Both SASS and SCSS variables begin with $. By implementing the following code, you’ll learn variables in SASS.

SASS Variable Syntax

$primary-color: #d2d2d2
p
	color: $primary-color

SCSS Variable Syntax

$primary-color: #d2d2d2;
p{
	color:$primary-color;
}

CSS Output

p{
	color: #d2d2d2
}

CSS Variables vs. SASS Variables

CSS has variables of its own, which are entirely different from Sass variables. Know the distinctions! Sass variables are completely gathered away by Sass. CSS variables are remembered for the CSS yield. CSS variables can have various qualities for various components, however, Sass variables just have each worth in turn. Sass variables are basic, which implies assuming you utilize a variable and, change its worth, the previous use will remain something very similar. CSS variables are explanatory, which implies in the event that you change the worth, it’ll influence both prior utilizes and later employments.

In the next tutorial, we will be learning Nesting and Interpolation in SASS.

Maps in SASS

by with No Comment SASS

What is Maps in SASS and learn how to use in SASS

Maps in SASS / SCSS hold key-value pairs, and it enables users to lookup value with the help of key. Defining it is similar to defining a variable; it starts with $ following which we type the Map name. Within braces, we add key: value pairs. For example:

$font-weights: (

"regular": 400,

"light": 300,

"bold": 700

); 

This is a typical example that depicts Maps. In order to change the font weight of an element, we have defined font weights and within it, we have multiple key-value pairs which can be called in order to apply respective font weights to the text elements of the HTML. Kindly observe the syntax on declaring the variable and various key-value pairs which can be extended to any use cases for your project.

Try experimenting with font-family, define variables and add several key-value pairs for each text element such as paragraphs, heading 1, heading 2 and so on. Now that we have defined the maps, the next step is to call maps so that the respective CSS property applies to the text elements.

Calling Maps in your files

It’s easy to leverage SASS Maps by calling the map-get(variable, value) function. In place of the variable, we can add here font-weight and the corresponding value will automatically suggest based on the key-value name we define in the variable. 

body{

font-weight: map-get($font-weights, regular);

}

Equivalent CSS Code

body{

font-weight: 400;

}

In the next tutorial, we will be learning variables in SASS. You’ll learn how to create a variable in SASS/SCSS, how to use it for referencing, and the best practices while using variables in SASS.

Learn SASS in 9 easy tutorials! 

by with No Comment SASS

Getting Started with SASS. Learn SASS from this series of tutorials

What is SASS?

SASS is one of the most powerful, stable and professional CSS supersets in the World. 

What does SASS means?

  • Sass fullform is Syntactically Awesome Stylesheet
  • Sass is an extension to Cascading Style Sheets (CSS)
  • Sass is a powerful CSS pre-processor
  • Sass is fully adaptable with all versions of CSS
  • Sass diminshes css repetition and therefore increases productivity
  • Sass was developed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
  • Sass is opensource.

Why Use Sass?

CSS Stylesheets are getting bigger, more complex, and cumbersome to manage. This is why a CSS pre-processor can help in making the CSS stylesheet smaller, less complex and easier to manage, thereby making the life of the designer easy and empowers them to leverage advanced styling concepts in their website and web development projects. Sass is enriched with features that are not presently available in the normal CSS stylesheets. Features like variables, nested rules, mixins, imports, inheritance, built-in functions, and other vital features make SASS one of the most powerful CSS preprocessors in the world.

What you should know before learning SASS?

Before getting started with an SASS preprocessor one should have at least intermediary expertise or exposure in HTML and CSS. Without the knowledge of HTML or CSS, it is not possible to learn SASS and implement it in your projects. So, if you want to learn GTML and CSS you can check out tutorials from W3Schools and learn the basics and intermediate level. Once you have intermediary knowledge in HTML and CSS, you can easily learn SASS from these easy tutorials

Learn the benefits of SASS: 

CSS Compatible: 

SASS is compatible with all versions of CSS. Compatibility makes programmers integrate with the project seamlessly.

Feature Rich:

SASS is full of unique and problem-solving features which makes it a one-of-a-kind CSS preprocessor in the World. 

Most Approved:

SASS is approved globally by several companies and programmers. Many developers use SASS as the standard preprocessor of CSS. 

Community:

SASS has enormous community support which includes thousands of developers and thousands of web companies. 

Extensions:

SASS has two extension formats

  1. .sass – Older SASS extension and uses indented syntax. After processing, it changes to standard CSS.
  2. .scss – Sassy CSS and is a relatively new extension. All proper CSS stylesheet is also a valid SCSS stylesheet.

How to process SASS

It’s not possible to integrate SASS or SCSS stylesheets directly into the website or web application projects. SASS or SCSS is processed to become a valid CSS file and then integrated into the project. There are several ways to go about processing SASS or SCSS to CSS. We are going to discuss only the free tools/plugins to process SCSS

Desktop Application: 

There are several paid desktop applications that help in processing SASS or SCSS to CSS; however, there is one free application that does the job well and is available in all operating systems, i.e., Scout-App. You can install the Scout-App from the following URL.

https://scout-app.io/

VS Code Extension: 

The easiest way to process SASS or SCSS is to use open source Text Editor – Microsoft Visual Studio Code and use the available Live SASS Compiler and Live Server extensions in the Extension Store. After typing the valid SCSS or SASS styles, you can click the Watch SCSS button in the bottom part of VS Code. Every time, we add a new line of SCSS, the extension processes it and creates equivalent CSS in the .css file that the extension self creates. We can directly add the generated .css file to our web project.

Get SASS VS Code Extension

You’ll learn SASS features such as Maps, Variables, mixins, nesting, partials, functions, theming, extensions and operators in the next tutorial