A Beginners Guide to Sass Basics

“CSS is hard!” is what you’ll hear and face continuously as a beginner front-end web developer. It is not just repetitive but can easily become unmaintainable. Introducing Sass, CSS with superpowers. With Sass, you can do much more including variables, nesting, mixins, and more.

In this article, we shall explore the basics of writing Sass, what it is, how it works, and its unique features including variables, nesting, mixins, and more.

What is Sass?

Sass, short for Syntactically Awesome Style Sheets, is a flexible stylesheet language used in web development. It’s a CSS preprocessor that provides advanced yet easy-to-use features not found in regular CSS.

Benefits of Sass:

Modularity and Maintainability: Sass promotes modularity by allowing you to break your styles into smaller, more manageable components. This makes your codebase cleaner and easier to maintain, especially in large projects. You can reuse styles, making updates and changes more efficient.

Variables for Consistency: Sass allows you to define variables to store and reuse values, making it easy to maintain consistency in your styles.

Nesting for Improved Readability: It enables the nesting of CSS rules within one another, simplifying the structure of your stylesheets and improving readability.

Mixins and Functions for Reusability: Sass provides mixins and functions for code reuse, allowing you to create modular and maintainable styles.

Sass Syntax

In Sass, there are two types of syntax you can use. Understanding how they differ is important for choosing the right one for your project. They are:

Sass (Indented Syntax): This syntax uses indentation for nesting rather than curly braces and semicolons. It is known for its clean and concise format, perfect for those who prefer minimalistic code.

$main-color: #3498db
$heading-font-size: 24px
h1
    color: $main-color
    font-size: $heading-font-size

SCSS (Sassy CSS): SCSS is a superset of CSS with a syntax very similar to regular CSS. It uses curly braces and semicolons, making it easier for anyone transitioning from regular CSS. It is popular due to its similarity with traditional CSS, making it more familiar.

$main-color: #3498db;
$heading-font-size: 24px;
h1 {
    color: $main-color;
    font-size: $heading-font-size;
}

Sass is a powerful tool that improves code maintainability, readability, and reusability in web development. Whether you choose Sass or SCSS, it's a valuable addition to your styling toolkit.

How Does It Work?

Sass works by transforming its SCSS or Indented syntax into regular CSS that web browsers can understand. Compliers make this transformation possible. Here's how it works:

Compilation: Developers write Sass code using its improved syntax. This code contains features like variables, nesting, and mixins. When you’re ready to deploy, the Sass code is compiled into CSS.

Sass Compiler: The Sass compiler processes the Sass code and translates it into plain CSS, following the rules defined in the Sass syntax.

Output CSS: The compiler generates the compiled CSS, which is now regular and browser-compatible. It lacks the Sass-specific features but retains the styles and structure defined in the original Sass code.

Essentially, Sass simplifies the process of writing complex and separable styles, and the compiler transforms it into CSS, ensuring compatibility with web browsers.

Prerequisites

Before you start styling with Sass, you’ll need to have an understanding of these core aspects of front-end web development, they are:

HTML
CSS

For tools, you'll need these:

Code Editor:

To work with Sass, you need a code editor. Popular choices include VS Code, Sublime Text, Atom, and more. These editors often come with extensions or plugins that enhance your Sass development experience.

Compiler:

You’ll need a compiler to transform your .scss or .sass files into regular CSS. There are various ways to do this, including using command-line tools like Node.js or task runners like Gulp or Grunt, which offer automation and compilation features.

Choose the one that best fits your workflow and project requirements.

💡

Note that you can download an extension for VS code to use as a compiler, the Live Sass compiler. It is easy to understand and use. You’ll learn how to set it up, so read on.

Basics For Using Sass as a Beginner

These are some of the basic features that make Sass stand out as a handy styling tool to have as a beginner in front-end development:

Variables
Nesting
Mixins
Import
Functions

The features listed provide you with a host of ways to improve the way you style your projects. You’ll learn about each of them in detail shortly.

Variables in Sass

As earlier mentioned, Sass variables improve code reusability across project files. It is similar to the CSS custom properties feature but differs in syntax, scope, flexibility, and more. They are essential for storing values. Here are the types of values you can store:

strings
numbers
colors
booleans
lists
nulls

It’s easy to declare a variable, you can do so by following this simple syntax:

$variablename: value;

