Category: SASS

Very minimal example on how to import a file called _reset.scss for example.

By moving the parent-selector & after the .users the compiled .css selector becomes: instead of:

By setting !default when declaring a variable it avoids conflicts. It’s a good thing to do when you only want to set that rule if it haven’t been set already. You can think of !default as an opposite to the !important declaration in CSS.

In order to use variables for other than values such as properties, selectors and strings. You will need to wrap it in #{$variable}

When compiled into .css .container will get: -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; and .content will get : -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

Without adding the … to $val the argument would think that there are 2 arguments being passed in. By adding … the $val… becomes a variable argument and can handle the passed value.

To make mixins more clear when working in big project it is wise to specify a keyword.Then it doesn’t matter in which order you pass in the arguments.

Its important to have the $side in the beginning of the arguments in the assemble mixin as this is the only one without a default value it has to be declared first.

The factory class includes all the rules from the group placeholder by extending it. This is a recommended way to clearfix with full browser support.

Simple example of a function in Scss