drawbacks of SASS?Ans: The main drawbacks of SASS are:

Sass @At rules and directives

Q: Which directive is used to convert multiple Sass into single or multiple CSS files?

Ans: Like Cascading Style Sheets, Sass also supports the @import directive. The @import directive allows you to include the content of one file in another.

Q: Which directive includes media rules in the stylesheet @warn @import @media at the root?

Ans: Sass @media directive sets style rules for different media types. Syntactically awesome style sheets both support and extend the @media rules. The @media directive can be nested inside the selector SASS, but the significant impact is displayed to the top level of the stylesheet.

Q: What do you understand by variable interpolation in SASS?

Ans: Interpolation is a new principle, and it is widely used in SASS. It refers to an insertion process. It allows users to interpolate SASS expressions into a basic SASS or CSS code. This means we can define selector name, quoted or unquoted strings, property name, CSS at-rules, etc., as a variable. We can interpolate an expression using __#{variable-name }__.

Introduction

This blog is Part-II of Sass @At rules and directives. We have already covered the introduction of the Sass @at rules and directives in our previous blog.

In this blog, we will discuss @use, @function, @debug, @at-root, @forward, and @Mixin & @include in detail with their syntax. Let’s start with a brief introduction to the topic.

The Sass @At Rules and directives in syntactically awesome style sheets are backbone features that you should at least know about, particularly when it concerns the @import rule. Some of these @-rules are extensions of Cascading Style Sheets(CSS) @-rules, while others are Sass-specific directives. Either way, you should know what these rules are for and how they work if you will be working with Sass.

What is Sass @media Directive?

The Sass @media directive is a feature that allows you to write CSS rules that apply only under specific conditions, typically based on characteristics of the viewing device such as screen size, orientation, resolution, or other media features. This enables you to create responsive designs by styling elements differently based on the device's capabilities or the user's preferences.

When using the @media directive in Sass, you can nest CSS rules within it, just like you do with other control directives such as @if or @for. This nesting makes your code more organized and easier to maintain, especially when dealing with complex media queries.

Sass @media Directive Example

Here is the Sass @media Directive example:

.container {
 width: 100%;
 @media screen and (min-width: 768px) {
   width: 80%;
 }
 @media screen and (min-width: 1024px) {
   width: 60%;
 }
}

Explanation: In this example, the .container class sets its width to 100% by default, but adjusts it to 80% when the screen width is at least 768px and further reduces it to 60% when the screen width is at least 1024px.

@use

SASS @use at-rule is used to load functions, mixins, and variables defined in other stylesheets in your stylesheet.

Same as @import, the @use rule enables us to break our stylesheet into more practical, smaller stylesheets and load them inside other stylesheets using the SASS @use at-rule.

The simplest @use rule is written @use "<url>", which loads the module at the given URL.

The main difference is how you access the members of the original file. To do this, you will need to refer to the namespace of the original file.

We can define SASS functions and mixins in a separate stylesheet file, and variables with default values in a separate stylesheet file. Then, in the main stylesheet, we can use the SASS @use at-rule to use the functions, mixins, variables, etc defined in other stylesheets.

SCSS Syntax:

//foundation/_code.scss
code {
  padding: 0.25em;
  line-height: 0;
}

//foundation/_lists.scss
ul,
ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

//style.scss
@use "foundation/code";
@use "foundation/lists";

SASS Syntax:

//foundation/_code.sass
code
padding: .25em
line-height: 0



//foundation/_lists.sass
ul,ol
text-align: left


& &
padding:
bottom: 0
left: 0


//style.sass
@use 'foundation/code'
@use 'foundation/lists'

CSS Syntax:

code {
  padding: 0.25em;
  line-height: 0;
}

ul,
ol {
  text-align: left;
}
ul ul,
ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

Sass @use: Namespace

When we include some stylesheets into our stylesheet using the @use at-rule, then the stylesheet's name (filename), which is included, acts as the namespace without the extension.

