4 COMMENTs
HTML & CSS
Miriam Suzanne, May 30

Jump Start Sass: Architecture in Sass

jsass

The following is a short extract from our recent book, Jump Start Sass, available for free to SitePoint Premium members. Print copies are sold in stores worldwide, or you can order them here. We hope you enjoy this extract and find it useful.

Architecture has always been one of the major pain points in CSS development. Without any variables, control directives, macros, or object inheritance, CSS code tends to be long and repetitive—a single ever-growing file. While it’s technically possible to split plain CSS into multiple files that reference each other with @import, the additional HTTP requests make that a poor solution. As you’ve seen, Sass has an answer for every piece of the architecture puzzle—but what’s the best way to put it all together?

Ask ten experts, and you’ll receive ten different answers—most of them involving (or aided by) Sass. OOCSS, SMACSS, Atomic Design, ITCSS, and BEM are all popular systems for CSS architecture, but there are many more. If you’re using a front-end framework such as Bootstrap or Foundation, there might be some architectural opinions already built in.

These are all solid systems, none of which were designed with your project in mind. CSS architecture is hard, so it’s a mistake to trust any one-size-fits-all solution. There is no “right” answer that works for every team on every project. We’d recommend learning them all, and then mashing together the best parts to create a system that works well for you.

Let’s start with a broad discussion of the building blocks, and then look at the ways we can fit them together.

Multiple Files and Folders

Breaking your code into multiple files is one key advantage to using a preprocessor, and forms the basis of any architecture. With Sass, there’s no harm in breaking your code into the smallest logical units and organizing it into multiple files and folders. We recommend taking full advantage of it.

Sass has bestowed new power on the CSS @import rule, allowing you to combine Sass and CSS files during compilation so they can be sent to the browser as one single file. This is the only place where Sass has stepped on the toes of an existing CSS directive, so it behaves differently in Sass than it did in CSS.

CSS Imports

As mentioned, the CSS @import directive allows you to reference one CSS file from another. Importing is handled by the browser and requires additional HTTP requests—since the importing file has to be parsed before the @import directive is discovered. If you have a chain of files importing each other, those imports will happen in sequence, blocking the document from rendering until all the CSS has loaded. For that reason, most people avoid CSS imports entirely.

Using CSS imports, you can reference another CSS file using relative or absolute paths, even adding a media query rule for conditional imports. Even though Sass provides different functionality under the same at-rule, there are various cases in which Sass will fall back to the vanilla CSS output, such as when:

  • an imported file has a .css extension

  • a filename begins with http:// or https://

  • the filename is a url(..) function

  • @import has any media queries

The following will compile to standard CSS imports, even in Sass:

[code language="css"] @import 'relative/styles.css'; @import 'http://absolute.com/styles.css'; @import url('landscape.css') screen and (orientation: landscape);[/code]

Sass Imports and Partials

Sass imports look similar to CSS imports, but the imported files are compiled into one single output file, as though their contents (including variables, mixins, functions, and placeholders) were copied and pasted into place before compilation. This type of Sass import will only work on files with .sass or .scss extensions, but you can leave the extension off when importing (as long as there are no similarly named files). In fact, we recommend dropping the extension whenever you can, for simplicity. It’s also possible to import multiple files in one command, or import files into a nested context:

8 COMMENTs
HTML & CSS
Hugo Giraudel, May 12

A Tale of CSS and Sass Precision

Hugo covers the options available for web developers in handling CSS precision with percentage values, including using Sass and the native calc function.
HTML & CSS
Gajendar Singh, Apr 19

Data Types in Sass

An overview of the various data types available to developers in Sass, including numbers, booleans, strings, maps, lists and more.
HTML & CSS
Hugo Giraudel, Apr 04

Introducing Our Newest Book: Jump Start Sass

The best way to learn Sass, from Miriam Suzanne and Hugo Giraudel, two of the top experts on the popular CSS preprocessor. 
13 COMMENTs
HTML & CSS
Hugo Giraudel, Mar 09

Cleaning Up a CSS Codebase

