SASS

Guia de referencia

Variables

Interpolación

Anidación

Operaciones

Estructuras de control

Funciones, Herencia y Mixins

Variables

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;

Interpolación

Permite substituir la variable por su valor.

$value: another-class;

.#{$value} {
  ...
}

Anidación

Los selectores pueden estar anidados dentro de otros selectores.

.profile {
  &__image {
  }
}

Operaciones

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);

Estructuras de control

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

Funciones

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
}

Herencia

Permite extender la funcionalidad basada en la declaración de otras reglas.

.selector-A {
    @extend .selector-B;
    unicorn: true;
}

.selector-B {
    rainbow: true;
}

Mixins

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;
}

Referencias

SASS

By Miguel Angel Gordian

Made with Slides.com

SASS

  • 959

More from Miguel Angel Gordian