To access the mixins variables and functions from another stylesheet(module) which is included in your stylesheet using the @use at-rule, we must follow the following syntax:

Where <namespace> is the namespace, which means the filename of the stylesheet included.

Syntax:

<namespace>.<variable>
/* or  */
<namespace>.<function>()
/* or  */
@include <namespace>.<mixin>()

Let's have an E.g., if we have the following stylesheet with name round.sass,

/*css/round.sass*/
$radius:2px

@mixin rounded
border-radius:$radius

Now, we can include the above stylesheet in our main stylesheet,

/*style.sass*/
@use "css/round"

.button
@include round.rounded
padding: 5px + round.$radius

CSS code:

.button {
  border-radius: 2px;
  padding: 7px;
}

Sass @use: Index files

Suppose, if you write a _code.scss or _code.sass in a folder, the index file will be loaded automatically when we load the URL for the folder itself.

This is the default behavior of Sass. It holds up the code.sass or _code.sass file, which is present inside the folder as default stylesheet if only the folder name is provided.

SCSS Syntax:

//foundation/_code.scss
code {
  padding: 0.25em;
  line-height: 0;
}

//foundation/_lists.scss
ul,
ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

//foundation/_index.scss
@use "code";
@use "lists";

//style.scss
@use "foundation";

SASS Syntax:

/foundation/_code.sass
code
padding: .25em
line-height: 0



//foundation/_lists.sass
ul, ol
text-align: left


& &
padding:0
bottom: 0
left: 0


// foundation/_index.sass
@use 'code'
@use 'lists'


// style.sass
@use 'foundation'

CSS Syntax:

code {
  padding: 0.25em;
  line-height: 0;
}

ul,
ol {
  text-align: left;
}

ul ul,
ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

@function

SASS @function at-rule is used to define functions with complex operations, taking in arguments and returning a result.

Functions allow us to define complex operations on SassScript values that can be reused throughout your stylesheet. SASS functions are used to declare complex formulas and behaviors, which can be used throughout the stylesheet.

It makes it easier to abstract the familiar formulas and behaviors in some readable way. A function’s name can be any syntactically awesome style sheets identifier.

Functions are defined using the @function at-rule, and is generally written as @function <name>(<arguments...>) { .. }.

SCSS Syntax:

