Class on 11.11.13 Organizing Sass Projects

Today to start the class we will look at using partials and organizing your project files

 

Folder Structure

There are a number of ways you can do this. What they all share in common is that you have a folder somewhere for your Sass files and another folder for the compiled css files. To keep things simple and to help me (and you) quickly see all of your folders, we will use the following structure:

RootFolder (name it appropriately)

css

sass

images

js

 

Sass Structure: Paritals

Today we are going to look into partials. This is a file that Sass will not output directly but is meant to be included into another file. You can tell a file is a partial because it starts with the underscore: _. For example _partial.scss.

So, why would you use partials? As you get to make more and more complex sites keeping everything organized is very difficult. Partials help you to organize files and find styles later. Also they allow teams of people to work more efficiently because different people can work on different files at the same time. Another reason is that it gets you thinking about developing your projects in a modular, reusable way. When you write your CSS this way you can take some of the partial files from one project to the next. Eventually you should have a base set of partials you can use to help kick off a project and make it that much easier to start.

We are going to use paritals to organize all of your CSS into modules. We will use the following partials and go over them in class:

_base.scss (here you setup your base colors,typography..)

_reset.scssĀ  (sass version here : https://gist.github.com/trey/3524)

_utilities.scss (this is for mixins and extensions and bits of code that are generally helpful and might be reusable)

_elements.scss (this is where you style base HTML elements, p,

_layout.scssĀ  (this is where major media queries go)

_components.scss (these are reusable sections of oyur site like navigation, search, buttons, Most of these things will be classes that are styled)

_specific.scss (this is where page and section specific css goes)

 

This structure is just one way of doing it. There are many ways and you may find something that is easier or better for you.

 

We will use these files to help explore these concepts and to do some in-class homework.

Sass_organization.zip

Leave a Reply