Sass/SCSS: New Age Version of CSS — A Beginner’s Guide
By Surbhi Pal, Designer — UI Dev at SourceFuse
Introduction
What is Sass/SCSS?
Sass, an acronym for Syntactically Awesome Stylesheets, is a CSS (Cascading Style Sheets) preprocessor that enhances the power and flexibility of standard CSS. It is processed or compiled into standard CSS and can be written in either Sass (.sass) or SCSS (.scss) syntax.
Why use Sass/SCSS?
Sass/SCSS is a superset of CSS, meaning all valid CSS is also valid SCSS. This makes it easier for developers to transition from regular CSS to SCSS. Sass offers several advantages, including:
- Reduces repetition in CSS, saving time
- Enhances maintainability and makes CSS easier to write
- Offers features not found in CSS, including variables, nesting, mixins, imports, inheritance, functions, and more
- Free to download and use
Example:
Consider the theme colors used for buttons, backgrounds, links, etc., on a website. With regular CSS, modifying these colors requires changes in multiple places. However, with Sass/SCSS, variables provide a simple solution. The code becomes more maintainable, as updating colors is achieved in one go.
Sass vs SCSS vs CSS
- Sass:
Uses the extension .sass
Syntax uses indentation instead of braces and semicolons
- SCSS:
Uses the extension .scss
Adopts a more traditional CSS syntax with braces and semicolons
- CSS:
Uses the extension .css
The standard language used by web browsers
As you can see in the example below, these are related but differ in syntax and structure. The choice between Sass and SCSS is often a matter of personal preference or project conventions. Many developers find SCSS more familiar and easier to adopt due to its similarity to CSS.
Preprocessor
A preprocessor is a program or tool that takes source code written in one programming language and transforms it into another language. In the context of Sass and SCSS, they are considered preprocessors because they take the code you write in Sass or SCSS syntax and process it into standard CSS. Here’s how the process works:
- Writing Sass/SCSS code:
Sass or SCSS syntax, which includes features like variables, nesting, mixins, and more.
- Processing/Compiling:
The Sass or SCSS code is then processed by the Sass preprocessor, which transforms it into standard CSS code.
- Output:
The final output is a CSS file that can be interpreted and applied by web browsers.
Key Features of Sass
- Variables
Sass/SCSS variables are a powerful feature that adds dynamism to CSS styling. In Sass/SCSS, variables are declared and defined using the $ symbol, where you name the variable and assign a value to it. These variables allow you to store various types of information, including strings, numbers, and colors.
The syntax for defining a variable in Sass/SCSS is straightforward. You use the $ symbol followed by the variable name and then provide the desired value. This approach facilitates easy updates throughout the stylesheet by allowing you to change the values of these variables.
Let’s examine the syntax for defining a variable in Sass/SCSS:
Here’s a simple example to illustrate the use of the variables:
- Nesting
In SCSS the concept of nested rules is a powerful feature that enhances the structure and readability of your stylesheets. This functionality allows you to write CSS rules in a way that mirrors the visual hierarchy of your HTML structure.
In the example below, nested rules enable the use of curly braces to enclose the style rules for nested elements, resembling the structure found in HTML. This results in a cleaner and more intuitive representation of the relationships between parent and child elements.
Scss mimicking HTML Structure:
- Parent Selectors
The parent selector, denoted by the & symbol, introduces a powerful mechanism within Sass that allows you to reference the parent selector within nested styles. This feature becomes particularly valuable when you aim to generate more specific or dynamic selectors based on the context of the parent selector. It facilitates the creation of styles for pseudo-elements, states like hover and focus, or even for inserting content before or after an element.
The syntax for utilizing the parent selector involves using the & (ampersand) as a prefix followed by some text or pseudo-elements. When you compile the Sass/SCSS code into CSS, the ampersand sign is intelligently replaced with the name of the parent selector.
Here’s a simple example to illustrate the use of the parent selector:
- Partials & @import
Sass/SCSS Partials are specialized CSS files containing small, specific code for styling, kept separate from the main stylesheet for improved code organization.
Using the @import directive, you can include these files in other Sass/SCSS files, avoiding repetitive styling. Not specifying a file extension is convenient, and you can import multiple files into the base file.
It’s crucial to name Partials with an underscore prefix, such as _partial.scss, signaling that they are not meant for independent CSS compilation.
Key advantages include:
- Reduced Bulkiness: Incorporating Partials makes the main stylesheet more concise, enabling better stylesheet management
- Efficient Compilation: Since Partials are not compiled independently, the overall compilation of Sass/SCSS code to CSS becomes faster
- Mixins and @include
Mixins in Sass/SCSS can group together a set of CSS declarations you want to reuse throughout your stylesheet. They allow you to define a group of styles and then include or “mix in” those styles wherever needed. Mixins enhance code maintainability and reusability in your stylesheets.
Following is the syntax for defining a Sass/SCSS mixin using the @mixin at-rule:
The @include directive is then used to integrate these mixins into your styles.
Mixins can take parameters, allowing for dynamic values and versatile style generation. Here’s a basic example of a mixin:
- @extend
The @extend directive in Sass/SCSS shares a set of CSS rules from one selector to another. This is useful when you want one selector to inherit the styles of another along with its own specific styling or want to override the styles without duplicating the code.
Here’s a basic example to illustrate the usage of @extend:
- Functions
In Sass/SCSS @functions are handy tools for creating reusable code that yields a specific value. Unlike mixins, functions are designed for complex operations, accepting arguments and delivering a precise result.
The syntax involves using @function to define the function and @return to specify the value it produces.
Much like mixins, functions support the use of arguments, as demonstrated in the following example.
- Maps
In Sass/SCSS a map is a data structure that allows you to store key-value pairs. It provides a way to organize and manage related pieces of data in a structured format. Maps in Sass/SCSS are similar to associative arrays or dictionaries in other programming languages. Declaring a map involves assigning keys to corresponding values
Maps in Sass/SCSS are versatile and can be used to store various types of data, not just colors. They are particularly useful for managing configuration settings, theme variables, and other related data in a structured manner.
Here’s a basic example of a Sass/SCSS map:
In this example:
- The $colors variable is a map that associates color names (keys) with their corresponding hex values (values).
- The map-get() function is used to retrieve the values associated with specific keys.
Why you must use Sass/SCSS in your projects?
Sass/SCSS is commonly used in projects as it offers several advantages over plain CSS:
- Modularity and Organization: Breaks down your styles into modular components
- Variables and Reusability: These are used to store, reuse values, and promote consistency across your styles.
- Nesting: nesting of selectors, enhancing readability and maintainability.
- Mixins and Functions: providing a way to reuse and share sets of styles or calculations.
- Community Adoption: Sass has a large and active community, which means there are many resources, libraries, and tools available.
- Integration with Build Tools: Build tools like Webpack and the Angular CLI offer seamless integration with Sass. They can automatically compile Sass files into standard CSS during the build process, simplifying the development workflow.
In summary, Sass/SCSS provides a robust set of features that enhance code organization, reusability, and maintainability in stylesheets. These features make it a powerful tool for front-end developers working on modern web applications.
Conclusion
Incorporating Sass/SCSS into your projects unleashes myriad benefits, including more maintainable code, enhanced organization, and dynamic features. Whether you’re working on a small or large project, Sass/SCSS proves to be a valuable tool for improving your styling workflow.
Remember to explore online resources, documentation, and forums for best practices and emerging features. Harness the full potential of Sass/SCSS and elevate your styling game!
Discover how SourceFuse designs modern, engaging, customer-focused applications with UI/UX consulting.
