4.
SASS
3.1 Introduction
Sass (Syntactically Awesome Style Sheets) is an extension of CSS that introduces advanced
features and functionalities, enabling developers to write more efficient and manageable
stylesheets. As a preprocessor scripting language, Sass allows you to use variables, nested rules,
mixins, functions, and more, all with a fully CSS-compatible syntax. It is popular among web
designers and developers, often used alongside or as an alternative to other preprocessors like
Less.
Why Use Sass?
● Advanced Features: Sass offers capabilities beyond standard CSS, such as variables,
nesting, mixins, and functions.
● Ease of Management: Especially beneficial for large projects, Sass helps organize and
maintain complex stylesheets.
● Cross-Browser Compatibility: Sass compiles into standard CSS, ensuring consistent
behavior across different browsers.
3.2 Getting Started with Sass
Installing and Configuring Sass
To use Sass in your projects, you need to install it and set up your development environment.
There are multiple ways to install Sass, but using [Link] is one of the most straightforward
methods.
Installing Sass with [Link]
Install [Link]: If you haven't already, download and install [Link] from the official website.
This will also install npm (Node Package Manager), which you'll use to install Sass.
Install Sass Globally: Open your terminal or command prompt and run the following command
to install Sass globally:
npm install -g sass
Installing Sass globally allows you to use it in any project without needing to install it every time.
Create a Sass File: In your project directory, create a Sass file with the .scss extension. For
example:
[Link]
Compile Sass to CSS: Use the sass command to watch your Sass file and compile it to CSS:
sass --watch [Link] [Link]
● [Link]: The source Sass file.
● [Link]: The destination CSS file where Sass will output the compiled CSS.
The --watch flag tells Sass to monitor the source file for changes and automatically recompile
the CSS whenever you save the Sass file.
Sass Syntax Options
● SCSS Syntax: Uses the .scss extension and is fully compatible with CSS syntax,
including the use of semicolons and braces.
● Sass Syntax: Uses the .sass extension and employs indentation instead of braces and
semicolons for a cleaner, more concise code style.
3.3 Core Features of Sass
1. Variables: Store reusable values like colors, fonts, or sizes to maintain consistency across
stylesheets.
2. Nesting: Write cleaner, more readable code by nesting CSS selectors in a way that
mirrors the HTML structure.
3. Partials and Imports: Break down stylesheets into smaller, modular files, and import
them where needed for easier maintenance.
4. Mixins: Define reusable blocks of CSS, allowing for parameterized and flexible styles
across multiple elements.
5. Extend/Inheritance: Share styles across selectors by extending one selector's styles to
others, reducing code duplication.
6. Operators: Perform mathematical, relational, and logical operations within your
stylesheets for dynamic styling adjustments.
7. Functions: Create reusable logic to calculate and return values like colors, sizes, or any
computed values, improving flexibility.
3.4 Variables
Variables in Sass allow you to store values that you can reuse throughout your stylesheet. They
are particularly useful for managing colors, fonts, and other design elements that are used
repeatedly.
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
body {
background-color: $primary-color;
font-family: $font-stack;
}
h1 {
color: $primary-color;
}
Benefits:
● Consistency: Ensures uniformity across the site.
● Ease of Updates: Changing the value in one place updates it everywhere.
3.5 Nesting
Nesting allows you to nest CSS selectors in a way that follows the visual hierarchy of your HTML.
This feature makes your stylesheet more readable and mimics the structure of your markup.
nav {
background-color: #333;
ul {
list-style: none;
li {
display: inline-block;
a{
color: white;
text-decoration: none;
&:hover {
color: yellow;
}
}
}
}
}
Benefits:
● Readability: Cleaner and more organized code.
● Maintenance: Easier to manage complex styles.
3.6 Partials and Imports
Partials are Sass files that contain snippets of CSS and are named with a leading underscore
(e.g., _variables.scss). They are not compiled into CSS directly but can be included in
other Sass files using the @import directive.
Example:
// In _variables.scss
$primary-color: #3498db;
// In [Link]
@import 'variables';
body {
background-color: $primary-color;
}
Benefits:
● Modularity: Breaks down styles into manageable pieces.
● Reusability: Allows for code reuse across different parts of the project.
3.7. Mixins
Mixins are blocks of CSS declarations that you can reuse throughout your stylesheet. They can
accept parameters, making them highly flexible.
Defining a Mixin:
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
Using a Mixin:
.box {
@include border-radius(10px);
}
Benefits:
● DRY Principle: Avoids repetition of code.
● Flexibility: Parameters allow for customization.
3.8 Extends (Inheritance)
The @extend directive lets one selector inherit the styles of another, reducing redundancy.
Example:
%message-shared {
padding: 10px;
border: 1px solid transparent;
border-radius: 4px;
}
.message {
@extend %message-shared;
background-color: #f5f5f5;
}
.success {
@extend %message-shared;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.error {
@extend %message-shared;
background-color: #f2dede;
border-color: #ebccd1;
}
Benefits:
● Efficiency: Reduces the amount of code.
● Consistency: Shared styles ensure uniformity.
3.9 Operators in SASS
Sass provides a variety of operators that allow you to manipulate values in your stylesheets.
These include equality, relational, numeric, string, and boolean operators.
1. Equality Operators
Equality operators allow you to compare two values. You can check if two values are equal (==)
or not equal (!=).
● == (Equal to): Compares two values to see if they are the same.
● != (Not equal to): Compares two values to see if they are different.
Example:
$width: 10px;
$font: Arial;
.test {
// Checks if width is equal to 10px
width: if($width == 10px, 20px, 5px); // Outputs 20px
// Checks if font is not equal to 10px
font-family: if($font != 10px, $font, sans-serif); // Outputs Arial
}
2. Relational Operators
Relational operators are used to compare numbers or units. You can check if one value is less
than (<), greater than (>), less than or equal to (<=), or greater than or equal to (>=) another.
Example:
$padding: 15px;
.container {
// Checks if padding is less than or equal to 20px
padding: if($padding <= 20px, $padding, 10px); // Outputs 15px
// Checks if padding is greater than 10px
border-width: if($padding > 10px, 5px, 1px); // Outputs 5px
}
3. Numeric Operators
Sass supports basic mathematical operations such as addition (+), subtraction (-),
multiplication (*), division (/), and modulo (%).
Example:
$base-size: 10px;
$multiplier: 2;
.box {
// Adding values
width: $base-size + 5px; // Outputs 15px
// Subtracting values
height: $base-size - 2px; // Outputs 8px
// Multiplying values
padding: $base-size * $multiplier; // Outputs 20px
// Dividing values
margin: $base-size / 2; // Outputs 5px
// Modulo operator (remainder)
border-radius: $base-size % 3px; // Outputs 1px
4. String Operators
In Sass, the + operator can be used to concatenate (join) strings.
Example:
$font-family: "Arial";
$version: "1.0";
body {
font-family: $font-family + ", sans-serif"; // Outputs "Arial, sans-serif"
content: "Version " + $version; // Outputs "Version 1.0"
}
5. Boolean Operators
Boolean operators help perform logical operations such as and, or, and not.
● and: Returns true if both conditions are true.
● or: Returns true if at least one condition is true.
● not: Returns the opposite of the condition's value.
Example:
$width: 100px;
$height: 50px;
.container {
// Both conditions need to be true
background-color: if($width > 50px and $height > 30px, blue, red); // Outputs blue
// Only one condition needs to be true
border-color: if($width > 150px or $height > 30px, green, orange); // Outputs green
// Not operator
visibility: if(not $width < 50px, visible, hidden); // Outputs visible
}
3.10 Functions in Sass
Sass allows you to create custom functions using the @function directive. Functions are
useful for calculating values, processing input, and making your stylesheets more flexible and
maintainable. Functions can take parameters and return values that can be reused throughout
your stylesheet.
Key Points:
● The @function directive is mandatory when creating a function in Sass.
● Function names can include camelCase or hyphenated-naming conventions.
● Parameters can be passed into functions to customize their behavior.
● The value returned by the function can be used later in your styles.
Example 1: Simple Function to Calculate Padding
This function calculates padding by multiplying a base padding value with a multiplier.
@function calculate-padding($base-padding, $multiplier) {
@return $base-padding * $multiplier;
}
.container {
padding: calculate-padding(10px, 2); // Outputs 20px
}
Explanation:
● The function calculate-padding takes two parameters: $base-padding and
$multiplier.
● It multiplies the two values and returns the result.
● The result is used in the .container class, where it calculates the padding.
Example 2: Function to Adjust Color Brightness
This function adjusts the brightness of a color by increasing or decreasing the lightness
percentage.
@function adjust-brightness($color, $percentage) {
@return lighten($color, $percentage);
}
.button {
background-color: adjust-brightness(#3498db, 20%); // Outputs a lighter shade of the
color #3498db
}
Explanation:
● The function adjust-brightness accepts two parameters: $color and
$percentage.
● It uses the built-in lighten() function to increase the lightness of the color by the
specified percentage.
● The result is used as the background color for the .button class, adjusting the color's
brightness dynamically.
3.11 Sass Built-in Functions
Sass provides a wide variety of built-in functions to manipulate values like numbers, strings,
colors, lists, selectors, and even to introspect the styles. These functions help in making your
code more dynamic and reusable.
1. Number Functions
Sass provides a set of functions for performing operations on numeric values, like rounding,
calculating percentage, etc.
Example: percentage() and round()
$width: 0.25;
$height: 20.8px;
.container {
width: percentage($width); // Converts 0.25 to 25%
height: round($height); // Rounds 20.8px to 21px
}
2. String Functions
String functions allow you to manipulate text, concatenate strings, and extract or inspect parts
of strings.
Example: str-length() and to-upper-case()
$font-family: "Arial";
.test {
content: str-length($font-family); // Outputs the length of the string "Arial", which is 5
text-transform: to-upper-case($font-family); // Converts "Arial" to "ARIAL"
}
3. Color Functions
Sass offers several color manipulation functions like darkening, lightening, adjusting opacity, etc.
Example: darken() and rgba()
$color: #3498db;
.button {
background-color: darken($color, 10%); // Darkens the color by 10%
color: rgba($color, 0.5); // Sets color to 50% opacity
}
4. List Functions
Lists are used to store multiple values, and Sass provides functions to manipulate lists, such as
getting the length or retrieving specific items.
Example: nth() and join()
$list: 10px 20px 30px;
.test {
margin-top: nth($list, 2); // Returns the second item in the list, which is 20px
margin: join($list, 40px); // Joins the list with a new value, resulting in 10px 20px 30px
40px
}
5. Selector Functions
Selector functions allow you to manipulate and inspect CSS selectors.
Example: selector-nest() and selector-append()
.parent {
.child {
content: selector-nest('.parent', '.child'); // Outputs '.parent .child'
}
.test {
content: selector-append('.parent', '::after'); // Outputs '.parent::after'
}
}
3.12 Control Directives in Sass
Sass provides several control directives like @content, @if, @for, @each, and @while that
allow you to add logic to your stylesheets, making them more dynamic and easier to manage.
These directives function similarly to programming loops and conditional statements, enabling
you to generate complex CSS more efficiently.
1. @content Directive
The @content directive allows the .button class to pass additional styles (color and
border-radius) to the mixin button-style, making the mixin more flexible. The @content
directive is used within mixins to inject additional styles wherever the mixin is included. This
allows for more flexibility and reusability within your Sass styles.
Example 1: @content Directive
@mixin button-style {
background-color: blue;
padding: 10px;
@content; // Additional styles passed in will be injected here
}
.button {
@include button-style {
color: white;
border-radius: 5px; // These styles are injected inside the mixin
}
}
2. @if, @else if, and @else Conditional Statements
These are used to conditionally apply styles based on certain conditions, similar to if
statements in programming. It lets you apply styles based on the result of an expression or
condition.
$theme: dark;
body {
@if $theme == light {
background-color: white;
color: black;
} @else if $theme == dark {
background-color: black;
color: white;
} @else {
background-color: grey;
color: black;
}
}
The background color and text color of the body will change based on the value of the
$theme variable.
3. @for Loop
The @for loop is used to repeat a block of styles a specific number of times. It can loop through
a range of numbers and apply styles based on the current index.
@for $i from 1 through 5 {
.box-#{$i} {
width: 20px * $i;
height: 20px * $i;
}
}
This loop generates .box-1, .box-2, .box-3, .box-4, and .box-5, each with
progressively larger width and height based on the loop index $i.
4. @each Loop
The @each loop is used to iterate over lists, maps, or other collections. For each item in the
collection, you can generate a set of styles.
$colors: red, blue, green;
@each $color in $colors {
.text-#{$color} {
color: $color;
}
}
This loop creates .text-red, .text-blue, and .text-green classes, each with the
respective text color.
5. @while Loop
The @while loop repeats a block of styles as long as a condition remains true. This is useful for
scenarios where you don't know exactly how many iterations are required ahead of time.
$i: 1;
@while $i < 5 {
.margin-#{$i} {
margin: 10px * $i;
}
$i: $i + 1;
}
This loop creates .margin-1, .margin-2, .margin-3, and .margin-4 classes,
incrementing the margin size by 10px for each iteration.