Basic Sass Project Structure

10th December 2016

When using .scss files, it’s good to have a basic sass project structure so that you can separate out functionality such variable declarations, css resets and so on.

For simplicity, we’ll assume that your css assets are located within your project’s ‘css’ directory. So to start with, create a ‘main.scss’ file and use the sass command to compile the changes into a ‘main.css’ file.

$ sass main.scss main.css

Use the watch command to update the main.css file without having to run the sass command again.

Assuming you are currently in the ‘css’ directory within the terminal:

$ sass --watch .:.

It is common to add variable declarations within a ‘_variables.scss’ file. So add this first and declare a few variables.

// projectDir/css/partials/_variables.scss
$black: #000;
$white: #fff;
$defaultFontSize: 12px;

A file that starts with an underscore in Sass is called a partial file. Therefore we create a ‘partials’ directory to store smaller portions of CSS.

To import partial files into your main.scss file, use the @import functionality. Note that you do not need to add the underscore prefix.

// projectDir/css/main.scss
@import 'partials/variables';

.container {
    padding: 10px;
    .sub {
        position: relative;
        font-size: $defaultFontSize;
    }
}

Another technique is often separating out the CSS resets into a ‘_resets.scss’ file.

// projectDir/css/partials/_resets.scss
html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

Then use the @import keyword again to add this file to main.scss.

// projectDir/css/main.scss
@import 'partials/variables';
@import 'partials/resets';

.container {
    padding: 10px;
    .sub {
        position: relative;
        font-size: 12px;
    }
}

Mixins allow you to make groups of CSS declarations that you want to re-use throughout your project. For example, there are many different vendor prefixes for border-radius.

In Sass, you can write a border-radius mixin by declaring it using @mixin.

// projectDir/css/partials/_mixins.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Then include the mixin against a selector in your main.scss file using @include.

// projectDir/css/main.scss
@import 'partials/variables';
@import 'partials/resets';
@import 'partials/mixins';

.container {
    padding: 10px;
    .sub {
        position: relative;
        font-size: 12px;
    }
}

.box {
    @include border-radius(5px);
}

Assuming that your main.css file is updated each time that the main.scss file is being saved, the following output will have been produced:

// projectDir/css/main.css
html,
body,
ul,
ol {
  margin: 0;
  padding: 0; }

.container {
  padding: 10px; }
  .container .sub {
    position: relative;
    font-size: 12px; }

.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px; }

/*# sourceMappingURL=main.css.map */

There are of course different methods you can use to structure a Sass project. The basics covered above should give you a good starting point in how to write CSS with ease.