Selector Inheritance (Using @extend):

.myClass {
color: #ff0000;
margin: 10px; Command Line Commands:
} compass compile
.anotherClass { compass watch
Variables: compass help
@extend .myClass;
$red: #ff0000; compass validate
border: 1px #000 solid; compass version
.myClass {
}
color: $red;
'&': Referencing Parent Selectors
!default: If a variable isn't given a value,
a{
it uses the one set for default Imports for Sass/SCSS
color: #ff0000; (put in .scss file)
$color: #000000;
&:hover {
$color: #ff0000 !default;
color: #666666; Cross-browser CSS3 mixins - includes all:
.myClass { @import "compass/css3.scss";
}
color: $color;
}
} Example of single case usage (In case you
are only using a few CSS3 properties):
Operations: +, -, *, /, % @font-face mixin:
Mixin:
$width: 1000px; @import "compass/css3/font-face"
@mixin myfont ($size, $weight, $family){
.myClass {
font: {
width: $width - 400px;
size: $size;
}
weight: $weight;
family: $family; Config File Properties Youll Want To Know
Interpolation: #{} line_comments = false
} output_style = :compact
$className: samcro;
} (could be: :nested, :expanded, :compact, or
$attr: background;
.myClass { :compressed)
a.#{$className} { #{$attr}-color: #000000 }
@include font(18px, "bold", "Arial,Helvetica,sans-serif");
} Note: You might have to turn off compass watch
@if, @elseif, @else in order for a change to the config to take place.
$type: monster;
Nesting: Go here for more:
p{
http://compass-style.org/docs/tutorials/
@if $type == ocean { configuration-reference/
nav ul { Nested Properties
color: blue;
margin: 0; .myFont {
} @else if $type == matador {
padding: 0; font:{
color: red;
li { family: Arial;
} @else if $type == monster {
list-style: none; size: 14px;
color: green;
display: inline; weight: bold;
} @else {
a{ }
color: black;
color: $red; }
}
}
}
}
}
@for - (@while works similar)
@for $i from 1 through 3 {
.myClass-#{$i} { width: 2px * $i; }
DESIGNS
}
www.jc-designs.net/blog