Sass

Much of the work of modifying a site is in giving it a new style. In Moovweb’s framework you can use CSS or Sass/SCSS, but it is preferable to use the latter.

Sass is basically an alternative way of writing CSS with extra functionality added. Three important features of Sass are discussed here, but there’s a lot more, trust us.

  1. Nesting
  2. Partial Files
  3. Mixins

As well as looking through The Pragmatic Guide To Sass, check out the Sass homepage.

Nesting

Nesting is extremely useful and helps navigation of stylesheets. It’s one of the core features of Sass, and should be used as much as possible.

Traditional CSS file:

.info {
  color: blue;
}
.info p {
  margin: 20px;
}
.info p #inset {
  border: 1px dashed black;
}

With Sass:

.info {
  color: blue;
  p {
    margin: 20px;
    #inset {
      border: 1px dashed black;
    }
  }
}

Nesting helps you keep track of the structure of the HTML and its styling. HTML is nested itself, so when looking for a tag to change, it’s easy to follow the corresponding tree in the stylesheet.

Partial Sass Files

Importing is a great way to organize stylesheets. Rather than having one massive Sass file, create a number of smaller Sass files. All but one of these should be a “partial” file. (In Moovweb projects, usually the only non-partial stylesheet is main.scss.)

Partial files do not get converted into full stylesheets by Sass. Therefore, if you want a partial file to be turned into CSS, you must make sure to @import it into a non-partial stylesheet.

Moovweb uses partial stylesheets to contain all the styles necessary for unique page types. For example, some styling that is only necessary on a products page is in a separate _products.scss file. The underscore means that the file is not converted into a CSS file when Sass runs. But, to make sure the styling is applied to the page, add @import "products"; to the main.css file.

Below, there is an example of how partial files work. The _products.scss file is not converted into a separate CSS file, due to its underscore. The myaccount.scss file has no underscore, so it’s converted into a separate CSS file.

_products.scss

#product_page {
  background-color: #369;
}

myaccount.scss

#myaccount_page {
  background-color: #FAFAFA;
}

main.scss

@import "products"
@import "myaccount"

Gets converted into:

main.css

#product_page {
  background-color: #369
}
#myaccount_page {
  background-color: #FAFAFA;
}

myaccount.css

#myaccount_page {
  background-color: #FAFAFA;
}

Partial Sass files come in handy with organizing stylesheets.

Mixins

Mixins are snippets of repeatable Sass. Whereas a variable can only be one line, a mixin can be many. Mixins can also include arguments. Here’s how you define a mixin:

@mixin _checkout_button {
  color: blue;
  border: 1px dashed black;
  background: purple;
  width: 50px;
  height 40px;
}

Then, when you want to use the mixin:

  .checkout {
    @include _checkout_button;
  }

Sass will automatically expand “_checkout_button” to include all the properties and values defined in the mixin, and apply them to the .checkout class.