SCSS (Sassy CSS) is Sass version 3.
Sass gives variables, mixins, nesting and selector inheritance.
"The new main syntax" for Sass builds on the existing syntax of CSS. It uses brackets and semi-colons just like CSS. It doesn't care about indentation levels or white-space. In fact, Sass's SCSS syntax is a superset of CSS -- which means SCSS contains all the features of CSS, but has been expanded to include the features of Sass as well.
Variables
$primary-color: #333;
body {
color: $primary-color;
}
CSS result:
body {
color: #333;
}
Nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
CSS result:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Import
/* _reset.scss */
html,
body {
margin: 0;
padding: 0;
}
/* base.scss */
@import 'reset';
body {
background-color: #efefef;
}
CSS result:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #efefef;
}
Mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
CSS result:
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
Extend/Inheritance
.message {
border: 1px solid #ccc;
}
.success {
@extend .message;
border-color: green;
}
CSS result:
.message, .success {
border: 1px solid #cccccc;
}
.success {
border-color: green;
}
Operators
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
CSS result:
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
Sass function:
@function border_color( $color: yellow ) {
@return desaturate( darken( $color, 25% ), 30% );
}
.box {
$color: #faa;
border: 3px solid border_color( $color );
}
Compass helpers:
.class {
background: image-url('logo.png') no-repeat 0 0;
width: image-width('logo.png');
height: image-height('logo.png');
@include pie-clearfix();
@include box-sizing(content-box);
@include background-image(linear-gradient(top, darken(blue,10%), darken(blue, 5%)));
@include background-image(linear-gradient(top, #fff, #e8e8e8));
@include box-shadow(-2px 0 5px 0 rgba(black, 0.3) inset);
@include box-shadow(-1px 0 0 0 rgba(white,0.2) inset, 1px 0 0 0 rgba(black,0.1) inset);
background: inline-image('logo.png') no-repeat -320px 0px;
@include background-size(image-width('logo.png')/2 image-height('logo.png')/2);
@include background-image(linear-gradient(top, lighten(blue, 23%), darken(blue, 3%)));
@include background-size(contain);
@include background-size(100%);
@include border-radius(2px);
@include opacity(1);
@include transition(opacity 0.5s ease);
@include transition (all 100ms ease-out);
@include opacity(0);
@include transition(none);
}
Compass - proportional size of element with background image:
.class {
height: 0;
padding-top: percentage((image-height('logo.jpg') - 2) / image-width('logo.jpg'));
background: inline-image('logo.jpg') no-repeat 50% 0;
@include background-size(100%);
}
Install Sass (SCSS)
- Install Ruby using Rubyinstaller
- Install Sass via Command Line: 'gem install sass'
- Install Compass via Command Line: 'gem install compass'