¿Cómo imprimir variables en el terminal en SASS?

SASS tiene tres métodos para proporcionar una salida en la terminal o consola del usuario.

Nota: El resultado puede variar de una implementación a otra y de un compilador a otro.

• Uso de la regla @error: al escribir mixins y funciones que toman argumentos, generalmente desea asegurarse de que esos argumentos tengan los tipos y formatos que su API espera. Si no lo son, el usuario debe ser notificado y su combinación/función debe dejar de ejecutarse.

  Sass lo hace fácil con la regla @error , que se escribe @error . Imprime el valor de la expresión (generalmente una string) junto con un seguimiento de la pila que indica cómo se llamó a la combinación o función actual. Una vez que se imprime el error, Sass deja de compilar la hoja de estilo y le dice al sistema que lo está ejecutando que ocurrió un error.

  Ejemplo:

  @mixin reflexive-position($property, $value) {   @if $property != top and $property != bottom {     @error "Property #{$property} must be either top or bottom.";   }      $top-value: if($property == bottom, initial, $value);   $bottom-value: if($property == bottom, $value, initial);      top: $top-value;   bottom: $bottom-value;   [dir=rtl] & {     top: $bottom-value;     bottom: $top-value;   } }    .sidebar {   @include reflexive-position(left, 12px); }

  Así es como se verá el compilador en Dart CSS:

  Error: "Property left must be either top or bottom."
    ?
  3 ?     @error "Property #{$property} must be either top or bottom.";
    ?     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ?
    example.scss 3:5   reflexive-position()
    example.scss 19:3  root stylesheet
  

• Uso de la regla @warn: al escribir mixins y funciones, es posible que deba evitar que los usuarios pasen algunos argumentos o valores. Pueden estar pasando argumentos heredados que ahora están en desuso, o pueden estar llamando a su API de una manera que no es del todo óptima.
  La regla @warn está diseñada solo para esto. Está escrito @warn e imprime el valor de la expresión (generalmente una string) para el usuario, junto con un seguimiento de la pila que indica cómo se llamó a la combinación o función actual. Sin embargo, a diferencia de la regla @error , no detiene a Sass por completo.

  Ejemplo: archivo SASS

  $known-properties: webkit, hd;    @mixin property($character, $value, $properties) {   @each $property in $properties {     @if not index($known-properties, $properties) {       @warn "Unknown property #{$property}.";     }        -#{$property}-#{$character}: $value;   }   #{$character}: $value; }    .tilt {   @include property(transform, rotate(30deg), webkit hd); }

  Salida: archivo CSS

  .tilt {
    -webkit-transform: rotate(30deg);
    -hd-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  

  Así es como se verá el compilador en Dart CSS:

  Warning: Unknown property webkit.
      example.scss 6:7   property()
      example.scss 16:3  root stylesheet
  

• Uso de la regla @debug: a veces es útil ver el valor de una variable o expresión mientras desarrolla su hoja de estilo. Para eso es la regla @debug : se escribe @debug e imprime el valor de expresión, junto con el nombre del archivo y el número de línea.

  Ejemplo: SASS

  @mixin inset-divider-offset($offset, $padding) {   $divider-offset: (2 * $padding) + $offset;   @debug "divider offset: #{$divider-offset}";      margin-left: $divider-offset;   width: calc(100% - #{$divider-offset}); }

  Así es como se verá el compilador en Dart CSS:

  test.scss:3 Debug: divider offset: 132px
  

Nota: puede pasar cualquier valor a @debug, ¡no solo una string! Imprime la misma representación de ese valor que la función meta.inspect().