Skip to content

SCSS / SASS

Sass (or as we commonly use - Scss), is a preprocessed stylesheet language. It adds many features over plain CSS and generally makes working with it on larger projects more sane.

There are two compiling tools for working with Sass: * NodeSass * Compass

We primarily work with NodeSass as it is considerable faster when compiling and can be used in conjunction with Gulp, Webpack and other tools.

Node Sass

You can use Node Sass in place of Compass as long as you have included any missing Compass source SCSS files in your project as Node does not have them baked in by default.

Sass with Gulp

We commonly use Sass in conjunction with the Gulp task runner. There is a package for gulp integration. See the gulp-sass package for documentation on how to integrate with your gulpfile.js

Gulp Sass and Compass

Magento 1 uses the Compass mixins that are not provided out of the box and will fail compilation if they are not found, to get around this and to avoid using compass (which is slow) we can use compass-importer which will handle importing the stylesheets.

See the package page for more information.

If for what ever reason you can not using the importer, you can manually download the compass mixin files and place them in the correct places for your project.

Installing compass on centos

  1. Run: sudo bash
  2. Install ruby: yum install ruby
  3. Update gem: gem update --system
  4. Install compass: gem install compass
  5. If this command fails to install basic dependencies and some ruby dependencies, then follow next steps:
  6. Install json or json pure: gem install json_pure
  7. Install one ruby dependency for CentOS: yum install ruby-devel
  8. Install CentOS specific compiler and ruby gems: yum -y install gcc rubygems
  9. Again update the gem: gem update --system
  10. Install compass from 3rd step: gem install compass

Features

Nested rules

One of the big benefits of using Scss (or Less for that matter) is the ability to use nested selectors.

For example the following CSS: 

.post {

}
.post .title, .post .alt-title  {
}
.post .alt-title {
}

Can be written as: 

.post {
    .title {

    }
    .alt-title {
        @extend .title;
    }
}

Partial files and organisation

Scss files can be split in to multiple partials and imported in to a top level stylesheet. These partials are never compile on their own and have to be imported.

As an extra added benefit, you can prefix the name of the partial Scss file with a _ to prevent it being picked up by the compiler, this marks the file as an explicit partial.

So your big stylesheet.scss file with 10,000+ lines can become multiple smaller sheets making it easier to work with and lends a hand to using source maps.

|-- theme
|   |-- _contact-form7.scss
|   |-- _theme.scss
|   `-- _theme_variables.scss
|-- theme.scss

Importing

We can import other stylesheets and partials.

@import "src/my-partial";

Note that you do not need to use the .scss extension (optional) or the _ file name prefix (also optional) Sass will interpret the filename correctly.

Resources