Mastering Sass: Tips and Tricks for Efficient Workflow.

Introduction

CSS by itself can be entertaining, but stylesheets are growing bigger, more intricate, and more difficult to manage. A preprocessor can be useful here.

Let's face it: creating CSS may occasionally be challenging, particularly in today's world of ever-more-complex user interfaces. You'll frequently discover that you keep saying the same thing.

In this case, Sass comes to the rescue. You can adhere to the DRY (Do Not Repeat Yourself) principle by writing CSS.

What Is Sass?

Sass is a CSS preprocessor, sometimes known as a CSS extension, that enhances the CSS language with features like variables, nested rules, and mixins. It is a scripting language that is translated into CSS or built from scratch.

Typically, Sass code is created in.scss files and converted into.css files that may be integrated into web pages. Sass makes CSS development more productive and dependable.

A CSS preprocessor called Sass (Syntactically Awesome Style Sheets) endows your CSS with superpowers.

Sass consists of two syntaxes.

The original syntax, sometimes known as "the indented syntax," makes use of a Haml-like grammar. It employs newline characters to separate rules and indentation to divide code chunks. The extension is typically applied to indented syntax. sass

An illustration of indented syntax in code
The curly brackets and semicolons are eliminated in this older style.

 nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    text-decoration: none 

SCSS syntax

Block formatting similar to that of CSS is used in the more recent and well-liked syntax SCSS (Sassy CSS). Code blocks are indicated by braces, and SCSS files and rules within a block are separated by semicolons.

It effectively represents a subset of CSS3 syntax. This indicates that you can add some extra functionality to standard CSS when writing it.
It is frequently called Sassy CSS because of its sophisticated capabilities. The document's file extension is .scss.

$font -stack: helvetica, sans-serif 
$primary- color :#333;

body{
  font: 100% font-stack;
  color: $primary-color;

How Does Sass Work?

When you write your styles in a ".scss" file using Sass, they are converted into a standard CSS file. The browser is subsequently loaded with the CSS code.

The browser converts the Sass file into a standard CSS file rather than reading it directly. A sass compiler is necessary for this, too. There are other ways to accomplish that, but if you're using Visual Studio Code, you may add an extension called Live Sass Compiler.

It is termed a preprocessor for this reason.

Why should you use Sass?

• Simple to learn: Sass has a syntax that is similar to that of CSS, so if you are already familiar with CSS, you can start using it right away.

• Compatibility: It works with all CSS versions. So, you can utilize any CSS libraries that are out there.

• Saves time: Thanks to its robust capabilities, it aids in reducing the repetition of CSS.

• Reusable code: Sass supports variables and code fragments (mixins) that can be used repeatedly. You can code more quickly and save time as a result.

• Organized Code: Sass uses partials to keep your code organized.

Sass is compiled into CSS and inserts all required vendor prefixes so you don't have to. This ensures cross-browser compatibility.

Features of Sass?

In Sass, variables can be declared. Since we can declare variables for different attributes and utilize them in any file, this is one of Sass's advantages.

The advantage of this is that you only need to replace one line of code if that value changes.

To accomplish this, name a variable with the dollar sign. $ and then referencing it elsewhere in your code.

$primary-color: #24a0ed;

.text {
  color: $primary-color;
}
button {
  color: $primary-color;
  border: 2px solid $primary-color;
}

Sass is used to increase the CSS code's effectiveness and maintainability. Using Sass has several advantages, including:

• Variables: Make the CSS easier to update and maintain by allowing the reuse of variables throughout.

• Nesting: Enables the grouping of CSS selectors, improving the organization and readability of the code.

Example;
The majority of the time, classes are duplicated when writing CSS. By nesting styles inside the parent element, we may prevent this repetition. Check out the codes below as an example;

  In CSS,


 nav {
  height: 10vh;
  width: 100%;
  display: flex;
}

nav ul {
  list-style: none;
  display: flex;
}

nav li {
  margin-right: 2.5rem;
}

nav li a {
  text-decoration: none;
  color: #707070;
}

nav li a: hover {
  color: #069c54;
}     

With Sass, the above code can be written like this:

nav {
  height: 10vh;
  width: 100%;
  display: flex;

  ul {
    list-style: none;
    display: flex;
  }

  li {
    margin-right: 2.5rem;

    a {
      text-decoration: none;
      color: #707070;

      &:hover {
        color: #069c54;
      }
    }
  }
}

Mixins: Make it simpler to apply the same styles to several elements by allowing the reuse of CSS declarations.

• Operators and Functions: Makes it simpler to create complex styling by allowing the use of operators, functions, and control directives in the stylesheet.

• Overall, Sass contributes to more organized, less repetitious, and easier to read and manage code. Because it enables a more effective workflow, web developers frequently choose it.

Sass Functions and Operators

Sass offers a set of tools to aid in the creation of more programmatic code.

We can do computations and operations that return a certain value using the built-in functions provided by Sass.

They include anything from size computations and random number generation to conditionals and color calculations.

It also provides support for mathematical operators like +, -, \, *, /, and %, which we can use with the calc function.

Here is an example using a pixel to rem conversion function:

@function pxToRem($pxValue) {
  $remValue: ($pxValue / 16) + rem;
  @return $remValue;
}

div {
  width: pxToRem(480);
}

However, it's important to note that the */* operator for division is deprecated, and will be removed in Dart Sass 2.0.0. You can read about it in the Docs.
So, this is how it should be written:

@use "sass: math";

@function pxToRem($pxValue) {
  @return math.div($pxValue, 16px) * 1rem;
}

div {
  width: pxToRem(480px); // gives 30rem
}

Using Sass To Write a Simple Application For Hello World.

Here is a simple "Hello World" application using Sass:

// File: styles.scss

$text-color: blue;

h1 {
  color: $text-color;
}

// File: index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

You would then need to use a Sass compiler to convert the **.scss** file to a **.css** file, so that the browser can interpret the styles.
You can also use Sass via command line

sass styles.scss styles.css

This will convert the scss file to css file and you can link css file in index.html as mentioned above.

CONCLUSION

Wow, we have come to the conclusion of this article. hope you gained a whole lot from it. we have looked at what sass is, The two syntaxes of writing sass, how sass works, and why you should use it. Also some features of sass and a few sass functions and operators.

so with that, see you at the next one. bye.

About the Author

I am Jennifer Eze, an enthusiastic developer with a passion for JavaScript, Bootstrap, PHP, HTML & CSS.
I work as a freelancer, building websites for clients, and love writing technical tutorials to teach others what I do. I am eager to hear from you. Reach me on LinkedIn, GitHubitHub, or my website.