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-repeat
Permite 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; }
By Miguel Angel Gordian
Software Engineer.
