I can set a multiple options on one variable in sass and use it?

Question

Let me explain myself, i wanna do something like this in my code

$varible:{
 display: inline-block;
 width: 14px;
 height: 14px;
}
.circle{
   &:nth-child(1){
      &::after{
        $varible;
        position:absolute;
        ...
      }
   }
}

Create a variable that contains a lot of attributes, and then use it as a global setting later, does anybody know if this is possible, or how I can perform an action like this?

Answer 1

Mixin is basically used to call a block of style but does not return any value unlike function in sass.

The @mixin directive lets you create CSS code that is to be reused throughout the website. The @include directive is created to let you use (include) the mixin.

@mixin variable{
   display: inline-block; 
 width: 14px; 
 height: 14px;
 }

 .circle{    
&:nth-child(1){
      &::after{
        @include: variable;
        position:absolute;
        ...
      } 
   }}