Lession 4: Mixin trong SCSS

Chào mừng các bạn đến với lession 4 của series Scss của Wolfactive tụi mình. Ở lession 4 này tụi mình sẽ mang đến cho các bạn những kiến thức liên quan đến Mixins trong Scss. Nào còn chần chờ gì nữa. Ta bắt đầu thôi.

1/ Mixins là gì?

Mixin, các bạn có thể hiểu nó giống như function vậy, nó cho phép mình tái sử dụng những style code mà các bạn viết trong đó và được gọi khi các bạn dùng include. Cú pháp @mixin + tên, gọi mixin bằng @include + tên mixin. Các bạn chú ý chỗ này nhé, khi mà chúng ta gọi mixin, ta có thể gọi mixin ở bất kì đâu, không nhất thiết phải gọi ở trong class hoặc id nhé.

VD:

@mixin wolfactive{
     font:{
         size:21px;
         weight:700;
     }
}
@mixin out-side-incl{
  a{color:black;}
}

.container{
   @include wolfactive;
}
@include out-side-incl();

Ngoài ra các bạn cũng có thể lồng các mixin với nhau như khi các bạn gọi function trong một function khác vậy:

@mixin second-wolfactive{ 
  @include wolfactive;
  color:#232323;
}

Note: Tuy nhiên, dù mixin có chức năng giống như function, nhưng nó không giống function 100% nhé các bạn. Các bạn nhớ là ở function, ta có thể gọi function ngay tại trước dòng tạo function hoặc sau khi tạo function. Nhưng còn mixin, các bạn bắt buộc phải tạo mixin trước, thì các bạn mới có thể gọi mixin được. Mọi người chú ý nhé!

2/ Mixins với tham số truyền vào.

Cũng tương tự như function, mixin cho phép các bạn có thể truyền tham số vào để cho các bạn có thể tùy ý đổi style tùy thích. Ví dụ cụ thể như sau:

@mixin wolfactive($arg){color:$arg;}
$colors:#333;
.container{
   @include wolfactive(#333);
   @include wolfactive($arg:#333);
   @include wolfactive($colors);
}

Ở đây mình còn có một trường hợp nữa đối với các thuộc tính css có thể sử dụng nhiều giá trị như box-shadow, transition,….

@mixin box-shadow($agrs...){
  box-shadow:$agrs;
  -moz-box-shadow:$agrs;
}
h2{
   color:red;
   background:#333;
   border-radius: 3px;
   @include box-shadow(2px 0px 4px #999, 1px 1px 6px #393939)
}

@mixin style-content(){
  font-size:12px; 
  @content;
}
p {
  @include style-content(){
    color:#333;
  }
}