$variablename: The dollar sign is a special character that signifies you're creating a variable in Sass. The variable name can be almost anything you choose, but it must start with a letter or underscore, followed by letters, numbers, or underscores.

It is case-sensitive, so $myVariable and $myvariable are different variables.

value: Here you specify the value you want to associate with the variable

Here's an example to illustrate how it works:

$primary-color: #3498db;
$font-size: 16px;

In this example:

$primary-color is the variable name.

#3498db is the value assigned to the $primary-color variable.

$font-size is another variable name.

16px is the value assigned to the $font-size variable.

You can use these variables in your styles to replace specific values, making your stylesheet more flexible and easier to maintain. For instance:

body {
    background-color: $primary-color;
    font-size: $font-size;
}

In this code, the respective values represent $primary-color and $font-size, making it a practical way to manage and reuse values in your styles.

Variable Scope

Variable scope in Sass refers to where a variable is visible and can be used within your stylesheet. Sass defines two main scopes for variables: global and local.

Global Scope:

Variables declared at the top level of your Sass file, outside any rules or blocks, have a global scope. Global variables are visible and usable from anywhere in your stylesheet, including within nested rules and blocks.

Example of a global variable:

$global-color: #3498db;
.header {
    background-color: $global-color;
}

In this example, $global-color is a global variable used within the .header rule.

Local Scope:

Variables declared within a selector, rule, or block have a local scope. Local variables are only accessible within the selector, rule, or block where they are defined. They do not affect other parts of your stylesheet.

Example of a local variable:

.button {
    $local-color: #e74c3c;
    background-color: $local-color;
}
.footer {
    // $local-color is not accessible here
}

In this example, $local-color is a local variable, and it's only accessible within the .button rule. You cannot use it outside of this block.

Nesting in Sass

Nesting in Sass is a powerful feature that allows you to write more organized and structured CSS. It’s similar to nesting in HTML. Here's how it works in Sass:

#container {
    width: 100%;
    .header {
        background-color: #3498db;
}
    .content {
        font-size: 16px;
}
}

In this example:

The #container selector contains nested .header and .content selectors.

You can also use & to reference the parent selector. For instance:

.button {
    &.primary {
        background-color: #3498db;
}
    &.secondary {
        background-color: #e74c3c;
}
}

Nesting can be very helpful in organizing your code. However, excessive nesting may lead to overly specific CSS selectors that can cause unexpected styling conflicts due to increased specificity.

Mixins in Sass

Mixins in Sass are reusable blocks of CSS that can be included in your styles. They allow you to define a set of CSS rules and then reuse those rules in multiple places throughout your stylesheet. Here's how to use mixins in Sass:

Defining a Mixin:

To define a mixin, you use the @mixin directive followed by a name and a set of CSS rules. For example:

@mixin button-styles {
    padding: 10px;
    background-color: #3498db;
    color: #fff;
    border: none;
}

The mixin contains CSS rules for styling a button.

Including a Mixin:

To include a mixin in a selector, you use the @include directive followed by the mixin name. For example:

.button {
@include button-styles;
}

Mixin Arguments:

You can get creative by including arguments. Arguments allow you to pass values to the mixin, making it adaptable for different situations. Here's an example with mixin arguments:

@mixin button-styles($bg-color, $text-color) {
    padding: 10px;
    background-color: $bg-color;
    color: $text-color;
    border: none;
}

Then, when including the mixin, you provide values for the arguments:

