Introduction
Sass (Syntactically Awesome Style Sheets) is a pre-processor language that extends the capabilities of CSS. It provides a more dynamic and efficient way to write CSS, making it easier to manage large stylesheets by offering features such as variables, nested rules, mixins, and functions.
Sass compiler: In order to use sass efficiently an extension was Introduced to avoid the installation of sass using the commandline and it is called live sass compiler by Glenn Marks.
installation of sass live compiler
Open VS Code
Launch Visual Studio Code.
Access Extensions
Go to the Extensions tab in the sidebar (usually on the left) or use the shortcut (Ctrl+Shift+X). In the search bar, type "Live Sass Compiler and locate the extension by Glenn Marks and click the "Install" button.
Enabling Live Compilation
Open an SCSS File: Create or open an SCSS file (.scss extension) in your project.
Activate Live Sass: On the status Bar, Look for a button in the status bar at the bottom that might say "Click to Watch Sass" or a similar indication. Click it to enable live compilation.
Why we use Sass?
Improved Maintainability: Sass makes your stylesheets more organized and readable. Variables and mixins allow you to manage styles centrally, making updates easier and reducing the risk of errors.
Enhanced Features: Sass offers functionalities not available in vanilla CSS, including operations, functions for color manipulation, and control flow statements.
Key Features of Sass
An HTML example to use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li>
<a href='#'>Hello world</a>
<li>
</ul>
</nav>
</body>
</html>Variables: Variables in Sass make it easy to manage and reuse values eg colors, fonts etc throughout your stylesheet.
//variables//
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
//usage of variables//
body {
font-family: $font-stack;
color: $primary-color;
}Nesting: Nesting in Sass allows you to write your CSS in a nested hierarchy that follows the same visual structure of your HTML. This makes it easier to read and maintain.
//all other tags are placed inside a the nav tag
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}Partials: Partials are Sass files that contain little code snippets of CSS that can be included in other Sass files. They are named with a leading underscore '(_)'. This helps in keeping your styles organized and maintainable, especially in large projects. All these files can be inside one folder which is mostly named as partials. In that folder there are two files to always start and they include;
the one which includes all the variables for example variables for fonts, colors and many more and it usually name _variables.scss.
the one which includes all the changes that afffect the whole websites eg fonts, colors and many more and it usually name _globels.scss.
The order is as follows.
- _globels.scss
- _variables.scss
Importing Partials: To use a partials in your main Sass file (style.scss), use the @import directive. When you import a partial, you do not include the underscore or the file extension as shown below;
@import './partials/variables';
@import './partials/globels';Take caution that the variables files must always be the first when importing.