I am a huge fan of SASS (Syntactically Awe-inspiring Stylesheets) for styling Rails applications. I have been using it on all of my projects for quite a while now and have developed some fantastic techniques with the intention of make it much simpler to organize, write, and scan stylesheets in an application.
Unlike HAML, SASS retains most of the constant “feel” when prose the code as vanilla CSS. It austerely adds extra power and better organizational tools, making it an straightforward extent as a go-to substitution. You can teach someone the basics of SASS in about 30 seconds: use two spaces to indent everything, place the colon before the declaration and no semicolon afterwards. In fact, I’ve even written fixed expressions to convert CSS to SASS involuntarily in some cases. It’s straightforward to pick up and once you do you will start reaping genuine benefits.
The 20-Second “Get Up And Running”
To use SASS, you must have the HAML gem installed on your Rails app. Add it to your environment.rb:
- config.gem ’haml’, :translation => ’>= 2.0.6′
config.gem 'haml', :translation => '>= 2.0.6'
Now you can make SASS stylesheets austerely by making .sass files in a broadcast/stylesheets/sass pointer.
Vital Example: Building a Menu the SASS Way
The best way to start amplification the power of SASS may be owing to one of the extra common styling tasks one encounters: styling a menu. Here we’ll take upon physically a menu structure like this:
- <ul id=’menu’>
- <li><a href=’/'>Family</a></li>
- <li><a href=’/about’>About</a></li>
- <li><a href=’/services’>Services</a></li>
- <li><a href=’/contact’>Contact</a></li>
- </ul>
<ul id='menu'> <li><a href='/'>Family</a></li> <li><a href='/about'>About</a></li> <li><a href='/services'>Services</a></li> <li><a href='/contact'>Contact</a></li> </ul>
To style this menu in CSS, we might do something like this:
- #menu {
- margin: 0;
- catalog-style: not any;
- }
- #menu li {
- float: missing;
- }
- #menu li a {
- show: try out;
- float: missing;
- padding: 4px 8px;
- copy-decoration: not any;
- social class: #2277aa;
- affect: colorless;
- }
#menu {
margin: 0;
catalog-style: not any;
}
#menu li {
float: missing;
}
#menu li a {
show: try out;
float: missing;
padding: 4px 8px;
copy-decoration: not any;
social class: #2277aa;
affect: colorless;
}
SASS allows you to use indentation to indicate hierarchy, reduction much repetition and space. The constant code in SASS looks like this:
- !menu_bg = #2277aa
- #menu
- :margin 0
- :catalog-style not any
- li
- :float missing
- a
- :show try out
- :float missing
- :padding 4px 8px
- :copy-decoration not any
- :affect colorless
- :social class = !menu_bg
!menu_bg = #2277aa
#menu
:margin 0
:catalog-style not any
li
:float missing
a
:show try out
:float missing
:padding 4px 8px
:copy-decoration not any
:affect colorless
:social class = !menu_bg
Hierarchical selectors mean with the intention of if you indent something, the selector it falls under will involuntarily be prepended to it, so the two examples above breed the constant output. You’ll also notice !menu_bg in the SASS code. SASS allows you to announce constants with the intention of can be reused throughout the code, a very helpful feature when dealing with colors.
Now we have our vital setup for the menu, but let’s handle some better cases. I aspire the affect to change when I hover finished the menu options and I aspire to highlight the current menu option (we’ll take upon physically with the intention of the <li> encapsulating the current menu piece will have class ‘current’ when it is elected). Let’s add these facial appearance initially using CSS, at that time SASS. With CSS:
- #menu {
- margin: 0;
- catalog-style: not any;
- }
- #menu li {
- float: missing;
- }
- #menu li a {
- show: try out;
- float: missing;
- padding: 4px 8px;
- copy-decoration: not any;
- social class: #2277aa;
- affect: colorless;
- }
- #menu li a:hover {
- social class: #116699;
- }
- /* Make guaranteed the affect doesn’t change when the current option is hovered. */
- #menu li.current a, #menu li.current a:hover {
- social class: colorless;
- affect: black;
- }
#menu {
margin: 0;
catalog-style: not any;
}
#menu li {
float: missing;
}
#menu li a {
show: try out;
float: missing;
padding: 4px 8px;
copy-decoration: not any;
social class: #2277aa;
affect: colorless;
}
#menu li a:hover {
social class: #116699;
}
/* Make guaranteed the affect doesn't change when the current option is hovered. */
#menu li.current a, #menu li.current a:hover {
social class: colorless;
affect: black;
}
This isn’t too terrible, but our selectors protect getting longer and longer. Let’s look at the constant business in SASS.
- #menu
- :margin 0
- :catalog-style not any
- li
- :float missing
- a
- :show try out
- :float missing
- :padding 4px 8px
- :copy-decoration not any
- :affect colorless
- :social class = !menu_bg
- &:hover
- :social class = !menu_bg - #111111
- &.current
- a, a:hover
- :social class colorless
- :affect black
#menu
:margin 0
:catalog-style not any
li
:float missing
a
:show try out
:float missing
:padding 4px 8px
:copy-decoration not any
:affect colorless
:social class = !menu_bg
&:hover
:social class = !menu_bg - #111111
&.current
a, a:hover
:social class colorless
:affect black
The ampersand (&) in SASS is a shortcut to insert the entire parent selector at with the intention of point. By using &.current I am adage “the parent selector with a class of current.” &:hover earnings “the parent selector when hovered.” This makes it straightforward to write complicated selectors in a compact, straightforward-to-scan manner.
A additional fantastic business about SASS is it has built in CSS affect math. Annotation where I declared :social class = !menu_bg - #111111. With the intention of is corresponding to subtracting 1 from all of the values of the constant’s affect, which in this case yields #116699. This is fantastic, since now I can change the affect of the menu and the hover disorder will involuntarily change without me having to manually find it and recalculate it for a new affect. Annotation with the intention of when you are using constants or performing calculations you call for to add the equals sign to your declaration.
Getting organized with a master.sass
A additional way you can use SASS is to organize all of your CSS into a release file without having to agonize about it in your view. I have recently started using this approach for a number of reasons:
- It allows me to control stylesheet inclusion from within the stylesheets themselves, making the structure extra readable.
- I can define global colors with the intention of can at that time be used in any of the child stylesheets.
- It’s really straightforward!
In a new project, I permanently make a master.sass with the intention of will look something like this:
- // Define app-specific colors initially
- !green = #191
- !gray = #555
- // Now define globally applicable, all-function styles
- body
- :font-family Arial, without-serif
- a
- :affect = !green
- :copy-decoration not any
- :font-weight bold
- // Now import all of your other SASS files, they will be
- // involuntarily included in the constant generated CSS file
- // at compile time.
- @import menu.sass
- @import content.sass
- @import admin.sass
- @import users.sass
// Define app-specific colors initially !green = #191 !gray = #555 // Now define globally applicable, all-function styles body :font-family Arial, without-serif a :affect = !green :copy-decoration not any :font-weight bold // Now import all of your other SASS files, they will be // involuntarily included in the constant generated CSS file // at compile time. @import menu.sass @import content.sass @import admin.sass @import users.sass
Using this structure I have a modular, easily expandable collection of stylesheets with global affect constants and vital styles. In addition, I can add this to my Rails application with the simplest of calls:
- <%= stylesheet_link_tag ’master’ %>
<%= stylesheet_link_tag 'master' %>
Wrapping Up
Hopefully this gives you a taste of the straightforward awesomeness with the intention of is possible with SASS. The utmost business about the library is you don’t drop touch with prose CSS since SASS is CSS, just with a few extras and shortcuts to make power-styling simpler.
Update: A commenter pointed out with the intention of I forgot the @ before my import statements in the master.sass example, this has been fixed.
