sass

1. What is SASS?

SASS (Syntactically Awesome Stylesheets) is a preprocessor scripting language that is interpreted or compiled into CSS. It extends CSS with features like variables, nested rules, and functions to make stylesheets more maintainable and easier to write.

2. Installing SASS

To use SASS, you'll first need to install it. If you have Node.js installed, you can install SASS using npm:

npm install -g sass

After installation, you can compile your SASS files into CSS by running:

sass input.scss output.css

3. SASS Syntax

SASS comes in two syntaxes: indented and CSS-style. The indented syntax uses indentation instead of curly braces and semicolons, while the CSS-style syntax uses curly braces and semicolons.

Indented Syntax:

$primary-color: #333

nav
  background-color: $primary-color
  color: white

CSS-style Syntax:

$primary-color: #333;

nav {
  background-color: $primary-color;
  color: white;
}

4. Variables

Variables in SASS allow you to store values (such as colors, fonts, or any CSS property) that can be reused throughout the stylesheet. Example:

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

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

5. Nesting

In SASS, you can nest your CSS selectors in a way that mirrors the HTML structure. This makes the code more readable and hierarchical. Example:

nav {
  background-color: #333;
  ul {
    list-style-type: none;
  }
  li {
    display: inline-block;
  }
  a {
    color: white;
    text-decoration: none;
  }
}

6. Partials and Imports

Partials in SASS allow you to break up your stylesheets into smaller, reusable pieces. These partials can then be imported into a main stylesheet using the @import directive.

Example of a partial file (_header.scss):

$header-color: #ffcc00;

header {
  background-color: $header-color;
}

Then import it into your main stylesheet:

@import 'header';

7. Mixins

Mixins allow you to reuse a set of properties with different values. You can pass arguments to mixins, making them flexible. Example:

8. Extend/Inheritance

Extend allows one selector to inherit the styles of another without duplicating the code. Example:

.btn {
  padding: 10px;
  background-color: blue;
}

.primary-btn {
  @extend .btn;
  color: white;
}

9. Operators in SASS

SASS supports arithmetic operations like addition, subtraction, multiplication, and division. Example:

$width: 10px + 5px;
$height: $width * 2;

.box {
  width: $width;
  height: $height;
}

10. Compiling SASS to CSS

Once you've written your SASS code, you need to compile it into regular CSS. You can do this using the SASS command in your terminal:

sass input.scss output.css

For continuous compilation, use the watch mode:

sass --watch input.scss:output.css