.button {
@include button-styles(#3498db, #fff);
}

This way, you can customize the appearance of your buttons by passing different background and text colors.

Mixins are a fundamental concept in Sass, and they greatly improve the organization and maintainability of your styles.

Partials in Sass

In Sass, partials are special Sass files that start with an underscore (_) in their filenames. These partial files are not compiled into standalone CSS files but are intended to be imported into other Sass files. Partials are used to modularize your styles and keep your codebase organized. Here's how to use partials in Sass:

Creating a Partial:

To create a partial, simply give it a filename that begins with an underscore(_). For example, _variables.scss, _buttons.scss, or _mixins.scss. In the partial file, you can define variables, mixins, or styles just like you would in a regular Sass file.

Partials are particularly useful for larger projects where code organization becomes critical.

Modules in Sass

In Sass, modules refer to a way of organizing and structuring your styles using partials, variables, and mixins. The concept of modules in Sass helps you create a modular and maintainable codebase, making it easier to manage and scale your styles. Here's how you can create modules in Sass:

Partial Files:

As mentioned earlier, partial files in Sass are used to create modules. These partial files begin with an underscore in their filenames and are not compiled into separate CSS files.

Each partial can represent a specific module of your styles. For example, you might have partials for typography, buttons, forms, layout, and more.

Imports:

Import the partials representing different modules into your main Sass file. This allows you to combine and use the variables, and mixins defined in those modules in your main stylesheet.

Example of Using Modules in Sass:

Let's say you have the following module partials:

_variables.scss: Contains color variables, font variables, and other design-related values.
_typography.scss: Defines styles for typography.
_buttons.scss: Includes button styles and related mixins.
_layout.scss: Contains layout-related styles and functions.

Your main Sass file might look like this:

@import 'variables';
@import 'typography';
@import 'buttons';
@import 'layout';
/* Your main styles go here, making use of variables, mixins, and functions from the imported modules. */

By organizing your code this way, you create a modular structure that makes it easier to update and maintain your styles. Modules help you keep related styles together, promoting code reusability in larger projects.

Inheritance in Sass

Inheritance in Sass refers to the ability to inherit styles from one CSS selector into another. This is achieved using the @extend directive. Inheritance is a powerful feature in Sass that allows you to reduce code redundancy. Here's how it works:

Defining a Placeholder Selector:

To use inheritance, you first define a placeholder selector, which is a special selector that doesn't generate any CSS on its own. You define a placeholder selector by prefixing the selector name with a % symbol. For example:

%button-base {
    padding: 10px;
    background-color: #3498db;
    color: #fff;
    border: none;
}

In this example, %button-base is a placeholder selector that defines some basic button styles.

Extending the Placeholder:

To inherit the styles from the placeholder selector, you use the @extend directive within another selector. For example:

.button {
    @extend %button-base;
    font-size: 16px;
}

In this case:

@extend %button-base instructs Sass to inherit the styles from %button-base into the .button selector. The .button selector inherits the padding, background color, color, and border styles from the placeholder selector. You can then add additional styles to the .button selector, such as font-size.

Benefits of Inheritance:

Code Reusability: Inheritance allows you to reuse styles from one selector in another, reducing code duplication.
Maintainability: If you need to make changes to the inherited styles, you can do it in one place (the placeholder selector) and have those changes reflected in all selectors that extend it.
Hierarchy: Inheritance maintains a clear hierarchy in your styles, making it easier to understand the relationship between selectors.

Note that inheritance is generally best used for shared base styles like button styles, form elements, or common design patterns.

In summary, inheritance in Sass is a valuable tool for maintaining clean and organized styles by allowing you to reuse styles and reduce redundancy in your code. It's especially useful for maintaining consistency across a project.

Using Sass in VS Code

VS Code provides excellent support for Sass and makes it easy to compile your Sass code into CSS. Here are the steps to set up and use Sass in VS Code:

1. Install VS Code:

If you haven't already, download and install VS Code from the official website.

2. Install the Live Sass Compiler Extension:

VS Code has a variety of extensions available, and one of the most popular extensions for compiling Sass is Live Sass Compiler. Here's how to install it:

Open VS Code.
Click on the Extensions icon in the sidebar (or use the shortcut Ctrl+Shift+X or Cmd+Shift+X).
Search for Live Sass Compiler in the extensions marketplace.
Click the Install button next to the extension.

3. Create Your Sass Files: Create your Sass (.scss) files within your project directory. You can organize them into partials, modules, or regular stylesheets as needed.

4. Configure Settings (optional): By default, Live Sass Compiler will compile your Sass files to CSS in the same directory as your Sass files. If you want to change the output directory or other settings, you can configure this in your workspace settings.

To do this, go to the Settings in VS Code, search for Live Sass Compiler, and modify the settings as required.

That's it! You can now write your styles in Sass, and VS Code will take care of compiling them into CSS for you. This setup simplifies the development process and makes it easier to maintain your styles.

Conclusion

Sass is a powerful tool that provides numerous benefits to beginner front-end web developers. It simplifies CSS and makes it more maintainable, readable, and reusable. You’ve learned all about variables, nesting, mixins, and inheritance, This will empower you to create organized and efficient styles.

Whether you choose the indented syntax (Sass) or the CSS-like syntax (SCSS), Sass is a worthy addition to your front-end development toolkit. Happy coding!

Zaycodes Publication