@function pow($base, $exponent) {
  $result: 1;
  @for $_ from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

.sidebar {
  float: left;
  margin-left: pow(4, 3) * 1px;
}

SASS Syntax:

@function pow($base, $exponent)
$result: 1
@for $_ from 1 through $exponent
$result: $result * $base


@return $result


.sidebar
 float: left
 margin-left: pow(4, 3) * 1px

CSS Syntax:

.sidebar {
  float: left;
  margin-left: 64px;
}

Arguments

Arguments allow function's behavior to be customized each time they’re called. After the function's name, the arguments are specified in the @function rule as a list of variable names surrounded by parentheses. The function should be called with the same number of arguments in the form of SassScript expressions. These expression values are available within the function’s body as the corresponding variables.

Keyword argument

So, while calling a function, we can provide the argument's value and the argument's name as specified in the function definition. So instead of passing the arguments in order of their number, they can be passed by name as well.

This is especially useful for functions containing multiple optional arguments or with boolean arguments whose meanings are not apparent without a name to go with them.

Keyword arguments use the same syntax as variable declarations and optional arguments.

SCSS Syntax:

$primary-color: #036;
.banner {
  background-color: $primary-color;
  color: scale-color($primary-color, $lightness: +40%);
}

SASS Syntax:

$primary-color: #036
.banner
background-color: $primary-color
color: scale-color($primary-color, $lightness: +40%)

CSS Syntax:

.banner {
  background-color: #036;
  color: #0a85ff;
}

Taking Arbitrary Arguments

Sometimes, we need to pass different parameters to a function in different scenarios. For such use case, we can define our function to take any number of arguments and this could be done the same way as we saw in mixins i.e., when the last argument ends in three dots (ex: $xyz...) which is known as the argument list. So when this function is called, all the parameters provided at time of the function call are available in the function argument as a list of values, which can then be used in the function.

SCSS Syntax:

@function sum($numbers...) {
  $sum: 0;
  @each $number in $numbers {
    $sum: $sum + $number;
  }
  @return $sum;
}

.micro {
  width: sum(50px, 30px, 100px);
}

SASS Syntax:

@function sum($numbers...)
$sum: 0
@each $number in $numbers
$sum: $sum + $number

@return $sum

.micro
width: sum(50px, 30px, 100px)

CSS Syntax:

.micro {
  width: 180px;
}

@debug

The @debug directive prints the value of a Sass expression to the standard error output stream.

In some cases, it’s useful to see the value of a variable or expression while you’re developing your stylesheet.

The syntax for @debug at-rule is also the same as the @error at-rule.

The @debug rule is generally written as @debug <expression>, and it prints the value of that expression, along with the line number and filename.

To understand the concept, it is better to have a look at the syntaxes:

SCSS Syntax:

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

SASS Syntax:

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

Output:

test.scss:3 Debug: width is: 300px

@at-root

The @at-root rule is generally written as @at-root <selector> {..} and causes everything within it to be emitted at the document's root instead of using the regular nesting. SASS/SCSS @at-root at-rule is not frequently used in SASS or SCSS but helps implement advanced nesting with selector functions. It is most often used while doing advanced nesting with the SassScript parent selector and selector functions.

We can use this at-rule with any selector(generally the nested selectors defined inside curly braces of another selector) to compile them as root selectors in the stylesheet and not as a nested selector.

Let's see the syntax:

SCSS Syntax:

@use "sass:selector";

@mixin unify-parent($child) {
  @at-root #{selector.unify(&, $child)} {
    @content;
  }
}

.wrapper .field {
  @include unify-parent("input") {
    /* ... */
  }
  @include unify-parent("select") {
    /* ... */
  }
}

SASS Syntax:

@use "sass:selector"

@mixin unify-parent($child)
@at-root #{selector.unify(&, $child)
}
@content


.wrapper .field
@include unify-parent("input")
    /* ... */


@include unify-parent("select")
    /* ... */

CSS Syntax:

.wrapper input.field {
  /* ... */
}

.wrapper select.field {
  /* ... */
}

@Mixins and @include

Sass @Mixins allows you to define styles that can be reused throughout your stylesheet. Mixin makes it easy to avoid using non-semantic classes like .float-left and distribute collections of styles in libraries.

A mixin’s name can be any Sass(syntactically awesome style sheets) identifier, and it can contain any statement other than top-level statements.

@Mixins are initialised using the @mixin at-rule, which is written @mixin <name> { ... } or @mixin name(<arguments...>) { .. }.

You just need to write these mixins with some style rules in them, and then you can reuse @mixin anywhere in the rest of your stylesheet any number of times.

You can create mixins using the @mixin at-rule.

SCSS Syntax:

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

SASS Syntax:

@mixin reset-list
  margin: 0
  padding: 0
  list-style: none


@mixin horizontal-list
@include reset-list


li
display: inline-block
margin:
  left: -2px
  right: 2em


nav ul
@include horizontal-list

CSS Syntax:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

@Mixins and @include Example

Let's suppose we want to add some shadow to a div element using the CSS box-shadow property. Then we can write the code as shown below. Four lines of CSS code with Sixteen variables to set, so this can become very boring to combine in multiple div elements with different specifications for the shadow effect.

So to solve this issue, sass mixins are the right candidate to save you from such redundant and tedious work.

CSS code:

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

For the above CSS example, you can write the mixins as given below:

@mixin box-shadow($x, $y, $blur_value, $color)
   {
	-webkit-box-shadow: $x, $y, $blur_value, $color;
	-moz-box-shadow: $x, $y, $blur_value, $color;
	-ms-box-shadow: $x, $y, $blur_value, $color;
	box-shadow: $x, $y, $blur_value, $color;
   }

