How to print variable to the terminal in SASS ?

SASS has three methods of providing an output on the terminal or console of the user.

Note: The output may vary from implementation to implementation and compiler to compiler.

  • Using @error rule: When writing mixins and functions that take arguments, you usually want to ensure that those arguments have the types and formats your API expects. If they aren’t, the user needs to be notified and your mixin/function needs to stop running.

    Sass makes it easy with the @error rule, which is written @error . It prints the value of the expression (usually a string) along with a stack trace indicating how the current mixin or function was called. Once the error is printed, Sass stops compiling the stylesheet and tells whatever system is running it that an error occurred.

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    This is what the compiler will look like in 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
    
  • Using @warn rule: When writing mixins and functions, you may need to avoid users from passing some arguments or values. They may be passing legacy arguments that are now deprecated, or they may be calling your API in a way that is not quite optimal.
    The @warn rule is designed just for this. It’s written @warn and it prints the value of the expression (usually a string) for the user, along with a stack trace indicating how the current mixin or function was called. Unlike the @error rule, though, it doesn’t stop Sass entirely.

    Example: SASS file

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output: CSS file

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

    This is what the compiler will look like in Dart CSS:

    Warning: Unknown property webkit.
        example.scss 6:7   property()
        example.scss 16:3  root stylesheet
    
  • Using @debug rule: Sometimes its useful to see the value of a variable or expression while you’re developing your stylesheet. That’s what the @debug rule is for: it’s written @debug, and it prints the value of expression, along with the filename and line number.

    Example: SASS

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    This is what the compiler will look like in Dart CSS:

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

Note: You can pass any value to @debug, not just a string! It prints the same representation of that value as the meta.inspect() function.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.