padrão de declaração de elemento usando pré-processadores

.element{
// properties
width
: 100%;
height
: 50px;
// mixins
.verticalGradient(#ffffff, #000000);
.boxSizing();

// modifiers
&.small{
width
: 50%;
height
: 25px;
}
&.disabled{
background
: #f5f5f5;
}

//pseudo-class
&:hover{}
&:focus{}
&:active{}

// pseudo-elements
&:after{}
&:before{}
&:first-child{}
&:last-child{}

// children's
header
{}
footer
{}
.content{}
}