DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on

Sass Intro

#css #sass

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
Enter fullscreen mode Exit fullscreen mode

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
Enter fullscreen mode Exit fullscreen mode

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)