Hugo speaks from experience and gives us his personal suggestions on how to deal with a messy codebase, whether it's our own old project or something inherited.
4 COMMENTs
HTML & CSS
Louis Lazaris, Feb 10

Introducing: The Ultimate CSS Survey

Louis Lazaris has put together the definitive survey to gather data on various aspects of CSS. This post features the first part of the three-part survey.
3 COMMENTs
HTML & CSS
Bartłomiej Kozal, Feb 02

Hocus-Pocus: Building a Design-Free Sass Framework

Bartłomiej Kozal discusses the process of building his own Sass Framework, Hocus-Pocus, and the design decisions behind its features.
11 COMMENTs
HTML & CSS
David Nguyen, Jan 19

The Benefits of Inheritance via @extend in Sass

How web developers can use Sass' @extend feature to make their CSS cleaner, well-structured, and easier to maintain.
7 COMMENTs
HTML & CSS
Louis Lazaris, Dec 23

Front-end Tools: Some of My Favorite Finds of 2015

Louis Lazaris has discovered a slew of new tools for front-end developers. In this end-of-year post, he lists some of his favorite finds of 2015.
3 COMMENTs
HTML & CSS
Thomas Greco, Nov 04

A Primer on Using Flexbox with Compass

Thomas Greco provides a run-through of the different features available in Compass to allow you to easily work with flexbox in CSS.
4 COMMENTs
HTML & CSS
James Steinbach, Sep 17

Validating Input in Sass Mixins and Functions

When using other people's Sass code, you might make errors when passing data to mixins and functions. James shows some techniques to avoid this problem.
HTML & CSS
James Steinbach, Aug 26

Using Sass’s @error, @warn, and @debug Directives

James looks at three Sass directives that assist developers in debugging their SCSS code and can also help when working on Sass projects on a team.
2 COMMENTs
HTML & CSS
Hugo Giraudel, Aug 11

Using @error responsibly in Sass

Hugo shows us how we can responsibly use the @error directive in Sass
2 COMMENTs
HTML & CSS
M. David Green, Jul 20

Video: Sass vs SCSS

In this video I'll explain the differences between CSS and SCSS in Sass.
5 COMMENTs
HTML & CSS
Hugo Giraudel, Jul 16

Centering With Sass

Hugo takes some of the well known centering techniques in CSS and shows us how to wrap them in Sass mixins.
HTML & CSS
James Steinbach, Jul 14

Sass Maps vs. Nested Lists

What's best to use in this head-to-head James shows us the strengths and weaknesses of Sass Maps vs. Nested Lists
17 COMMENTs
HTML & CSS
Hugo Giraudel, Jul 09

Structuring CSS Class Selectors with Sass

Hugo Giraudel discusses the various popular ways in CSS that we name and use class selectors and how Sass can help in structuring them.
26 COMMENTs
HTML & CSS
Una Kravets, Jul 07

Atomic OOBEMITSCSS

Una shares with us various CSS methodologies in creating Atomic OOBEMITSCSS
2 COMMENTs
HTML & CSS
M. David Green, Jun 26

Video: Sass Color Palettes

In this video I will show you how to develop a complimentary colour palette using Sass and where it does all the thinking.
HTML & CSS
M. David Green, Jun 25

Videos: Making Sass Variables Work for You

Variables allow you to use data over and over again throughout your CSS files. In this video I'll teach you about how to use variables in your projects.
6 COMMENTs
HTML & CSS
Hugo Giraudel, Jun 25

Getting Started With SCSS-Lint

Hugo shows us how we can get started with SCSS-Lint to help write better Sass and CSS.
2 COMMENTs
HTML & CSS
Hugo Giraudel, Jun 24

Introducing the SitePoint Sass Reference

Today, we're launching a new reference on Sass, right here on SitePoint.
2 COMMENTs
HTML & CSS
Hugo Giraudel, Jun 23

Testing a Sass Library

Hugo shows us how we can use Sassy Tester and gulp to help us when testing a Sass library.
HTML & CSS
David Khourshid, Jun 18

Creating Tests for Your Sass Framework

David Khourshid shows us how to use True when your creating tests for your Sass framework.