Skip to content

Instantly share code, notes, and snippets.

@jwashke
Last active April 13, 2016 00:21
Show Gist options
  • Save jwashke/1c7a77acf96ba5ae387e3bcbb4285f78 to your computer and use it in GitHub Desktop.
Save jwashke/1c7a77acf96ba5ae387e3bcbb4285f78 to your computer and use it in GitHub Desktop.

Sass

Whats wrong with CSS?

  1. Its very repetitive
  2. its organization is a mess
  3. changing one thing like the color or font can be a nightmare

How you can dry up your code with just a little bit of Sass

Variables
  • Set important values like like colors and font stacks to variables. Now if you want to change the color or just see how another one looks, you change one value, instead of 20.
Nesting
  • DRYer in sass without repeating parent classes or selectors repeatedly
  • Indentation style much cleaner and more similar to the Ruby and html we are used to.
Extend
  • Inheritance for CSS
  • Eliminate throwing more classes into your html, instead of a button and button-warning class, just have button warning extend button in your CSS
Import
  • Break out your stylesheets into smaller partials to aide in organization
  • CSS supports importing, but each import is a seperate HTTP request slowing down your app.
  • partials begin with an underscore like in ERB, and are instead preprocessed into your main css file requiring no extra requests

Why you should use it

  • Built into Rails asset pipeline, it does all the work for you.
  • .scss syntax supports css, so you can transition slowly writing regular css in the same file
  • Your stylesheets could be written in a language thats Turing complete (CSS3 might be turing complete as well, I'm not sure)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment