SASS
SASS is an interpreted language based on CSS and reliant on Ruby to compile into a CSS based format. SASS is used to widen the possibilities of CSS and contributes to a more streamlined working environment which can save a lot of time, while promoting structure and organisation which can be very beneficial as a project grows.
SASS projects comprise of a main .scss file (or .sass using whitespace indentation instead of curvy brackets), and partitions formatted with an underscore before the file name (_example.scss). Partitions are split up into different modules at the developers choosing, and are then imported into the main .scss file. A processing program is then used to interpret (compile) SASS into one CSS file, which can then be linked to a webpage.
Benefits of SASS include variables, nesting, mixins, and inheritence. Variables work like many other programming languages and can be assigned a value and then used throughout the SASS code.
- Variables
- One example is to assign a hex or rgb value to a variable. The benefit of this is that that variable can then be used throughout the site during the design phase, and the value of the variable can then be changed easily by editing the value of the variable.
- Nesting
- Nesting results in code that is easier to write, and cleans up code so that it is easier to read.
- Mixins
- Mixins are similar to functions in some other programming languages, and parameters can be set, with the mixin using arguments presented. Mixins also cut down on repetitive code, and make it easier to write. An example of a mixin is creating a border mixin with the syntax @mixin format($padding, $margin, $font-size) {padding: $padding; margin: $margin; font-size: $font-size;}.
- Inheritence
- Inheritences can be created in a placeholder %class and properties and values can be given similar to a normal CSS selector declaration, and then inherited by another selector using the syntax @extend <selector> as a declaration. Blocks of CSS declarations can also be inherited from practically any desired selector, and not restricted to only placeholder classes.
- Structure
- Perhaps the most beneficial thing about working with SASS is the ability to create partials and import them into a main .scss sheet, thus resulting in cleaner code that is easier to read and keep track of. Below is a link to my main.scss sheet along with a screenshot on how my folders are structured.
