Sass Color Variables That Don’t Suck. One of the best reasons to use Sass is variables. They help keep your code DRY, which makes it easy to maintain and change. However, with colors, it’s easy for your variables to get out of hand. In this article, I’ll show you an quick, easy method to wrangle your color variables. The Problem Let’s say you have the following CSS: If you decide to use a different color than #b0eb00, you have to change it in multiple places. Now, it’s easy to change the value of $yellow-green everywhere. As you accumulate color variables, you may decide to stick them in in their own file. $yellow-green: #b0eb00; $gray: #595959; $dark-gray: #363636; $light-gray: #a6a6a6; Over time, this file grows until you end up with a mess.
Every time you add a new color, it becomes more difficult to find a name for it. A Bad Solution That Does Not Work You’ve felt the pain of your color variables and decided to refactor. At least now it’s obvious what the variables are by looking at them. Another Solution That Doesn’t Work. Compass Home | Compass Documentation. Scout - Compass and Sass without all the hassle.
SassMeister | The Sass Playground! The Sass Way. File: README — Sass Documentation. Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin. Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax.
This means that every valid CSS stylesheet is valid SCSS as well. The second, older syntax is known as the indented syntax (or just "Sass"). Using Sass can be used from the command line or as part of a web framework. Gem install sass After you convert some CSS to Sass, you can run sass style.scss to compile it back to CSS. Sass --help To install Sass in Rails 2, just add config.gem "sass" to config/environment.rb. Sass can also be used with any Rack-enabled web framework. Require 'sass/plugin/rack'use Sass::Plugin::Rack to config.ru. To use Sass programmatically, check out the YARD documentation. Formatting Sass has two syntaxes. Nesting. Sass: Syntactically Awesome Style Sheets. Getting started | Less.js.