# SASS Basics: Understanding Variables, Mixins, and Nesting
Welcome back to "The MERN Handbook." In this fifth article the series, we'll explore SASS (Syntactically Awesome Style Sheets). SASS is a preprocessor scripting language that extends CSS, enabling you to write more efficient, maintainable, and scalable stylesheets. We'll cover the basics of SASS, including variables, mixins, and nesting.
#### What is SASS?
SASS is a CSS preprocessor that adds several features to CSS, making it more powerful and easier to manage. It allows you to use variables, nested rules, mixins, and functions, which are not available in standard CSS. SASS files are typically written with a `.scss` extension and compiled into regular CSS files that browsers can understand.
#### Setting Up SASS
Before diving into SASS, you need to set up your development environment:
1. **Install Node.js and npm**: Ensure you have Node.js and npm installed.
```bash
node -v
npm -v
```
2. **Install SASS**: Use npm to install SASS globally.
```bash
npm install -g sass
```
3. **Create a SASS File**: Create a new file with a `.scss` extension, for example, `styles.scss`.
4. **Compile SASS to CSS**: Use the SASS command to compile your `.scss` file into a `.css` file.
```bash
sass styles.scss styles.css
```
#### SASS Variables
Variables in SASS allow you to store values that you can reuse throughout your stylesheet. This helps maintain consistency and makes it easier to update your styles.
**Example:**
```scss
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
body {
font-family: $font-stack;
color: $primary-color;
}
```
In this example, `$primary-color` and `$font-stack` are variables that store color and font values, respectively. These variables are then used within the `body` selector.
#### SASS Nesting
Nesting in SASS allows you to nest CSS selectors within each other, following the same visual hierarchy of your HTML. This makes your CSS more readable and easier to manage.
**Example:**
```scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
color: $primary-color;
&:hover {
color: darken($primary-color, 10%);
}
}
}
}
}
```
In this example, the `ul`, `li`, and `a` selectors are nested within the `nav` selector, following the structure of the HTML.
#### SASS Mixins
Mixins in SASS allow you to create reusable chunks of CSS that you can include in other selectors. This is particularly useful for styles that are used repeatedly throughout your stylesheet.
**Example:**
```scss
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(10px);
background-color: $primary-color;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
```
In this example, the `border-radius` mixin is created to apply rounded corners. The mixin is then included in the `.button` selector.
#### Practical Implementation
Let's create a practical example using variables, nesting, and mixins.
**HTML:**
```html
SASS Example
```
**styles.scss:**
```scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: Helvetica, sans-serif;
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
body {
font-family: $font-stack;
color: $primary-color;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-around;
background-color: $secondary-color;
li {
display: inline-block;
a {
text-decoration: none;
color: white;
padding: 10px 20px;
&:hover {
color: darken(white, 10%);
}
}
}
}
}
.button {
@include border-radius(10px);
background-color: $primary-color;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
border: none;
cursor: pointer;
&:hover {
background-color: darken($primary-color, 10%);
}
}
```
**Compile SASS to CSS:**
```bash
sass styles.scss styles.css
```
This will compile the `styles.scss` file into a `styles.css` file that can be linked to your HTML.
#### Conclusion
SASS is a powerful tool that extends CSS with features like variables, mixins, and nesting. These features help you write more efficient, maintainable, and scalable stylesheets. By incorporating SASS into your workflow, you can streamline your CSS development process and enhance your web projects.
💡
If you have any questions or need further guidance, feel free to join my 30-minute one-on-one interactive session. Get personalized mentorship and answers to your queries. Book your session here: Dev Chat.