SASS

If you're new to web design, you've certainly heard the word, but you might not know what Sass is, what it does, or whether or not you should use it. Sass is a CSS preprocessor that provides extra capabilities to normal CSS including variables, nested rules, and mixin to make the coding process simpler and more efficient. Let's explore in more detail.

CSS preprocessor

A CSS preprocessor is a scripting language that allows developers to write code in one language and compile it into CSS. Less and Stylus are two well-known examples of preprocessors. Most web designers agree that if you're new to CSS, you should stay away from Sass until you've mastered the basics. While they do offer numerous benefits in terms of speed and efficiency, it's critical that you master the fundamentals of CSS.

How to use Sass?

• Syntax
  Two syntactic choices are available in Sass:

  • SCSS (Sassy CSS): It is completely compatible with CSS syntax and uses the.scss file extension.
  • Indented (simply called 'Sass'): It uses the.sass file extension and indentation instead of brackets; it isn't entirely compatible with CSS syntax, but it's faster to create.

• Variables
  Variables in Sass may be used to hold data that can be used across your style sheet. For example, at the start of the file, you may put a colour value in a variable, and then utilise that variable to set the colour of your components.
  e.g -

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
} 

 following CSS will be produced: 

  body {
    font: 100% Helvetica, sans-serif;
    color: #333;
  }

• Nesting
  The act of nesting has two sides. While it's a great way to cut down on the amount of code you have to write, if you don't use it correctly, it can result in over-qualified CSS.
  A basic navigation strategy that makes advantage of nesting is shown below:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

The following is the CSS output:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

• Partials
  Partials are smaller Sass files that may be imported into larger Sass files (see section below). Partials can be thought of as bits of code. Your CSS is now modular and easy to manage thanks to these code snippets.
• Import
  Used with Partials , the @import directive allows you to import your partial files into the current file, to build one single CSS file. Be mindful of how many imports you're using as an HTTP request will be generated for each one.

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
// basefile.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

CSS Output:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

• Mixins
  Preprocessors have the capacity to simplify complex, long-winded code, which is one of the benefits of utilising them. Mixins can very helpful in this situation. Mixins let you create styles that can be reused across your CSS. They make it simple to avoid non-semantic classes like.float-left and to share style libraries.
• Extend/Inheritance
  The @extend directive has been called one of Sass' most powerful features. The concept is that you won't have to use numerous class names on your HTML elements if you use this directive, and your code will be more DRY. Your selectors can take on the styles of other selectors and be readily expanded as needed. That's a significant statement.
• Operators
  With the ability to conduct calculations in CSS, you can do things like convert pixel values to percentages. You'll be able to do basic math operations such as addition, subtraction, multiplication, and division. These functions may, of course, be combined to produce more complicated computations.