Sass - Error Directives

Description

The @error directive displays the SassScript expression value as fatal error.

Example

Given below is the stylesheet file saved with extension .scss, which is similar to the css file.

warn.scss

$colors: (
   blue: #c0392b,
   black: #2980b9,

);

@function style-variation($style) {
   @if map-has-key($colors, $style) {
      @return map-get($colors, $style);
   }

   @error "Invalid color: '#{$style}'.";
}

.container {
   style: style-variation(white);
}

You can tell SASS to watch the file and update the CSS whenever SASS file changes, by using the following command −

sass --watch C:\ruby\lib\sass\warn.scss:warn.css

When you run the above command, it will create the error.css file automatically. Whenever you change the SCSS file, the error.css file will get updated automatically.

Output

Let's carry out the following steps to see how above code works and gives errors −

• Save the above given code in error.scss file.

• Run the above mentioned command line in the command prompt.