Сделать цвет темнее/светлее на 10%
*
background: #999 * 0.9
color: #999 * 1.1
& - это ссылка на всё собрание родителей для текущего блока. Её можно использовать и перед и после определения селектора.
.baz
&:hover
color : red
a &
color : blue
.baz:hover {
color: red; }
a .baz {
color: blue; }
Расширить селектор свойствами из других классов
.error
border: 1px #f00
background-color: #fdd
.attention
font-size: 3em
background-color: #ff0
.seriousError
@extend .error
@extend .attention
border-width: 3px
.error, .seriousError {
border: 1px red;
background-color: #ffdddd; }
.attention, .seriousError {
font-size: 3em;
background-color: yellow; }
.seriousError {
border-width: 3px; }
Используем циклы при определении классов
@for $i from 1 through 3
.item-#{$i}
width: 2em * $i
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }