Current workflow with Sass and Compass

What I love about it you can use either the sass or scss format. The sass format is for when working in a team as it forces all the developers to code to the same coding style. But the scss format is just an extension of vanilla CSS. So their no need to learn any additional formatting or way of structure your code. It can be learned at your own pace. So you can introduce mixins, variables and functions at your own pace.

Structuring of sass code

The way in which i’m currently structuring my sass code

css
	main.css
sass
	main.sccs (1)
	base (2)
		_debug.scss
		_reset.scss
	helpers (3)
		_responsive.scss
		-mixins.scss
	plugins (4)
		_font-awesome.scss
		_pikaday.scss
	shared (5)
		_buttons.scss
		_forms.scss
		_links.scss
		_tables.scss
	sections (6)
		_header.scss
		_footer.scss
		_home.sccs
		_news.scss
		_product.scss

1. 1. This file contains all my imports for each stylesheet it also contains the variables which are used throughout the my application
2. 2. I tend to use my own reset its my own hybrid of Eric Myers Reset and the Normalize css the second file is what i used for debugging my applications. For example mt10 – margin-top:10px; floatLeft – float :left;
3. 3. This is where i usually store my the mixins for projects. I tend to group all the mixins into its own stylesheet. So its easier to reuse them in different applications
4. 4. I store all my plugins for my javascript libraries inside this folder.
5. 5. The shared folder goes on all my project this is where I put sitewide styling for the project styleguide. I split each element into its individual its own stylesheet for example buttons, form, tables.
6. 6. This folder contains the pages for the site for example header, footer. The projects which I usually build are done restfully so each stylesheet represent uri.

Don’t Repeat yourself

With css we often find yourself repeating certain values whether its a set colors or its a group of attributes eg font-size:14px; font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif; line-height:22px;. What i tend to do extract single values to their own variables such as colours and group of attributes as a placeholder or mixin.

Variables

.nav-link{border:1px solid #535353; color:#535353;}

Would become:

$color-primary : #535353;
.nav-link{border:1px solid $color-primary; color:1px solid $color-primary;}

Placeholders

#panelOne{font-size:14px; font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; line-height:22px; font-weight:bold;}
#panelTwo{font-size:14px; font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif; line-height:22px; font-weight:bold;}

Would become:

%fonts-primary{font-size:14px; font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif; line-height:22px; font-weight:bold;}

#panelOne{@extend %fonts-primary;}
#panelTwo{@extend %fonts-primary;}

The following above is just some of the processes I follow when creating sass files for web applications.