Sass @At rules and directives - Part 1

@extend 

While designing a page, there are often cases when one class should have all the styles of another class and its own specific styles. 

Let's say we had two classes for text, one regular and one for emphasized text.

.main {
  color:  black;
  font-size: 12px;
}
.emphasis {
  font-weight: bold;
}

 

This works well enough, but to use the emphasized text, we have to do this:

<div class="main emphasis">

 

Remember, we can use sass to decrease the amount of typing. The @extend directive allows us to have one element inherit the styles of another.

.master {
  color:  black;
  font-size: 12px;
}
.emphasis {
  @extend .master;
  font-weight: bold;
}

 

As you can see, (.emphasis) is included with (.master) and has styles that only applies to emphasized text. To use this class, we have to include the .emphasis class.

.master, .emphasis {
  color: black;
  font-size: 12px;
}

.emphasis {
  font-weight: bold;
}

 

With the help of the @extend directive, we can extend complex selectors, have multiple @extends, chain @extends, and much more.

 

Extend in@media

Since @extend is allowed within @media and other CSS at-rules, it cannot extend selectors that appear outside its at-rule. This is because the extending selector only applies within the given media context. There’s no way to ensure that restriction is preserved in the generated selector without duplicating the entire style rule.

 

SCSS Syntax:

@media screen and (max-width: 600px) {
  .error--serious {
    @extend .error;
    //      ^^^^^^
    // Error: ".error" was extended in @media but used outside it.
  }
}


.error {
  border: 1px #f00;
  background-color: #fdd;
}

 

SASS Syntax:

@media screen and (max-width: 600px)
  .error--serious
    @extend .error
    //      ^^^^^^
    // Error: ".error" was extended in @media, but used outside it.


.error
  border: 1px #f00
  background-color: #fdd

 

@warn 

When writing functions and mixins, you may want to discourage users from passing specific arguments or particular values. Users may be passing legacy arguments that are now deprecated, or they may be calling your API(Application programming interface) in a way that's not quite optimal.

The @warn directive prints the value of a Sass expression(usually a string) to the standard error output stream. It will print the value of the expression as well as the line number of the warning.

Once the error is displayed, syntactically awesome style sheets stop compiling the stylesheet and tell whatever system is running it that an error occurred.

 

SCSS Syntax:

$known-prefixes: webkit, moz, ms, o;


@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if not index($known-prefixes, $prefix) {
      @warn "Unknown prefix #{$prefix}.";
    }


    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}


.tilt {
  // Oops, we typo'd "webkit" as "wekbit"!
  @include prefix(transform, rotate(15deg), wekbit ms);
}

 

SASS Syntax:

$known-prefixes: webkit, moz, ms, o


@mixin prefix($property, $value, $prefixes)
  @each $prefix in $prefixes
    @if not index($known-prefixes, $prefix)
      @warn "Unknown prefix #{$prefix}."


    -#{$prefix}-#{$property}: $value


  #{$property}: $value


.tilt
  // Oops, we typo'd "webkit" as "wekbit"!
  @include prefix(transform, rotate(15deg), wekbit ms)

 

CSS Syntax:

.tilt {
  -wekbit-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  transform: rotate(15deg);
}

 

@error

When writing functions and mixins that take arguments, you usually want to ensure that those arguments have the types and formats your API(Application programming interface)expects. If they aren't, the user needs to be notified, and your function/mixin needs to stop running.

Sass makes this easy with the @error rule written @error <expression>. 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, Syntactically awesome style sheets stop compiling the stylesheet and tell whatever system is running it that an error occurred.

 

SCSS Syntax:

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }


  $left-value: if($property == right, initial, $value);
  $right-value: if($property == right, $value, initial);


  left: $left-value;
  right: $right-value;
  [dir=rtl] & {
    left: $right-value;
    right: $left-value;
  }
}


.sidebar {
  @include reflexive-position(top, 12px);
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.
}

 

SASS Syntax:

@mixin reflexive-position($property, $value)
  @if $property != left and $property != right
    @error "Property #{$property} must be either left or right."



  $left-value: if($property == right, initial, $value)
  $right-value: if($property == right, $value, initial)


  left: $left-value
  right: $right-value
  [dir=rtl] &
    left: $right-value
    right: $left-value




.sidebar
  @include reflexive-position(top, 12px)
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.

The error and stack trace format varies from implementation to implementation and depends on your build system. While running from the command line, this is what it looks like in Dart Sass : 

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

Frequently Asked Questions

What are directives in SASS?

Control directives and expressions are used in syntactically awesome style sheets to include styles only under some conditions or to involve the same style several times with variations. Directives are an advanced feature that exists mainly for use in mixins. You might not need to use directives unless you work on a big project.

What do Leaner Style Sheets elements contain?

Leaner Style Sheets elements contain commonly used mixins like:
.rounded
.gradient
.box-shadow
.opacity
.inner-shadow

Which directive is used to detect the errors in Sass?

The @debug directive is used to detect the errors in Sass. It also displays the Sass script expression values to the standard error output stream.  

Do SASS supports inline comments?

In Syntactically Awesome Style Sheets, 
Single line comments // will be taken out by the .scss pre-processor and won't appear in your .css file.
Multiline comments */ are valid CSS, and will be preserved* between the translation from .scss to your .css file.

Conclusion

In this blog, we discussed Sass @at rules and directives in complete detail. We have discussed @imports, @extend, @warn, @error in detail with their syntax.

This blog is Part-I of Sass @At rules and directives.

The remaining topics are covered in the Sass @At rules and directives Part-II.

If you are pursuing a new career in Web Development, we suggest you get your fundamentals crystal clear with our Full Stack Development course. 

Happy Learning, Ninja!