What is Sass?

Cascading Style Sheets (CSS) is used by web developers to control the visual presentation of a website. Imagine CSS as the exterior covering or “skin” of a website, which determines the overall visual style.

CSS is not a true programming language like C++ or Javascript, which can use loops, logic (if statements), and databases. 

As websites grow in size and complexity, CSS can become more complicated and overwhelming. Sass can be an excellent solution for this issue.

What is Sass?

Sass is short for Syntactically Awesome Style Sheets, designed by Natalie Weizenbaum and Hampton Catlin in 2006. 

Sass is a preprocessor style sheet language that is used to extend the functionality of CSS. It allows for the use of variables, nesting, functions, and more. 

It also helps to make the development process easier, by allowing developers to write code in a more organized and efficient manner. 

Sass allows for the use of mixins, which are collections of CSS declarations that can be reused throughout a project. 

Sass also helps to keep code DRY (Don’t Repeat Yourself) by making it easier to maintain and update code.

Sass brings many great advantages to web design and coding:

• It can save time by cutting down on tedious coding that might otherwise be required. For instance, Sass allows developers to create functions and use variables, which can save a lot of time for complicated coding. 
• Sass has more control over the style of a website, allowing developers to use the nesting method to code rules more efficiently. Sass also offers developers modularity, which allows different rules to be split and modified independently of the rest of the code. 
• With Sass, developers can reduce code duplication and create shorter code, making coding easier to read and debug.

By using Sass, developers can write code that is easier to read and maintain, while also making sure that the code is consistent and organized. This helps to make the development process more efficient and faster, as well as helps to reduce the amount of time needed to make changes to code.

Sass Features

Variables

Sass makes use of what are called ‘variables’ when working with CSS. Variables are like data containers that store a value or label. This makes it easier to make changes to a webpage because if you need to update a piece of information that appears multiple times, you only have to change the variable once. This saves time and makes sure all of the information is consistent.

$font-size-root: 16px;
$font-family: 'Roboto', sans-serif;

body{
font-size: $font-size-root;
font-family: $font-family;
}

Nesting

Nesting in Sass allows developers to nest selectors inside one another, which helps to avoid writing multiple lines of code for the same selector. This helps to keep the code clean and organized, as well as reduce the amount of code that needs to be written.

.footer-info {
font-size: 1rem;
.footer_nav {
display: inline-block;
.menu {
li {
color: black;
&:not(:last-child){
padding-right: 1rem;
margin-right: 1rem;
}
}
}
}

Partials

You can write Sass in many small files. Then they can be included in other Sass files. Partial Sass files start with an underscore. These files will not be compiled into the normal style sheet unless explicitly imported.

Import

Sass Import is built on top of the current CSS @import. Sass will combine the file you want to import with the file you’re importing into and serve a single CSS file to the web browser instead of sending an HTTP request as CSS does.

@import '_navigation'; //This includes styles from _navigation.scss
@import '_header'; //This includes styles from _header.scss
@import '_footer'; //This includes styles from _footer.scss

Mixins

A mixin allows you to reuse some CSS declarations. It allows you to write code once and then reuse it in multiple places. 

Mixins are like functions in programming, but instead of returning a value, they output a set of style declarations. This makes them ideal for creating complex styles that can be used in multiple places. 

Mixins can also accept parameters, allowing you to customize the output for different situations.

To create a mixin you use the @mixin directive and give it a name.

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

.box { @include border-radius(20px); }

Extend/Inheritance

Extend/Inheritance in Sass is a feature that allows you to share a set of CSS properties from one selector to another. This is useful when you have a lot of elements that share the same style. 

To use extend/inheritance, you use the @extend directive, followed by the selector you want to share the properties from. The properties from the original selector will then be applied to the new selector.

%unstyle-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu {
  @extend %unstyle-list;
}

Operators

Sass supports standard math operators like +, -, *, /, and %.

article {
  float: left;
  width: 600px / 960px * 100%;
}

LibSass

LibSass is the library file of Sass. It is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). 

The main benefit of using a library file like LibSass is that it allows for much faster processing speeds for Sass. This means that you can save time in precompiling your Sass code as well as making changes on the fly. 

It is also much more efficient, reducing file sizes up to 75%, and runs on a wide platform of devices. As a result, it has become a popular choice for many web developers, both for its convenience and performance.