Getting started with Sass

SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that adds features such as variables, nested rules, and mixins (reusable blocks of styles) to the basic language. It is a scripting language that is interpreted or compiled into CSS. SASS code is more readable and maintainable than plain CSS, and it can be more efficient to write styles in SASS and then convert them to CSS for use on a website. The Preprocessor is a program that inputs data to produce output that is used as input to another program. The output of sass acts as input for CSS. SASS uses the below fundamental concepts:

• Preprocessing: Preprocessing is the process of modifying the source code of a program before it is actually executed. This can include tasks such as defining and expanding variables, adding logic and control flow statements, and preparing the code for compilation. Preprocessing is often used in languages such as Sass and Less, which are CSS preprocessors, but it can also be used in other languages as well.
• Variables: SASS allows you to define variables, which can store values such as colors, font sizes, and dimensions. This makes it easy to reuse values throughout your stylesheet and makes it easy to make global changes to your design.
• Nesting: SASS allows you to nest selectors inside one another, which makes it easy to see the relationship between different selectors and avoid repeating the same selectors multiple times.
• Partials: Partials are a feature of preprocessors that allow you to break your code into smaller, reusable chunks. Partials can include variables, mixins, functions, and other code blocks.
• Modules: Modules are a way to organize code into reusable, independent units. In preprocessors, modules can include variables, mixins, functions, and other code blocks, similar to partials.
• Mixins: Mixins are a feature of preprocessors that allow you to group together a set of styles and reuse them throughout your code. Mixins can include variables, functions, and other code blocks.
• Extend/Inheritance: Extend or Inheritance is a feature of preprocessors that allows you to inherit the styles of one selector into another. This feature helps in code reuse and avoids duplication of the code.
• Operators: Operators are special symbols or keywords used to perform operations or calculations on values. In preprocessors, operators can be used to perform math calculations, string concatenation, and logical comparisons of variables. For example, adding a value to a variable, comparing two values, etc.

Generally, SASS is preferred to be used instead of CSS, as Sass is much rich in features than CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff. Writing all the styling code in a file makes it difficult to maintain and find bugs. SASS allows to make of many stylesheets for different components of the webpage and makes it easier to maintain styling. Some of the main reasons for the Sass being preferred over CSS, which is described below:

• Variables: Sass allows you to use variables, which makes it easy to reuse and update styles throughout your codebase. This can save a lot of time and make your code more maintainable.
• Nesting: Sass allows you to nest CSS selectors, which makes your code more organized and readable. This can also help you avoid writing repetitive CSS.
• Mixins: Sass allows you to create reusable mixins, which can be used to apply the same set of styles to multiple elements. This can make your code more efficient and reduce the amount of code you need to write.
• Functions: Sass also includes a number of built-in functions that can be used to perform complex calculations and transformations on your styles.
• Better organization: Sass allows you to write your CSS in a more modular way, which makes it easier to organize and maintain your codebase.
• DRY: Sass allows you to use the DRY (Don’t Repeat Yourself) principle, which reduces the amount of code you need to write and makes it more maintainable.
• Compatibility: Sass is compatible with all modern browsers and can be used in any web development project.

We often see two types of file extensions while working with sass, ie, Style.sass & Style.scss. Sass is an older syntax, which relies on indentation and lines for syntax rather than semicolons and brackets.

SASS syntax:

/* Sass syntax */
body 
    box-sizing: border-box
    font-size: 100%
div
    background-color: green

SCSS syntax: As its name suggests, it uses every valid CSS3 styling in SCSS as well.

/* Scss syntax */
body { 
    box-sizing: border-box;
    font-size: 100%;
}
div {
    background-color: green;
}

Generally, it is preferred to use the .scss file extension because the syntax is the same as css3 while in the .sass extension syntax depends on indentations.

Sass Variables Sass variables let you reuse the styling. With Sass, you can store information in variables. Sass uses the $ symbols, followed by a name of a variable.

Syntax:

$variableName: propertyValue;

Example:

CSS

$myFont: 'Rubik', sans-serif;
$myColor: green;

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

Sass Variable Scope: Sass variable scope are valid at the nesting level where they are defined. We can change the value of a variable inside the nesting of any property and Sass variables that were declared inside any tag has local scope whereas variables declared outside the tag has global scope.

Example 1: This example describes the basic usage of the SASS Variable & its scope. In SCSS, we need to declare the variable only once which contains multiple values & that variable can be utilized throughout the code. Whereas, in CSS, we need to declare it wherever that variable gets used.

• style.scss:

CSS

$myFont: 'Rubik', sans-serif;
$myTextSize: 25px;
$myColor:green;
body{
  $myFont: 'Roboto', sans-serif;
  font-family: $myFont;
  font-size: $myTextSize;
  color:$myColor;
}

h1{
  font-family: $myFont;
}

• style.css:

CSS

body {
     font-family: 'Roboto', sans-serif;
     font-size: 25px;
     color: green;
}
 h1 {
     font-family: 'Roboto', sans-serif;
}

• HTML code:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SASS Concept</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>GeeksforGeeks Learning</h1>
</body>

</html>

Output:

It’s the default behavior of sass variable scope, to change the local scope behavior we use !global.

Sass !global: The !global is used to change the scope of variables from local to global.

CSS

/* This variable has global scope */
$myFont: 'Rubik', sans-serif;
/* This variable has global scope */
$myColor: green;

body {
   /* This variable has local scope */
  $myFont: 'Roboto', sans-serif !global;

  /* Roboto font is used */
  font-family: $myFont;
  color: $myColor;
}

h1{
  /* Roboto font is used because
  overwrites the variable in body tag */
  font-family: $myFont;
}

Compiled CSS:

CSS

/* This variable has global scope */
/* This variable has global scope */
 body {
    /* This variable has local scope */
     font-family: 'Roboto', san-serif;
    /* Roboto font is used */
     color: green;
}
 h1 {
     font-family: 'Roboto', san-serif;
    /* Roboto font is used because overwrites
   the variable in body tag */
}

Example 2: This is another basic example that describes the basic implementation of the SASS Concept.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SASS Concept</title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello Geeks</h1>
</body>

</html>

We can import the sass file using the <link> tag into your HTML file. Sass code that displays the text “Hello Geeks” at the center of the screen with a green background:

• style.scss:

CSS

$background-color: green;

body {
  background-color: $background-color;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 36px;
  color: white;
  text-align: center;
}

• style.css:

CSS

body {
     background-color: green;
     display: flex;
     align-items: center;
     justify-content: center;
}
 h1 {
     font-size: 36px;
     color: white;
     text-align: center;
}

Output:

Conclusion: This article has covered the important concept of sass like Sass VS SCSS, and sass variables. The use of SASS over regular CSS can provide several advantages that can help improve the development process and the final product. In summary, SASS offers a set of advanced features that makes it much more powerful than CSS alone, It helps to make the development process more organized, efficient, and maintainable.