Sass: A Guide to the CSS Preprocessor

Sass, which stands for Syntactically Awesome Style Sheets, is a CSS preprocessor that significantly extends the capabilities of plain CSS. It is a powerful tool that offers many advanced features such as variables, mixins, inheritance, nesting, operators, functions, and flow control. All of this makes working with stylesheets more efficient and enjoyable.

Syntax

Sass supports two different syntaxes: Sass (indentation-based, no curly braces) and SCSS (a syntax closer to CSS, with curly braces).

SCSS Syntax Example

1.naglowek {
2  color: red;
3
4  .podnaglowek {
5    font-size: 16px;
6  }
7}

Sass Syntax Example

1.naglowek
2  color: red
3
4  .podnaglowek
5    font-size: 16px

Nesting

Sass allows you to nest selectors, making it easier to keep related rules in one place.

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

Variables

Sass allows you to use variables to store values that can be used in different places throughout the stylesheet.

1$primary-color: #333;
2
3body {
4  background-color: $primary-color;
5}

Mixins

Mixins are a way to create reusable blocks of styles that can be included in different places.

1@mixin reset-list {
2  margin: 0;
3  padding: 0;
4  list-style: none;
5}
6
7ul {
8  @include reset-list;
9}

Inheritance

You can use inheritance to share common styles between different selectors.

1.message {
2  border: 1px solid #ccc;
3  padding: 10px;
4  color: #333;
5}
6
7.success {
8  @extend .message;
9  border-color: green;
10}
11
12.error {
13  @extend .message;
14  border-color: red;
15}

Flow Control

Sass offers various conditional statements and loops, such as @if, @for, @each, and @while.

Sass is a powerful tool that can significantly increase productivity and the enjoyment of writing CSS. Thanks to features like nesting, mixins, inheritance, and variables, developers can write more organized and maintainable code. Using a preprocessor like Sass can be a key step in modernizing your web development workflow.