SASS Basics: Understanding Variables, Mixins, and Nesting
The MERN Handbook Article 4: Stage 0 HTML and CSS Fundamentals - Topic 2: Introduction to SASS
I'm a full-stack engineer from Kerala. Helping startups turn their ideas into digital realities.I specialize in designing and building modern web solutions.
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:
Install Node.js and npm: Ensure you have Node.js and npm installed.
node -v npm -vInstall SASS: Use npm to install SASS globally.
npm install -g sassCreate a SASS File: Create a new file with a
.scssextension, for example,styles.scss.Compile SASS to CSS: Use the SASS command to compile your
.scssfile into a.cssfile.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:
$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:
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:
@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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SASS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<button class="button">Click Me</button>
</body>
</html>
styles.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:
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.
