In this information CSS tutorial we will be exploring SASS, or Syntactically Aweseome Stylesheets, and how it is changing the way you work with and manage your modern CSS coding.
What the heck is SASS? Is it Some kind of CSS?
Sass |sass|
noun
1 Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
PHRASES
Sass makes CSS fun again.
So now that you know what Sass is, we will break down the main points of interest and how it can benefit you and your work. Although does a lot to keep things simple and beautiful, it has four main components. Each of these is quickly outlined in the following paragraph.
It supports many Variables as well as basic math operations, helpful if you use things like the same color in many places. It supports Nesting to help you avoid constant repletion in your code. Another really big one Sass brings to the table is the ability to use Mixins and even give them arguments. And lastly is supports Selector Inheritance, which literally lets one selector inherit all the styles of another without having to duplicate any CSS code.
So just with this basic introduction you can probably already see a lot more ability and productivity wrapped up inside of Sass, and we will be back again soon with more on this very powerful CSS extension. In the meantime, you may find this recent post on using your own custom fonts with CSS @font-face. Thanks for stopping by!