SASS (CSS Preprocessor)
Eloghene Otiede
Software Engineer & Project Manager @BananaCrystal | #hiring | REACT | RUBY ON RAILS | WordPress | Team Lead | Mentor
Sass, or Syntactically Awesome Style Sheets, is a powerful and popular CSS preprocessor that makes writing stylesheets easier and more efficient. Sass allows you to use variables, nested rules, mixins, and other advanced features to create reusable styles and keep your CSS code organized and maintainable. In this tutorial, we'll cover everything you need to know to get started with Sass.
Installing Sass
Before you can use Sass, you'll need to install it on your computer. There are several ways to do this, but the easiest is to use a package manager like npm or Yarn.
To install Sass with npm, open a terminal or command prompt and enter the following command:
npm install -g sass
This will install Sass globally on your computer, so you can use it from any directory.
If you prefer to use Yarn, you can install Sass with the following command:
yarn global add sass
Once Sass is installed, you can check that it's working by running the following command:
sass --version
This should display the version number of Sass that you installed.
Using Sass
To use Sass, you'll need to create a .scss file (or .sass if you prefer the indented syntax). This file will contain your Sass code, which you'll compile into CSS using the Sass command line tool.
For example, let's create a file called `styles.scss` and add the following code:
$primary-color: #007bff;
body {
?background-color: $primary-color;
}
This code defines a variable called `$primary-color` and uses it to set the background color of the `body` element.
To compile this code into CSS, open a terminal or command prompt and navigate to the directory containing the `styles.scss` file. Then run the following command:
```
sass styles.scss styles.css
```
This will compile the `styles.scss` file into a new file called `styles.css`.
If you want to compile your Sass code automatically whenever you make changes, you can use the `watch` command:
```
sass --watch styles.scss:styles.css
```
This will watch the `styles.scss` file for changes and automatically compile it into `styles.css` whenever you save.
## Sass Features
Now that you know how to use Sass, let's take a look at some of its most powerful features.
### Variables
One of the most useful features of Sass is variables. Variables allow you to define a value once and use it multiple times throughout your stylesheet. This can make your code more readable and easier to maintain.
To define a variable in Sass, use the `$` symbol followed by the variable name and the value you want to assign to it. For example:
```
$primary-color: #007bff;
```
To use the variable in your code, simply reference it by its name, surrounded by `#{}`. For example:
```
body {
?background-color: #{$primary-color};
}
```
This will compile to the following CSS:
```
body {
?background-color: #007bff;
}
```
### Nesting
Another useful feature of Sass is nesting. Nesting allows you to group related styles together and make your code more readable.
To nest styles in Sass, simply include one rule inside another, like this:
```
nav {
?ul {
??list-style: none;
??margin: 0;
??padding: 0;
??li {
???display: inline-block;
???margin: 0 10px;
??}
?}
?a {
??color: #007bff;
??text-decoration: none;
?}
}
```
This will compile to the following CSS:
```
nav ul
?{
?list-style: none;
?margin: 0;
?padding: 0;
}
nav ul li {
?display: inline-block;
?margin: 0 10px;
}
nav a {
?color: #007bff;
?text-decoration: none;
}
```
### Mixins
Mixins are reusable blocks of code that allow you to define styles once and reuse them in multiple places. Mixins can take arguments and generate different styles based on those arguments.
To define a mixin in Sass, use the `@mixin` directive followed by the name of the mixin and any arguments it accepts. For example:
```
@mixin button($background-color, $text-color) {
?background-color: $background-color;
?color: $text-color;
?padding: 10px 20px;
?border-radius: 4px;
}
```
To use a mixin, use the `@include` directive followed by the name of the mixin and any arguments it requires. For example:
```
.button-primary {
}
.button-secondary {
}
```
This will compile to the following CSS:
```
.button-primary {
?background-color: #007bff;
?color: #fff;
?padding: 10px 20px;
?border-radius: 4px;
}
.button-secondary {
?background-color: #6c757d;
?color: #fff;
?padding: 10px 20px;
?border-radius: 4px;
}
领英推荐
```
### Partials and Importing
As your Sass codebase grows, you may find it beneficial to split your styles into multiple files. Sass allows you to do this using partials.
A partial is a Sass file that is intended to be imported into another Sass file. Partial files are named with a leading underscore, like `_variables.scss` or `_mixins.scss`. The underscore tells Sass that the file is a partial and should not be compiled into a separate CSS file.
To import a partial into another Sass file, use the `@import` directive followed by the path to the partial file. For example:
```scss
@import 'variables';
@import 'mixins';
```
This will import the `_variables.scss` and `_mixins.scss` partials into the current Sass file.
### Control Directives
Sass provides several control directives that allow you to conditionally apply styles or create loops. Some of the most commonly used control directives are `@if`, `@else`, `@for`, and `@each`.
The `@if` directive allows you to conditionally apply styles based on a condition. For example:
```scss
$color: red;
body {
?@if $color == red {
??background-color: $color;
?} @else {
??background-color: white;
?}
}
```
The `@for` directive allows you to create a loop and apply styles dynamically. For example:
```scss
@for $i from 1 through 3 {
?.column-#{$i} {
??width: 100px * $i;
?}
}
```
This will generate the following CSS:
```css
.column-1 {
?width: 100px;
}
.column-2 {
?width: 200px;
}
.column-3 {
?width: 300px;
}
```
The `@each` directive allows you to iterate over a list or map and apply styles dynamically. For example:
```scss
$colors: red, green, blue;
@each $color in $colors {
?.color-#{$color} {
??background-color: $color;
?}
}
```
This will generate the following CSS:
```css
.color-red {
?background-color: red;
}
.color-green {
?background-color: green;
}
.color-blue {
?background-color: blue;
}
```
### Extending and Inheritance
Sass supports inheritance through the `@extend` directive. This allows you to reuse the styles of one selector in another selector.
To use the `@extend` directive, define a selector with the styles you want to reuse, and then use `@extend` followed by the selector you want to inherit from. For example:
```scss
.btn {
?padding: 10px 20px;
?border-radius: 4px;
}
.btn-primary {
?@extend .btn;
?background-color: #007bff;
?color: #fff;
}
.btn-secondary {
?@extend .btn;
?background-color: #6c757d;
?color: #fff;
}
```
This will compile to the following CSS:
```css
.btn, .btn-primary, .btn-secondary {
?padding: 10px 20px;
?border-radius: 4px;
}
.btn-primary {
?background-color: #007bff;
?color: #fff;
}
.btn-secondary {
?background-color: #6c757d;
?color: #fff;
}
```
### Functions
Sass provides built-in functions that allow you to perform calculations and manipulate values. Functions can be used to create dynamic styles based on input values.
Sass functions include math functions (`round()`, `ceil()`, `floor()`, etc.), color functions (`lighten()`, `darken()`, `mix()`, etc.), and string functions (`unquote()`, `quote()`, `str-length()`, etc.), among others.
For example, you can use the `lighten()` function to generate a lighter shade of a color:
```scss
$primary-color: #007bff;
$lighter-color: lighten($primary-color, 20%);
```
In this example, `$lighter-color` will be a lighter shade of the `$primary-color`.
### Comments
Sass supports both single-line and multi-line comments. Single-line comments start with `//`, while multi-line comments are wrapped between `/*` and `*/`. Sass comments are not outputted to the compiled CSS.
```scss
// This is a single-line comment.
/*
?This is a
?multi-line comment.
*/
```
## Conclusion
Sass is a powerful CSS preprocessor that offers a wide range of features to make your stylesheets more maintainable and efficient. In this tutorial, you've learned how to install Sass, use variables, nesting, mixins, partials, control directives, inheritance, functions, and comments in your Sass code.
By leveraging the power of Sass, you can write cleaner and more organized stylesheets, reduce code duplication, and easily maintain and update your styles as your project grows.