Home/ Questions/Q 8268589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T05:56:30+00:00

I have an existing Django project which uses regular CSS. The style sheets are

  • 0

I have an existing Django project which uses regular CSS. The style sheets are broken up by functionality, so there is a nav.css, course.css, default.css, reset.css, etc. All of these are imported in a main.css, which is referenced from the html pages.

I would like to use Compass in this project so I can make the style sheets more manageable and also make it easy to skin the UI.

Before checking out Compass, I looked into Sass, and created .scss files for all my style sheets.

Now I realize that it may be better to use Compass than just Sass, because I will get all the default styles that come with it. However, I am a bit confused about how to start the refactoring process.

What would be the right process to refactor (in baby steps) an existing project which already has its styles defined, to get it to use Compass?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Much of the refactoring work is the same with or without Compass and you’ll see the benefits that Sass offers sooner than those of Compass.

    Compass creator Chris Eppstein did a write-up of how he went about refactoring digg’s CSS. To sum up:

    1. Extract partials. You’re well on your way with this one, since you already have separate stylesheets for different functionality. Go further and pull out independent sets of rules to make them easier to manage and break down the refactoring project into smaller steps.

    2. Analyze styles. Look for repeating patterns and inheritance relationships in your new partials. Wherever you have selector duplication could be a good place to start the next step.

    3. Extract base classes. This is where you DRY up your CSS with @extend. Pull out duplicated declarations into a base class and extend.

    4. Apply nesting. Nesting is a great Sass feature to make your stylesheets easier to read.

    5. Extract mixin. If you found common styling patterns in step 2, this is the time to extract them into mixins.

    Now you can really start taking advantage of Compass and its reusable patterns. Familiarity with the Compass documentation will help to identify which of the mixins are applicable to your project.

    • 0