September 28, 2017Posted by Hifyre Admin
What is SASS?
Moving from CSS to SASS
It’s easy to get started with SASS because SASS is completely compatible with all versions of CSS. This means you can still write regular CSS in a SASS file, plus you have the option of using all the benefits of SASS. The only difference is the file extension of your working file changes from CSS to SASS, and you need to compile the file. The compiled SASS file is the CSS file you would include in your HTML.
Efficient code with SASS
SASS eliminates the need to manually write out vendor prefixes on CSS properties
- Some SASS compiler applications have a built in AutoPrefix CSS option
- Another option is to use a mixin library such as Compass or Bourbon
- Or handle your own CSS vendor prefixing by creating your own mixin
The SASS @import directive is very useful for creating maintainable code
- Separate your stylesheets into relevant separate files, for example typography, buttons, header, footer etc.
- Create one master stylesheet and use the @import directive to include the separate stylesheets
- After compiling the master stylesheet, you will have one CSS file to include in your HTML
Variables allow you to set constants that you can reuse
- Set a colour palette in one place, and use those colour variables throughout your stylesheets. If you need to change a colour, you only need to update it in one place and it will be reflected in the entire stylesheet. There’s no need for finding and replacing the value multiple times.
- Variables can also be lists or arrays that can be looped through with functions and mixins
Nesting CSS selectors reduces the amount of code you need to write
- Instead of repeating the same CSS selector multiple times, you can nest selectors so that they inherit the parent selector
Loop through list or array variables to condense redundant code and allow for easily updating selectors
- You can use mixins to create reusable blocks of code
Built in SASS functions make manipulating colours very easy
- Lighten, darken, saturate, desaturate, invert are just a few of the useful functions available
From Pitch To Presentation
Not Your Average Calendar Of Events
Taking A Donation Program Digital
A Door-To-Door Operation Transforms Into A Fast Growth Digital Platform
Patchwork: A Social Drawing App