SASS in CSS

Introduction

It is a type of pre-processer in the CSS. We can use this syntax in the advanced CSS before compiling and endearing all the elements on the web page. With the help of SASS, we can make the coding process simpler and more efficient.

What is CSS Preprocessor?

In CSS, the preprocessor functions as the compiler that allows us to transform the CSS code from a distinct syntax. This enables us to write code using the preprocessor's syntax. Additionally, we can produce CSS code to style the webpage by linking the HTML file with the CSS file.

When incorporating a preprocessor into CSS, there is an opportunity to explore beyond the standard language. SASS code can be written similarly to CSS code but offers additional functionalities. By utilizing a preprocessor, variables can be established and applied consistently across the codebase. Enabling the exclusion of braces and semicolons can streamline the code significantly. Utilizing a preprocessor can enhance efficiency and organization in web development, contributing to its growing popularity within the CSS ecosystem.

What is SASS CSS?

SASS, which stands for Syntactically Awesome Style Sheets, is a widely-used pre-processor for CSS. Utilizing a program, we can compile SASS code into CSS and seamlessly integrate it. Not only does SASS support all CSS elements, but it also offers additional functionalities such as variables, nesting, and imports.

Syntax for variable:

$primary-color: #3498db;
$font-size: 16px;

.header {
  background-color: $primary-color;
  font-size: $font-size;
}

Syntax for nesting:

.navigation {
  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

Features and Concepts of SASS:

There are several characteristics and fundamental principles incorporated in SASS. These include:

• ✅ Variables:

By utilizing variables, we have the capability to store and reuse values within CSS, a feature supported by SASS. Variables also enable us to efficiently update values across the entire stylesheet by making changes in a single location.

• ✅ Nesting:

In SASS, it is possible to nest CSS rules within other CSS rules hierarchically. This approach improves code readability significantly.

• ✅ Mixins:

Within the CSS declaration, users can leverage reusable sets, which prove particularly beneficial when dealing with intricate styling requirements.

• ✅ Functions:

The SASS language enables the creation of custom functions. These custom functions play a key role in computing the values within the stylesheet.

• ✅ Including Partials and Imports:

When we divide the large file into smaller style files, these individual files are referred to as partials. Subsequently, we include these partials into the primary SASS file. This approach helps in structuring the codebase effectively and maintaining modularity.

• ✅ Extension/Inheritance:

In SASS, we have the capability to generate a placeholder that can be extended by another selector. This technique allows us to minimize redundancy in our code.

• ✅ Control Directives:

Sass offers conditional directives such as @if, iterative directives like @for, and looping directives such as @each, enabling the development of stylesheets that are versatile and adaptable.

• ✅ Operators:

Sass provides a range of arithmetic and logical operators that allow you to execute computations within your stylesheet.

How does SASS CSS Work?

The SASS CSS functions in a specific manner. Initially, the entire code must be authored in SASS syntax. Subsequently, the SASS code is compiled into CSS code. Following this, the CSS file is connected to the HTML file. These processes require the presence of three essential files: an HTML file, a SASS file, and a CSS file.

Why Use SASS CSS?

Now, it is important to understand the significance of employing SASS in CSS development. There exist several compelling reasons for integrating SASS into CSS code. These reasons include:

• ✅ Structured

SASS enhances code organization when compared to plain CSS, streamlining various tasks and reducing redundancy. This feature is particularly beneficial for extensive projects involving multiple developers. CSS, on the other hand, relies on manually crafted styles created and implemented by different team members.

• ✅ Accessible Learning Curve

Learning SASS code requires less time compared to CSS. Initially mastering CSS is a prerequisite, making the subsequent learning of SASS relatively effortless and time-efficient.

• ✅ Modularity

SASS offers the capability to recycle programming code, a feature that CSS lacks. In SASS, we can employ variables that are unavailable in CSS and leverage code blocks across the entire project. By utilizing SASS, we can minimize the likelihood of errors and easily propagate changes throughout the program with minimal effort.

HTML Code for Working with SASS CSS: Examples

Now that we have established a fundamental comprehension of SASS, let's delve deeper into this concept through the following illustration.

Example 1:

HTML code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="mystyle.css">
   
<title>Simplilearn Example</title>
</head>
<body>
    <div id="box1">
       
<h1>Hello, Welcome to Simplilearn!</h1>
        <p>Here, you will learn about CSS and SASS.</p>
        <ul>
           
<li>SASS</li>
           
<li>CSS</li>
           
<li>SCSS</li>
           
<li>Programming Languages</li>
            <li>Courses</li>
        </ul>
    </div>
</body>
</html>

SASS code:

//my style.scss

$primary-color: #007bff;

#box1 {
  background-color: $primary-color;

  h1 {
    color: white;
  }

  p {
    color: $primary-color;
  }

  ul {
    list-style: none;
    padding: 0;

    li {
      margin-bottom: 5px;
    }
  }
}

