Sass interpolation (#{}) __sass

One of the main reasons for using the CSS preprocessor language is to use Sass to get a better structure. For example, you want to write cleaner, more efficient, and object-oriented CSS. The interpolation (interpolation) in the Sass is an important part. Let's take a look at the following example:

$properties: (margin, padding);
@mixin Set-value ($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{}: $side}
}
. Login-box {
    @include set-value (top, 14px);
}

It can make variables and properties work perfectly, and the code above is compiled into CSS:

. login-box {
    margin-top:14px;
    padding-top:14px;
}

This is a simple example of Sass interpolation. When you want to set the property value you can insert it using a string. Another useful use is to build a selector. You can use this:

@mixin generate-sizes ($class, $small, $medium, $big) {
    . #{$class}-small {font-size: $small;}
    . #{$class}-medium {font-size: $medium;}
    . #{$class}-big {font-size: $big;}
}
@include generate-sizes ("Header-text", 12px, 20px, 40px);

Compiled CSS:

. Header-text-small {font-size:12px}
. Header-text-medium {font-size:20px}
. Header-text-big {font-size:40px;}

Once you discover this, you will think of the mixins, which generates code or generates another mixins. However, this is not entirely possible. The first limit, which may very well remove the interpolation for the Sass variable.

$margin-big:40px;
$margin-medium:20px;
$margin-small:12px;
@mixin Set-value ($size) {
    margin-top: $margin-#{$size};
Login-box {
    @include set-value (big);
}

The Sass code above compiles and you get the following information:
Error STYLE.SCSS (line 5:undefined variable: "$margin-".)
Therefore, the #{} syntax is not readily available and you cannot invoke it in Mixin:

@mixin updated-status {
    margin-top:20px;
    Background: #F00;
}
$flag: "Status";
Navigation {
    @include updated-#{$flag};
}

The above code also complains when translated into CSS:
Error Style.scss (line 7:invalid CSS after "... nclude updated-": Expected "}", was "#{$flag};")
Fortunately, you can use interpolation in @extend. For example:

%updated-status {
    margin-top:20px;
    Background: #F00;
selected-status {
    font-weight:bold;
}
$flag: "Status";
Navigation {
    @extend%updated-#{$flag};
    @extend. selected-#{$flag};
}

The Sass code above can be run because he gives us the power to dynamically insert. Class and%placeholder. Of course they can't accept parameters like Mixin, the above code compiles the CSS:

. navigation {
    margin-top:20px;
    Background: #F00;
Selected-status,. Navigation {
    font-weight:bold;
}