A collection of hand-picked Sass style guides.

Sass Style Guides

A collection of hand-picked Sass style guides.

Related Articles

  1. HTML / CSS Style Guides
  2. JavaScript Style Guides
  3. React Style Guides

Demo image: Sass Guidelines

Date

Author

Hugo Giraudel

About a style guide

Sass Guidelines

An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch.

Demo image: The Ultimate Sass Style Guide

Date

Author

Tommy Coppers

About a style guide

The Ultimate Sass Style Guide

The root of a code style is about authorship and presentation rather than function and performance. A considerable amount of time goes into developing a style. Sometimes an engineer will seek out guides, memorize patterns, and write love songs about their beloved methodology. Others might just happen upon their own way of doing things based off of years (or minutes) of developing and organizational preferences. But if styles are purely aesthetic, why do we get so upset when someone disagrees with how we’ve written our code?

Demo image: Sass Coding Guidelines

Date

Author

BigCommerce

About a style guide

Sass Coding Guidelines

Bigcommerce uses Sass for style generation. Bigcommerce's naming conventions are heavily influenced by the SUIT CSS framework and align closely to Medium's thoughts on CSS. Which is to say, it relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This helps to work around the current limits of applying CSS to the DOM (i.e., the lack of style encapsulation), and to better communicate the relationships between classes.

Demo image: Sass Style Guide

Date

Author

Chris Coyier

About a style guide

Sass Style Guide

With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I've been gravitating toward. Perhaps they are useful to you or help you formulate ideas of your own. If you're looking for more examples, Sass Guidelines is another good place to look.

Demo image: Sass Style Guide: A Sass Tutorial on How to Write Better CSS Code

Date

Author

Matias Hernandez

About a style guide

Sass Style Guide: A Sass Tutorial on How to Write Better CSS Code

Writing consistent and readable CSS that will scale well is a challenging process. Especially when the style sheets are getting larger, more complex, and harder to maintain. One of the tools available to developers to write better CSS are preprocessors. A preprocessor is a program that takes one type of data and converts it to another type of data, and in our case CSS preprocessors are preprocessing languages which are compiled to CSS. There are many CSS preprocessors that front-end developers are recommending and using, but in this article we will focus on Sass. Let’s see what Sass has to offer, why it is a preferable choice over other CSS preprocessors, and how to start using it in the best way.

back to top