Photo by Maik Jonietz on Unsplash
SASS Basics: Understanding Variables, Mixins, and Nesting
The MERN Handbook Article 4: Stage 0 HTML and CSS Fundamentals - Topic 2: Introduction to SASS
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 -v
Install SASS: Use npm to install SASS globally.
npm install -g sass
Create a SASS File: Create a new file with a
.scss
extension, for example,styles.scss
.Compile SASS to CSS: Use the SASS command to compile your
.scss
file into a.css
file.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.