Organizing Styles: Using SASS Partials for a Modular CSS Setup
How you choose to organize your styles can affect your efficiency as a front-end developer (how long it takes you to write code? how much code do you re-use from project to project? ), your ability to manage complex projects and work with others (how readable is your code? how easily can others understand it?), and how fast your site loads (how how much of that code is actually needed? do you always make time to refactor and optimize your code?).
This may not be a big concern for small static brochure sites, but as you work on larger, more complex projects with multiple designers/developers, style organization becomes essential. One solution is to separate your styles into smaller parts (partials) and then use a preprocessor (SASS) to compile the styles into one style.css.
There are several ways to learn SASS and multiple different approaches to setting up your projects and your CSS architecture, so below are a few different ways to go about it.
Hands-on Activity #1: Sassy Base From Scratch
Outcomes:
- Spin up a local web server from a dev environment (as opposed to using an IDE)
- Auto-reload a browser whenever a file is saved without a manual refresh.
- Auto-compile SASS (via a compiler/task manager that watches for changes)
- Use SASS features to set up a modular style base for a small site (using SASS partials)
Overall Process:
- Setup a local front-end web development environment to compile SASS. In this step, we will use a PrePros, a GUI-based front-end compiler. In another lesson, we will use Gulp.
- Establish a custom organizational file system using SASS partials that embrace best practices and strategies from popular CSS methodologies (e.g. SMACSS).
- Embrace Components by working on small, bite-sized pieces of code that will work together to form a larger, modular system consisting of multiple SASS partial files. The new SCSS files will embrace SASS features to improve the coding experience, such as variables and nesting.
Instructions:
All step-by-step instructions are embedded into the content of the “Sassy Base” site that you will be following along and building (see the instructions on the home page).
- Sassy Base repo: https://github.com/kccnma/sassybase
- Sassy base demo: https://kccnma.github.io/sassybase/
Source Code (via Github) and Demos for each individual step:
- Initial Setup | Demo
- Sass Partials | Demo
- Base Typography | Demo
- Responsive Breakpoints | Demo
- Grid & Layout | Demo
Examples of past examples (by year):
- John Doe’s 2020 Sassy Base: repo | demo
- John Doe’s 2019 Sassy Base: repo | demo
- John Doe’s 2018 Sassy Base: repo | demo
- John Doe’s 2017 Sassy Base: repo | demo
Hands-on Activity #2: Convert a Static Site to a Sassy Site
In this hands-on activity (initially done as an in-class exercise in 2018), we will code a simple, single page brochure site from scratch using a multi-file SASS development system (that ebraces SASS features such as variables, partials, and nesting) to auto-generate a single-file CSS site that is ready for production. The end product, a single “compiled” style.css file, will be minified and ready for production. The new “Sassy CSS” system (a scss folder with partials) and new workflow (using a local dev environment with a pre-processor) will provide a faster, more efficient way to write cleaner, more maintainable code that is re-usable and a more powerful, flexible way to export and deploy project styles.
In this hands-on activity (initially done as an in-class exercise in 2017), we will work backwards: using a stylesheet for a small brochure site, we will convert a single-file CSS system into an organized multi-file SASS system. The end product, a “compiled” style.css file, should be no different than it was in the beginning. However, the new organizational system (scss folder with partials) and new workflow (using a local dev environment) will provide a faster, more efficient way to write code, a cleaner, more maintainable code base that is re-usable, and a more powerful, flexible way to export and deploy project styles.
Outcomes:
- Spin up a local web server from a dev environment (as opposed to using an IDE)
- Auto-reload a browser whenever a file is saved without a manual refresh.
- Auto-compile SASS (via a compiler/task manager that watches for changes)
- Use SASS features to set up a modular style base for a small site (using SASS partials)
Steps:
- Setup a local front-end web development environment to compile SASS. In this step, we will use a Prepros, a GUI-based front-end compiler. In another lesson, we will use Gulp.
- Establish a custom organizational file system using SASS partials that embraces best practices and strategies from popular CSS methodologies (e.g. SMACSS).
- Convert the CSS to SASS by reverse engineering the original, singular CSS file and separating it into a modular system of multiple SASS partial files. The new SCSS files will embrace SASS features to improve the coding experience, such as variables and nesting.
Step One
Download Starter Files
- You can start with your own static base (e.g. in a previous lesson, you might have already created a static “My Base 1.0” based on Site Base 1.0) that you already may have already created on your own. If not, you can download the provided sitebase1.zip or sitebase-static-css.zip and expand it in a local folder on your computer
- Rename the project folder to sitebase-sassy
- Rename style.css to style-orig.css
- Create a new folder named “scss”
- Inside of scss, create a new file names style.scss
- Add a $text-color variable and set the body color to the variable
- Inside of scss, create a new file names style.scss
Setup a Local Environment using Prepros
- Add sitebase-sassy project into prepros (drag & drop folder)
- Use PrePros to “watch” your scss folder
- Test PrePros’s SASS compiling by editing style.scss
- Ensure that a new style.css file is being auto-compiled and that the text turns red
- Use PrePros to “preview” your site by spinning up a local web server
Step Two
Create SASS Partials
- Inside of your scss folder, create a new folder named “partials”
- In your editor, open up style-orig.css for reference (e.g. on the right)
- Open up style.scss (e.g. on the left)
- We are going to take css from the right and copy-paste it into new .scss files that we will create from scratch.
Link SASS Partials via @import
- Change the root stylesheet (style.scss) to import base (_base.scss)
- @import “base”;
- Note: the @import statement does not include the underscore “_”
- optional: add site-specific comments after the base
- @import “base”;
- Create, then import all partials into “base”
- Start by creating/adding variables (_variables.scss)
- Then import it into base
- @import “variables”;
- Order of files to create/add/import into base:
- base.scss
- @import “variables”;
- @import “partials/toc-base”;
- @import “partials/html5”;
- @import “partials/typography”;
- @import “partials/media”;
- @import “partials/components”;
- @import “partials/layout”;
- @import “partials/structure”;
- @import “partials/site-navigation”;
- @import “partials/site-navigation-togglenav”;
- base.scss
In the end, your project folder look like this:
sitebase-sassy/
└── css/
├── style.css (compiled/generated - OK to delete to test)
└── scss/
├── style.scss
├── _variables.scss
├── _base.scss
├── partials/
├── _toc-base.scss
├── _html5.scss
├── _typography.scss
├── _media.scss
├── _components.scss
├── _layout.scss
├── _structure.scss
├── _site-navigation.scss
├── _site-navigation-togglenav.scss You can also reference the folder structure and list of partial SCSS files via the end/completed lesson files here:
Step Three
Copy & Paste from CSS to SCSS
- Working from the top to the bottom, copy and paste css from style.css into the appropriate scss partial files.
- As you copy and paste, convert the CSS to SCSS to embrace the following SASS features:
- Variables: create new variables for any duplicate values
- Nesting: nest and indent selectors when appropriate
- Test as you code
Customize
When you are done, you are welcome to customize this base and make it your own. For example, if you saved your static version as “My Base 1.0” then consider naming this new base to “My Base 2.0” and uploading it to github for future reference. Here are two such repositories from John Doe:
- John Doe’s My Base 1.0
- John Doe’s My Base 2.0
Go Further by Creating a Framework
You can also use your Sassy Base to create a “starter framework” for either yourself or for a client project.
Related Reading
- How to structure a Sass project
- SMACSS: Scalable and Modular Architecture for CSS
- BEM: Blocks, Elements and Modifiers
Lesson Resources:
- Throughout this lesson, you can reference the start/beginning and end/completed lesson files here:
- You can also download the following archives (.zip files) of the lesson files here: