| CARVIEW |
Select Language
HTTP/2 302
server: nginx
date: Wed, 24 Dec 2025 16:45:34 GMT
content-type: text/plain; charset=utf-8
content-length: 0
x-archive-redirect-reason: found capture at 20100212164710
location: https://web.archive.org/web/20100212164710/https://sass-lang.com/
server-timing: captures_list;dur=0.688982, exclusion.robots;dur=0.041394, exclusion.robots.policy;dur=0.029219, esindex;dur=0.012367, cdx.remote;dur=56.241328, LoadShardBlock;dur=163.162199, PetaboxLoader3.datanode;dur=103.401793, PetaboxLoader3.resolve;dur=7.717530
x-app-server: wwwb-app223-dc8
x-ts: 302
x-tr: 286
server-timing: TR;dur=0,Tw;dur=0,Tc;dur=0
set-cookie: wb-p-SERVER=wwwb-app223; path=/
x-location: All
x-as: 14061
x-rl: 0
x-na: 0
x-page-cache: MISS
server-timing: MISS
x-nid: DigitalOcean
referrer-policy: no-referrer-when-downgrade
permissions-policy: interest-cohort=()
HTTP/2 200
server: nginx
date: Wed, 24 Dec 2025 16:45:35 GMT
content-type: text/html
x-archive-orig-date: Fri, 12 Feb 2010 16:47:10 GMT
x-archive-orig-server: Apache/2.2.4 (Ubuntu) PHP/5.2.3-1ubuntu6.4 mod_ssl/2.2.4 OpenSSL/0.9.8e Phusion_Passenger/2.2.5
x-archive-orig-last-modified: Tue, 09 Feb 2010 19:48:43 GMT
x-archive-orig-etag: "bcc3f-1f3a-3482fcc0"
x-archive-orig-accept-ranges: bytes
x-archive-orig-content-length: 7994
x-archive-orig-vary: Accept-Encoding
x-archive-orig-connection: close
x-archive-guessed-content-type: text/html
x-archive-guessed-charset: utf-8
memento-datetime: Fri, 12 Feb 2010 16:47:10 GMT
link: Sass - Syntactically Awesome Stylesheets
Sass
gem install haml
css2sass
style.css style.sass
sass
style.sass style.css
Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.
“Using SASS has not only improved my CSS, but also the page structure/layout, and decreased IE headaches. Super highly recommended.” - Matt Darby
“If I were to write a post about how much Haml and Sass have changed the way I develop for the web … I’d write an elaborate sonnet about how Sass makes CSS almost usable for developers who like to keep things DRY.” - Jack Canty, Hoopla!
“I am a huge fan of Sass (Syntactically Awesome Stylesheets) for styling Rails applications. I have been using it on all of my projects for quite a while now and have developed some great techniques that make it much easier to organize, write, and read stylesheets in an application. … Sass retains most of the same “feel” when writing the code as vanilla CSS. It simply adds more power and better organizational tools, making it an easy choice as a go-to replacement.” - Michael Bleigh, Intridea
Beauty
Sass does away with the unnecessary brackets and semicolons of CSS. Properties are nested beneath selectors, and each property gets its own line.
// Sass h1 height: 118px margin-top: 1em .tagline font-size: 26px text-align: right
/* CSS */
h1 {
height: 118px;
margin-top: 1em;
}
.tagline {
font-size: 26px;
text-align: right;
}
Nesting
Sass avoids repetition by nesting selectors within one another. The same thing works with properties.
// Sass
table.hl
margin: 2em 0
td.ln
text-align: right
li
font:
family: serif
weight: bold
size: 1.2em
/* CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
Variables
Use the same color all over the place? Need to do some math with height and width and text size? Sass supports variables as well as basic math operations.
// Sass !blue = #3bbfce !margin = 16px .content_navigation border-color = !blue color = !blue - #111 .border padding = !margin / 2 margin = !margin / 2 border-color = !blue
/* CSS */
.content_navigation {
border-color: #3bbfce;
color: #2aaebd;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
Mixins
Even more powerful than variables, mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments.
// Sass
=table-scaffolding
th
text-align: center
font-weight: bold
td, th
padding: 2px
=left(!dist)
float: left
margin-left = !dist
#data
+left(10px)
+table-scaffolding
/* CSS */
#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}