Short for Syntactically Awesome Style Sheets, SASS is a preprocessor scripting language that is compiled into CSS. Below are some features of SASS:
A preprocessor is a scripting tool that allows developers to write code in one language and compile it into another. Applied here, the CSS preprocessor takes code written in valid SCSS/SASS syntax then compiles and converts it into valid CSS syntax for the browser to read. Variables, nesting, partials, and modules are all valid in SASS/SCSS files but invalid in CSS hence the preprocessor. This is helpful because stylesheets are getting larger, more complex, and harder to maintain.
Indented Syntax (SASS)
There are two syntaxes to SASS. The first syntax is called indented syntax (SASS) and uses indentation to separate code blocks combined with newline characters to separate rules. This syntax uses the .sass file extension and is not fully compatible with CSS syntax. Compared to the other syntax, SASS is easier to write.
Sassy CSS (SCSS)
The second syntax is called SCSS which uses braces to denote code blocks combined with semicolons to separate lines in a block. This syntax uses the .scss file extension and is fully compatible with CSS syntax.
Information that needs to be reused throughout the stylesheet is stored in variables. Things like colors, fonts, or any CSS values can be stored into variables using the dollar sign ($) symbol. When processed, the variables are replaced with its values written in a CSS file.
With SASS/SCSS nested CSS selectors can be written to follow the same visual hierarchy of the corresponding HTML. Nesting selectors allows users to better organize their CSS and make it more readable.
Containing little snippets of SASS code is what partials are meant for. Partials are a great way to modularize CSS and can help keep things easier to maintain. Partial files are named with a leading underscore which lets SASS know that it is a partial and it should not be interpreted into a CSS file.
SASS/SCSS allows users to better organize their CSS by supporting modules. With the SASS/SCSS @use rule, other SASS/SCSS files can be loaded as a module to be able refer to variables and functions that aren’t natively in files.
Want to Learn More?
This is just a sample of what we can do. We have 15 years of experience working in nearly every technology and industry. Whatever you are doing, we've done it and are prepared to tackle your project. Reach out and we will discuss it with you.