What is SASS?

Examples: Mixins
CSS

#data {
float: left;
margin-left: 10px;
}
#data th {
text-align: center;
font-weight: bold;
}
#data td, #data th {
padding: 2px;
}

Examples: Selector Inheritance

SCSS

.error {
border: 1px #f00;
background: #fdd;
}
.error.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
@extend .error;
border-width: 3px;
}

SASS

.error
border: 1px #f00
background: #fdd
.error.intrusion
font-size: 1.3em
font-weight: bold
.badError
@extend .error
border-width: 3px

Examples: Selector Inheritance
CSS


.error, .badError {
border: 1px #f00;
background: #fdd;
}
.error.intrusion,
.badError.intrusion {
font-size: 1.3em;
font-weight: bold;
}
.badError {
border-width: 3px;
}





Examples: Conditional Statements
SASS


=views-row($margin: $baseline, $divide: false,
$border_color: #CCC)
+pie-clearfix
@if $divide
border-bottom: 1px solid $border_color
margin-bottom: $margin * 0.5
@else
margin-bottom: $margin * 0.5
p
&:last-of-type
margin-bottom: 0
#main-content .item
+views-row($baseline, true, $brand_blue)