Sass

Sass Variables

Variables are a way to store information that you can re-use later.

With Sass, you can store information in variables, like:

• strings
• numbers
• colors
• booleans
• lists
• nulls

Sass uses the $ symbol, followed by a name, to declare variables:

Read More...

Sass Nested Rules and Properties

Sass lets you nest CSS selectors in the same way as HTML.

Look at an example of some Sass code for a site's navigation:

Read More...

Sass @import and Partials

Just like CSS, Sass also supports the @import directive.

The @import directive allows you to include the content of one file in another.

The CSS @import directive has a major drawback due to performance issues; it creates an extra HTTP request each time you call it. However, the Sass @import directive includes the file in the CSS; so no extra HTTP call is required at runtime!

Read More...

Sass @mixin and @include

The @mixin directive lets you create CSS code that is to be reused throughout the website.

The @include directive is created to let you use (include) the mixin.

Read More...

Sass @extend and Inheritance

The @extend directive lets you share a set of CSS properties from one selector to another.

The @extend directive is useful if you have almost identically styled elements that only differ in some small details.

The following Sass example first creates a basic style for buttons (this style will be used for most buttons). Then, we create one style for a "Report" button and one style for a "Submit" button. Both "Report" and "Submit" button inherit all the CSS properties from the .button-basic class, through the @extend directive. In addition, they have their own colors defined:

Read More...