I recently came upon Sass ('Syntactically Awesome Style Sheets') which is CSS preprocessor that enables you to use things like variables, nested rules, and inline imports in addition to regular CSS. It is an organizational tool used for creating style sheets quicker.
Installation
With npm:
$ npm install -g sass
Usage
There are two types of Syntax for Sass:
- SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax
- Indented (simply called 'Sass'): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it's quicker to write
Variables
For storing things like colors, font stacks, or any CSS value for reuse, Sass uses the $ symbol for declaring variables. For example, you can store a colour value variable at the top, and then use this variable when setting the colour of your elements for quick and easy colour changes:
Sass
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
Nesting
Sass allows nesting CSS selectors in a way that follows the same visual hierarchy of HTML. Here's an example of some typical navigation styles:
Sass
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Mixins
Mixins simplify tedious CSS code. Group declarations for reusability and vendor prefixes, for example, are possible with mixins. An example of transform:
Sass
=transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
CSS
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
This is just a brief overview of Sass and its features. On the official site, you can read more documentation on things like partials and operators.
References
Top comments (0)