Sass and SCSS Syntax: Basics Explained

Sass and SCSS Syntax

Sass and SCSS provide a more powerful, modular way to write CSS, making stylesheets easier to create and maintain. This tutorial covers the core syntax of indented Sass and SCSS, including variables, nesting, mixins, and operators. You will see practical examples of SCSS programming for a clear understanding of how this CSS preprocessor works.

By the end of this tutorial, you will have a solid foundation of Sass syntax and its basics, and be ready to explore more advanced topics like SCSS fundamentals.

What is Sass and SCSS Syntax?

To write Sass or SCSS code, we need to understand its syntax so that we can communicate with the compiler comfortably. The example below is a simple representation of the syntax of indented Sass style, including SCSS syntax. Feel free to navigate through the tabs to check the output of the provided code example.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
	font: 100% $font-stack
	color: $primary-color

body {
	font: 100% Helvetica, sans-serif;
	color: #333;
}

Sass Syntax Explained

The above instance shows the basic syntax of Sass programming, including SCSS syntax. Let us explain this example to understand the syntax accurately.

SCSS Syntax Explanation

• Variables $font-stack and $primary-color store font family and color.
• The body selector uses these variables for font and color properties.
• Curly braces {} and semicolons ; define blocks and end declarations.

Indented Sass Syntax Explanation

• Variables are defined similarly to SCSS but without semicolons.
• Indentation replaces curly braces for nested rules.
• body selector applies the variables like SCSS.
• Whitespace and new lines define code blocks.

Compiled CSS

• All variables are replaced with literal values.
• Uses standard CSS syntax with braces and semicolons.
• Directly usable in any browser without preprocessing.

Sass Language Basics

Next in this tutorial, we will learn about the basics or fundamentals of Sass programming, which we need to consider while writing indented syntax or SCSS styles. These basics of Sass serve as a base, and the whole coding syntax of this preprocessor has evolved from these fundamental concepts over time.

SCSS Syntax Basics

1. Preprocessing and Compilation:
   • Sass is a CSS preprocessor that compiles to standard CSS, enhancing modularity and reusability.
2. Two Syntaxes:
   • SCSS syntax (.scss) is a superset of CSS, using braces and semicolons whereas indented Sass syntax (.sass) uses indentation and spaces.
3. Variables:
   • Define reusable values with $ prefix, like colors or fonts, in Sass basics.
4. Nesting:
   • Nest selectors to mirror HTML structure, reducing repetition in SCSS basics.
5. Partials and Imports:
   • Use partials (_file.scss) and @import to modularize code.
6. Mixins:
   • Create reusable code blocks with @mixin and include with @include.
7. Inheritance:
   • Use @extend to share styles between selectors.
8. Operators:
   • Support math operations like +, -, *, / for calculations.
9. Functions:
   • Built-in functions for colors, strings or define custom function with @function directive.
10. Control Directives:
    • Use @if, @for, @each for logic in Sass stylesheets.
11. Modules:
    • Modern Sass uses @use and @forward instead of @import.
12. Comments:
    • Single-line // and multi-line /* */ comments.

These language basics lay the foundation for exploring Sass to its extensive capabilities and features. There are many other fundamentals of Sass language that we will discuss later in this tutorial series.

SCSS Basics in a NUTSHELL

The previous section of Sass tutorial explains the language basics with extreme simplicity. Let us now take a comprehensive code example to deeply analyze the syntax of Sass that will cover most of the basics listed above.

Advanced Example of Sass Syntax

Let's create a simple Sass and SCSS mixin for a button that uses variables, nesting, and a function. This example will cover SCSS variables, mixins, nesting, and other syntax features in both SCSS and indented formats, with compiled CSS.

$primary-color: blue;
$button-height: 40px;

@mixin button-base($color: $primary-color) {
	display: inline-flex;
	height: $button-height;
	background-color: $color;
	&:hover {
		background-color: darken($color, 10%);
	}
}

.button {
	@include button-base();
}

$primary-color: blue
$button-height: 40px

@mixin button-base($color: $primary-color)
	display: inline-flex
	height: $button-height
	background-color: $color
	&:hover
		background-color: darken($color, 10%)

.button
	@include button-base()

.button {
	display: inline-flex;
	height: 40px;
	background-color: blue;
}
.button:hover {
	background-color: #0000cc;
}

Example Explained

Let's break down the above Sass programming example into slices to digest the basics and understand the syntax more precisely.

1. Variables:
   • We defined $primary-color and $button-height for reusable values.
2. Mixin Definition:
   • Defined a mixin button-base with @mixin SCSS rule that takes a parameter and uses nesting for hover.
3. Function Use:
   • Used built-in darken() function to adjust color on hover.
4. Mixin Include:
   • Included the mixin in .button style rule with @include directive.
5. Nesting:
   • Nested &:hover to target pseudo-class efficiently.

Conclusion

Sass and SCSS provide a clean, modular way to write CSS efficiently. Mastering these basics of SCSS and indented syntax allows you to efficiently build maintainable stylesheets for both simple and complex projects.