Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor that enhances standard CSS by introducing features like variables, nesting, imports, mixins, and inheritance, all while maintaining compatibility with all CSS versions.
Key Features of Sass:
- Variables: Store reusable values such as colors, fonts, or any CSS value for consistent styling.
- Nesting: Reflect the HTML hierarchy in your stylesheets by nesting CSS rules within each other.
- Imports: Split your CSS into smaller, manageable files and import them as needed.
- Mixins: Create reusable chunks of code that can be included in other selectors, allowing for efficient code reuse.
- Inheritance: Share a set of CSS properties from one selector to another using the @extend directive.
Installation:
- To install Sass, follow the instructions provided on the official Sass installation page.
Sass Syntax Variants:
- SCSS (Sassy CSS): It uses the .scss extension and is fully compatible with CSS syntax.
- Indented Syntax (Sass): An older syntax that uses indentation instead of braces and semicolons, with files having a .sass extension.
Workflow Steps:
- Write SCSS Code: Create a file named styling.scss with your Sass code.
- Compile SCSS to CSS: Use the command sass styling.scss style.css to compile the SCSS file into a standard CSS file named style.css.
- Include in HTML: Link the compiled style.css file in your HTML document within the <head> section.
Example: File name index.html
HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="d1">Welcome to GeeksforGeeks.
<ul>
<li>Algo</li>
<li>DS</li>
<li>Languages</li>
<li>Interviews</li>
<li>CS subjects</li>
</ul>
</div>
</body>
</html>
Variables: Variables can be used to store CSS values that may be reused. To declare a variable in SASS, the ‘$’ character is used. For eg, $v_name.
$fs: 30px;
$bgcolor: #00ff40;
$pd: 100px 350px;
#dl {
font-size: $fs;
color: $bgcolor;
padding: $pd;
}This fig. shows the same code:
After compiling the CSS code, save it in file by style.css.
#dl {
font-size: 30px;
color: #00ff40;
padding: 100px 350px;
}
Nesting: SASS allows CSS rules to be nested within each other, which follows the same visual hierarchy of HTML. For eg. CSS property can be used to the <li> tag nested inside the div tag.
$fs: 30px;
$bgcolor: #00ff40;
#col2: #ff0066e1;
$pd: 100px 350px;
#dl {
font-size: $fs;
color: $bgcolor;
padding: $pd;
li {
color: $col2;
}
}
After compiling the CSS code save it file by style.css.
#dl {
font-size: 30px;
color: #00ff40;
padding: 100px 350px;
}
#dl li {
color: #ff0066e1;
}
Output:
Mixins: Mixins helps to make a set of CSS properties reusable i.e. it saves one code and use it again and again. It can be included in other CSS rules by using the @include directive.
Example: This example describes the use of @mixin & @include.
$fs: 30px;
$bgcolor: #00ff40;
#col2: #ff0066e1;
$pd: 100px 350px;
@mixin font_style() {
font-family: sans-serif;
font-size: $fs;
color: blue;
}
#dl {
@include font_style();
padding: $pd;
}
After compiling the CSS code becomes:
#dl {
font-family: sans-serif;
font-size: 30px;
color: blue;
padding: 100px 350px;
}
The output of the web page:
Example: Mixins can also take variables as arguments. The values are passed while including them in the CSS rules.
$fs: 30px;
#col2: #ff0066e1;
$pd: 100px 350px;
@mixin font_style() {
font-family: sans-serif;
font-size: $fs;
color: blue;
}
@mixin list_style($size, $color) {
font-size: $size;
color: $color;
}
#dl {
@include font_style();
padding: $pd;
li {
@include list_style(20px, red);
}
}
The compiled CSS code:
#dl {
font-family: sans-serif;
font-size: 30px;
color: blue;
padding: 100px 350px;
}
#dl li {
font-size: 20px;
color: red;
}
Final Output:
Best Practices
- Modularize Your Code: Organize your styles into smaller, manageable partials and import them into a main stylesheet for better maintainability.
- Use Variables Effectively: Define variables for colors, fonts, and other reusable values to maintain consistency and simplify updates.
- Limit Nesting Depth: Avoid deep nesting to prevent overly specific selectors and maintain readability; a depth of 3 levels is recommended.
- Utilize Mixins and Functions: Create reusable mixins and functions for common patterns to reduce code duplication and enhance maintainability.
- Consistent Formatting: Maintain a consistent coding style, including indentation and naming conventions, to improve code readability and collaboration.
Similar Reads
What does the CSS rule “clear: both†do?
The clear property is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element about floating the objects. The "clear: both" means floating the elements are not allowed to float on both sides. It is used when no need for any element to
1 min read
How to Break Line Without using <br> Tag in HTML / CSS?
Breaking lines in HTML without <br> tags can be achieved using block-level elements such as <div> or <p> combined with CSS properties like display: block; or display: inline-block; and others. These elements naturally wrap text or content, facilitating clean and structured layout d
2 min read
Set the size of background image using CSS ?
Setting the size of a background image using CSS allows you to control how the image fits within an element. By using the background-size property, you can specify the width and height, ensuring the image scales appropriately for responsive design. Syntax: background-size: width height;Note: If the
2 min read
What is Greater-than Sign (>) Selector in CSS?
In CSS, the greater than sign (>) is known as the child combinator selector. It is used to style elements that have a specific parent. Unlike other selectors, it only targets direct children of an element, meaning it only looks one level down in the HTML structure. How the Child Combinator Select
2 min read
How to Select all Child Elements Recursively using CSS?
Here are three methods to achieve to Select all Child Elements Recursively using CSS: 1. Using the Universal Selector (*)The universal selector applies styles to all child elements within a parent recursively. [GFGTABS] HTML <html> <head> <style> .parent * { color: blue; font-weigh
3 min read
How to style a checkbox using CSS ?
Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo
3 min read
What is the difference between “word-break: break-all†versus “word-wrap: break-word†in CSS ?
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break:
2 min read
How to make div height expand with its content using CSS ?
When designing a webpage, ensuring that a div adjusts its height according to its content is important for creating a flexible and responsive layout. By using CSS, you can easily make a div adapt to varying content sizes, which is particularly useful when dealing with dynamic or unpredictable conten
3 min read
How to float three div side by side using CSS?
Floating three div elements side by side using CSS means aligning them horizontally in a row. This is done by applying float: left; to each div, which moves them to the left of the parent container, allowing them to sit next to each other. These are the following ways to solve this problem: Table of
3 min read
How to change color of PNG image using CSS?
Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function. filter: none|blur()|brightness()|contrast()|drop-sh
1 min read