Friday, September 4, 2015

Sass Basic

Variables
Sass uses the $ symbol to make something a variable

Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Partials (_partials.scss)
A partial is simply a Sass file named with a leading underscore. This is a great way to modularize your CSS and help keep things easier to maintain.

Import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. Sass partials are used with the @import directive.

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. A good use of a mixin is for vendor prefixes. To create a mixin you use the @mixin directive and give it a name. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Extend/Inheritance
Using @extend lets you share a set of CSS properties from one selector to another.

Operators

Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.

No comments:

Post a Comment