sass lang

Sass (Syntactically Awesome Style Sheets) is a CSS preprocessor, a scripting language that extends CSS and compiles to regular CSS. It enhances the functionality of CSS, making it more powerful and easier to manage, especially in larger projects.

Variables

Sass allows you to use variables to store values like colors, fonts, or any CSS value. This makes it easier to maintain and update your stylesheets since you can change a value in one place and have it updated throughout your stylesheet.

Copycopy code to clipboard
$margin-left: 5%;
$width: 90%;

.card {
	max-width: $width;
  margin-left: $margin-left;
}

.prompt {
  margin-left: $margin-left;
  position: fixed;
  width: $width;
  padding-right: 28px;
  bottom: 0;
  z-index: 1
}

Nesting

Sass enables you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. This makes the structure of your CSS more readable and helps avoid code repetition.

Mixins

Mixins are like functions in other programming languages. They allow you to create groups of CSS declarations that you want to reuse throughout your site. You can even pass parameters to mixins, making them more dynamic.

Partials and Import

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This helps in organizing your CSS code into more manageable chunks. When you import these files into a Sass file, all the CSS is combined into a single file, reducing the number of HTTP requests.

Operators

Sass supports basic math operators like addition, subtraction, multiplication, and division, which can be used for calculating values. This is especially useful for creating responsive designs and calculating sizes and distances.

Control Directives & Functions

Sass offers advanced features like control directives for writing conditionals and loops in your CSS. This makes it possible to generate complex styles programmatically.

Compiling to CSS

Since browsers do not understand Sass, it needs to be compiled into standard CSS. This process can be performed by various tools and build systems, making the final output a regular CSS file that browsers can interpret.