Guia de referencia
Un simbolo de pesos es requerido al inicio del nombre de la función.
El simbolo `:` es usado para asignación de valores.
$colores: #000:
$medida: 20px;
$keyword: default;Permite substituir la variable por su valor.
$value: another-class;
.#{$value} {
...
}Los selectores pueden estar anidados dentro de otros selectores.
.profile {
&__image {
}
}Existen operadores de tipo aritmetico, logico y de comparación. https://www.sitepoint.com/sass-basics-operators/
$has-many-languages: true;
$transalate: not $has-many-languages;
$base-color: rgba(127, 82, 12, 0.6);
$main-color: $base-color + rgba(34, 0, 0, 0.4);Soporta las estructuras de control @if, @for, @each y @while. http://thesassway.com/intermediate/if-for-each-while
$list: adam john wynn mason kuroir
=author-images
@each $author in $list
.photo-#{$author}
background: image-url("avatars/#{$author}.png") no-repeatPermite agregar logica y calculación. Soportado a partir de la función 3.1
@function my-calculation-function($some-number, $another-number){
@return $some-number + $another-number
}Permite extender la funcionalidad basada en la declaración de otras reglas.
.selector-A {
@extend .selector-B;
unicorn: true;
}
.selector-B {
rainbow: true;
}Permite reusar fragmentos de código, ademas de la posibilidad de refinarlos o modelarlos por medio de parametros..
$font-base: 12px;
@mixin sample {
font-size: $font-base;
}
p {
@include sample;
}