DEV Community

aryan015
aryan015

Posted on • Edited 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

igadii profile image

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Idris Gadi -

saidmounaim profile image

Next.js 15 Form Component: A Beginner's Guide

Said MOUNAIM -

arindam_1729 profile image

Building a Kanban Board with Next.js,Vercel AI and Tolgee

Arindam Majumder -

alexis_clarembeau_8c3c0e2 profile image

How are responsive websites doing in 2024?

Alexis Clarembeau -