SASS Syntax and SCSS Syntax

This article explains the SASS syntax and SCSS syntax.

We will explain in detail the differences between the SASS and SCSS syntaxes, and provide concrete examples to deepen your understanding.

YouTube Video

SASS Syntax and SCSS Syntax

SASS is a stylesheet language designed to extend the capabilities of CSS. SASS has two syntaxes. These are the SASS syntax and the SCSS syntax.

Overview of SASS and SCSS

SASS Syntax

The SASS syntax is written as follows:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• An indentation-based syntax that does not use curly braces {} or semicolons ;.
• It is designed to write concise and easy-to-read code.
• The file extension is .sass.

SCSS Syntax

The SCSS syntax is written as follows:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• A syntax similar to CSS, using curly braces {} and semicolons ;.
• Highly compatible with existing CSS code, allowing CSS to be converted directly into an SCSS file.
• The file extension is .scss.

Main differences between SASS and SCSS

Selection criteria

Which one to use depends on the needs of the project and the team.

• When to choose SASS syntax

  • The SASS syntax allows you to write concise and clean code.
  • If the entire team is familiar with SASS syntax, it is a suitable choice.

• When to choose SCSS syntax

  • If compatibility with CSS is important and many team members are familiar with CSS, SCSS syntax is more suitable.

Advantages of SASS and SCSS

The following are common advantages of both SASS and SCSS syntax:.

1. Use of Variables

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• By using variables, you can define a style in one place and reuse it in multiple locations. Design changes can be applied across the board by simply changing the variable values, improving maintainability.

2. Mixins

1@mixin border-radius($radius) {
2    -webkit-border-radius: $radius;
3    -moz-border-radius: $radius;
4    border-radius: $radius;
5}
6
7button {
8    @include border-radius(10px);
9}

• Mixins allow you to group styles or vendor-prefixed code that are used repeatedly in multiple places and apply them flexibly using arguments. This reduces code duplication and improves maintainability.

3. Nested Rules

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• By using nesting, you can write styles hierarchically following the HTML structure, making it easier to group related rules. This improves both code readability and maintainability.

4. Inheritance

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• By using inheritance, you can group and reuse common styles. This reduces code duplication and maintains a consistent design.

Conclusion

Choosing between SASS and SCSS depends on the developer's preference and the project requirements.

The SASS syntax emphasizes simplicity, while the SCSS syntax emphasizes CSS compatibility. Both syntaxes are powerful and can greatly enhance CSS productivity.

Choosing the most suitable option for your project allows for efficient stylesheet management.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video