Now, @mixin will act as a function with its name as box-shadow, and all we have to do is call it by providing four values for the shadow effect. Just to use these mixins anywhere in the stylesheet, we have to use the keyword @include followed by the mixin's name. Now suppose we use the mixin created above in our stylesheet.

It will look as:

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

@forward

The @forward rule processes the Sass stylesheets and makes their functions, mixins, and variables available in the cases when the stylesheet is loaded using the @use rule. Organizing Sass libraries across many files are made possible, along with providing users to process a single entry point file.

The forward rule is generally written as @forward "<url>". @Forwad loads the module at the given URL just like @use, but it makes the public members of the loaded module available to users of your module as though they were defined directly in your module.

SCSS Syntax:

// src/_list.scss
@mixin reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

//bootstrap.scss
@forward "src/list" as list-*;

//styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

SASS Syntax:

// src/_list.sass
@mixin reset
margin: 0
padding: 0
list-style: none



//bootstrap.sass
@forward "src/list" as list-*


//styles.sass
@use "bootstrap"


li
@include bootstrap.list-reset

CSS Syntax:

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

Controlling Visibility

There can be a situation when you want to keep some of the members private, so that only your package can be used, or you may require your users to load some members differently.

The hidden form means that the listed members shouldn’t be forwarded, but everything else should.

You can do this by controlling exactly which members get forwarded by writing @forward "<url>" hide <members...> or @forward "<url>" show <members...>.

The show form means that only the named members should be forwarded.

SCSS Syntax:

//src/_list.scss
$horizontal-list-gap: 2em;

@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin list-horizontal {
  @include reset;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: $horizontal-list-gap;
    }
  }
}

//bootstrap.scss
@forward "src/list" hide list-reset, $horizontal-list-gap;

SASS Syntax:

//src/_list.sass
$horizontal-list-gap: 2em


@mixin list-reset
  margin: 0
  padding: 0
  list-style: none


@mixin list-horizontal
@include reset


  li
   display: inline-block
   margin:
   left: -2px
   right: $horizontal-list-gap



//bootstrap.sass
@forward "src/list" hide list-reset, $horizontal-list-gap

Frequently Asked Questions

Which directive is used to convert multiple Sass into single or multiple CSS files?

Like Cascading Style Sheets, Sass also supports the @import directive. The @import directive allows you to include the content of one file in another.

Which directive includes media rules in the stylesheet @warn @import @media at the root?

Sass @media directive sets style rules for different media types. Syntactically awesome style sheets both support and extend the @media rules. The @media directive can be nested inside the selector SASS, but the significant impact is displayed to the top level of the stylesheet.

What do you understand by variable interpolation in SASS?

Interpolation is a new principle, and it is widely used in SASS. It refers to an insertion process. It allows users to interpolate SASS expressions into a basic SASS or CSS code. This means we can define selector name, quoted or unquoted strings, property name, CSS at-rules, etc., as a variable.
We can interpolate an expression using __#{variable-name }__.

What does #{} syntax refer?

It refers to interpolation syntax that allows you to embed the value of Sass variables or expressions into CSS property values.

Which directive is used to import files @import?

The @import directive in Sass is used to import external Sass or CSS files into the current Sass file. It allows you to include styles from other files, enabling better organization and modularization of your stylesheets.

What are some main drawbacks of SASS?

The main drawbacks of SASS are:

SASS introduces some new features, the developer must have enough time to learn new features present in this preprocessor before using it.
If a team works on the same project, they will use the same preprocessor. If some team members use the SASS and some use the Cascading Style Sheets to edit the files directly, it will become a tough task to work with the project.

Conclusion

In this blog, we discussed Sas @at rules and directives in complete detail. We have discussed @use, @function, @debug, @at-root ,(@mixins & @include) and forward in detail with their syntax.
Check out this problem - Redundant Braces

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!

This course will help you!