Search for a command to run...
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.
No comments yet. Be the first to comment.
This series makes industry knowledge accessible, fosters growth through practical learning, and builds a supportive community for aspiring developers.
The MERN Handbook Article 4: Stage 0 HTML and CSS Fundamentals - Topic 4: Introduction and Comparison of CSS Frameworks
Designing a Stateless Execution Loop to Eliminate Context Decay in AI Coding Systems
One of the most sophisticated supply chain attacks in history was discovered because of a 500-millisecond delay. A half-second lag in an SSH login—a fractional anomaly noticed by a single, curious developer—was the only thing that stood between the s...
1. Setting the Stage: A New Breed of Supply Chain Attack The Shai-Hulud campaign represents a critical evolution in supply chain threats, moving beyond isolated package compromise to a self-propagating contagion targeting the core of modern developme...
The healthcare landscape is undergoing a profound transformation. As our cities become smarter and our lives more connected, a new paradigm is emerging that promises to redefine how we approach health monitoring and care delivery. Edge AI-enabled IoT...
As a founder deeply immersed in both hardware and software, with a specialization in AI, I've spent years observing the tech industry's relentless pursuit of the "next big thing" beyond the smartphone. For a while now, the prevailing narrative has po...
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.
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.
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
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.
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.
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.
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.
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.