DEV Community

aryan015
aryan015

Posted on

aryan's SCSS COMPLETE GUIDE Part-2

#css #scss #javascript #html

note: I will not always show CSS version of my code.
note: It is a three part series. (if link are taking you at the same blog then links are not updated yet. waiting...)
one
three

SCSS @mixin

mixin are resuable css code in your scss.

@mixin name{
  property:value;
  property2:value;
}
selector{
  @include mixin-name;
}
Enter fullscreen mode Exit fullscreen mode 
@mixin important-text{
  color:red;
  font-size:25px;
  font-weight:bold;
  border:1px solid blue;
}
.danger{
  @include important-text;
  background-color:red;
}
Enter fullscreen mode Exit fullscreen mode

@mixin can also have other mixin elements

@mixin special-text{
  @include link;
  @include important;
}
Enter fullscreen mode Exit fullscreen mode

passing variable to mixin 

@mixin border($color,$width){
border:$width solid $color;
}
.myArticle{
  @include bordered(blue,1px); /* border: 1px solid blue*/
}
.para{
  @include bordered(orange,2px); /*  border:2px solid orange*/
}
Enter fullscreen mode Exit fullscreen mode

mixin default values 

@mixin bordered($color:blue,$width){
  border:$width solid $color;
}
.para{
  @included bordered($width:2px) /*specify the value only*/
}
Enter fullscreen mode Exit fullscreen mode

🔗mylinkedin

learning resources

🧡Scaler - India's Leading software E-learning
🧡w3schools - for web developers

Top comments (0)

Read next

hazarnenni profile image

An In-Depth Look at Hono.js for Cloud-Native Development

Hazar nenni -

siddharthssb11 profile image

Polling Requests to an API in JavaScript

Siddharth Singh Bhadauriya -

raajaryan profile image

Exploring CRUD: What It Is and How It Works

RaAj Aryan -

alikhanzada577 profile image

Background Animation with Pure CSS

Muhammad Ali -