Output

Using Variables in SASS CSS

Similar to a programming language, SASS offers the functionality to incorporate variables. It allows us to store data within variables and utilize them across the program, holding various CSS values such as fonts, colors, sizes, and more. In SASS, values are defined using the "$" symbol. Let's explore an example to understand how variables work in SASS.

Example 2:

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <header class="header">
    <h1>Welcome to C# Programming</h1>
    <p>This is the header with a primary background color.</p>
   </header>
   
   <section class="content">
    <h2>Main Content</h2>
    <p>This is the main content of the website.</p>
    <button class="button">Click me</button>
   </section>
   
   <footer class="footer">
    <p>� 2023 C# Tutorial</p>
   </footer>
</body>
</html>

SASS code:

$primary-color: #3498db;
$secondary-color: #e74c3c;
$text-color: #333;
 
body {
  font-family: Arial, sans-serif;
  color: $text-color;
}
 
.header {
  background-color: $primary-color;
  color: white;
}
 
.button {
  background-color: $secondary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

Compiled CSS code:

body {
  font-family: Arial, sans-serif;
  color: #333;
}
 
.header {
  background-color: #3498db;
  color: white;
}
 
.button {
  background-color: #e74c3c;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

Output

Using Nesting in SASS CSS

It is an additional functionality offered by SASS for styling CSS code. Nested programming is visible when coding HTML, appearing in a hierarchical structure. The nesting feature in SASS can be applied using a CSS selector. Let's explore this concept through the following example.

Example 3:

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 
</head>
<body>
 <div class="container">
  <div class="header">
   <h1>Welcome to C# Programming</h1>
  </div>
  <div class="content">
   <p>This is an example of nested SASS.</p>
  </div>
 </div>
 
</body>
</html>

SASS code:

.container {
  width: 100%;
  padding: 20px;
  
  .header {
    background-color: #333;
    color: white;
    padding: 10px;
    
    h1 {
      font-size: 24px;
      margin: 0;
    }
  }
  
  .content {
    background-color: #f4f4f4;
    padding: 15px;
    
    p {
      font-size: 16px;
      margin: 0;
    }
  }
}

Compiled CSS code:

.container {
  width: 100%;
  padding: 20px;
}
 
.container .header {
  background-color: #333;
  color: white;
  padding: 10px;
}
 
.container .header h1 {
  font-size: 24px;
  margin: 0;
}
 
.container .content {
  background-color: #f4f4f4;
  padding: 15px;
}
 
.container .content p {
  font-size: 16px;
  margin: 0;
}

Output

Using Partials in SASS CSS

When there is a need to provide style property to the larger code, then it becomes much more challenging. If we use SASS code for the large code, then it provides so many errors during the execution of the code. But we can overcome that issue with the help of partial CSS. It is a type of code snippet which is written in one file, but that snippet will not undergo compiled CSS. To create the partial SASS, we have to follow the below steps.

• ✅ First, we have to rename the file to add an underscore before the name.
• ✅ Then we have to provide all the font details, like font size, font family, color, etc.
• ✅ Then, we have to use that file in the main SASS file with the help of the @use rule.

Using Import in SASS CSS

After generating the incomplete SASS file, the next step is to include this partial SASS file within the primary SASS file. This can be achieved by employing the @use directive. By implementing this action, all the specifics from the partial file will be brought into the main file for utilization.

Using Mixins in SASS CSS

Mixins function akin to a variable, serving as a repository for code snippets. When styling multiple elements, mixins come in handy. By employing the @mixin directive, we can generate a collection of code snippets. The following examples will elucidate this concept.

Example 4:

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <button class="button-primary">Primary Button</button>
 <button class="button-secondary">Secondary Button</button>
 
 <div class="card">
  Card Content
  <button class="button-card">Card Button</button>
 </div>
</body>
</html>

SASS code:

// Define a mixin
@mixin button($background-color, $text-color, $padding) {
  background-color: $background-color;
  color: $text-color;
  padding: $padding;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: darken($background-color, 10%);
  }
}

// Using the mixin
.button-primary {
  @include button(#3498db, #ffffff, 10px 20px);
}

.button-secondary {
  @include button(#e74c3c, #ffffff, 8px 16px);
}

Compiled CSS code:

.button-primary {
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button-primary:hover {
  background-color: #217dbb;
}

.button-secondary {
  background-color: #e74c3c;
  color: #ffffff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button-secondary:hover {
  background-color: #c0392b;
}

Output

Using Extend/Inheritance in SASS CSS

We have the ability to distribute various characteristics among selectors in SASS through inheritance. By utilizing the placeholder, we can apply the inherited characteristics. As we connect one class to another class, the impact of inheritance becomes evident. The @extend rule allows us to incorporate inheritance directly within the CSS selector. To grasp this concept better, let's examine it through an illustration.

Example 5:

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <button class="button-primary">Primary Button</button>
  <button class="button-secondary">Secondary Button</button>
  <button class="button-disabled" disabled>Disabled Button</button>
</body>
</html>

SASS code:

// Define a base button style
.button-base {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// Extend the base style for different button variations
.button-primary {
  @extend .button-base;
  background-color: #3498db;
  color: #ffffff;
}

.button-secondary {
  @extend .button-base;
  background-color: #e74c3c;
  color: #ffffff;
}

.button-disabled {
  @extend .button-base;
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

Compiled CSS:

.button-base,
.button-primary,
.button-secondary,
.button-disabled {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-primary {
  background-color: #3498db;
  color: #ffffff;
}

.button-secondary {
  background-color: #e74c3c;
  color: #ffffff;
}

.button-disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

Output

Using Operators in SASS CSS

We can also utilize mathematical operations to determine the styling of a web page. Operations such as addition, subtraction, multiplication, modulus, and the math.div function can help convert pixel values to percentages, which can then be applied as CSS values. Let's illustrate this concept with the following example.

Example 6:

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <div class="container">
    <p>This is a container with increased font size and modified padding.</p>
   </div>
  
   <button class="button">Primary Button</button>
</body>
</html>

SASS code:

// Define some variables
$base-font-size: 16px;
$padding: 20px;
$border-width: 2px;
$primary-color: #3498db;
$secondary-color: #e74c3c;

//Example of mathematical operators
.container {
  font-size: $base-font-size * 1.2; // Increase font size by 20%
  padding: $padding + 10px; // Add 10px to padding
  border: $border-width * 2; // Double the border width
}

//Example of logical operators
.button {
  background-color: $primary-color;
  color: if($primary-color == #3498db, #ffffff, #000000); // If the primary color is blue, use white text, otherwise use black text
  border: if($primary-color == $secondary-color, 1px solid $primary-color, 1px solid $secondary-color); // If primary and secondary colors are the same, use primary color for the border, else use the secondary color
}

Compiled CSS:

.container {
  font-size: 19.2px;
  padding: 30px;
  border: 4px;
}

.button {
  background-color: #3498db;
  color: #ffffff;
  border: 1px solid #3498db;
}

Output