Sass: Syntactically Awesome Stylesheets
Sass helps you write your CSS in a more organized and powerful way. It makes your CSS clean and manageable, avoiding the mess and repetition.
Features of Sass:
Variables: Think of variables as containers that store values you use in CSS.
If you need to change a value (like a color) used in many places, you only have to change it once in the variable.
scss
$primary-color: #333; // This is a variable
body {
color: $primary-color; // Using the variable
}
Nesting: lets you write your CSS in a way that follows the structure of your HTML.
It makes your CSS easier to read and write.
scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Partials and Import: Partials are small Sass files that contain snippets of CSS.
You can import these files into other Sass files to keep your styles organized.
scss
// _reset.scss (a partial file)
html, body, ul, ol {
margin: 0;
padding: 0;
}
// styles.scss (main file)
@import 'reset'; // Importing the partial file
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
Mixins: are reusable chunks of CSS that you can include in other places.
scss
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px); // Using the mixin
}
Inheritance:Inheritance lets you share a set of CSS properties from one selector to another.
scss
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message; // Inheriting styles
border-color: green;
}
.error {
@extend .message; // Inheriting styles
border-color: red;
}
Is Sass a Framework?
No, Sass is not a framework like Bootstrap or Tailwind.
Sass is a CSS preprocessor. It adds features that don't exist in standard CSS.
How it works:
You write your styles using Sass in .scss or .sass files.
A tool converts (compiles) your Sass code into standard CSS that browsers can understand.
Benefits:
Sass enhances your CSS with powerful features and syntax improvements but doesn’t provide predefined styles.
It allows you to create highly customized styles from scratch or enhance existing styles with variables and mixins.
npm run build
