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)
}
Như các bạn thấy ở box-shadow, mình truyền vào $args…, biến này có hơi khác so với các biến còn lại nhỉ? Vì nó có “…” nữa, bởi vì khi các bạn đặt như vậy nó sẽ cho phép các bạn viết nhiều giá trị cùng một lúc mà không cần phải khai báo thêm tham số truyền vào. Như ở đoạn code trên mình sử dụng box-shadow để làm ví dụ cho các bạn.
3/ Mixin với content
Ở dưới dây mình tạo một style-content() với font-size là 12px và @content. Thì khi các bạn gọi nó, nó sẽ có font-size mặc định là 12px kèm thèo style của các bạn nếu có.
@mixin style-content(){
font-size:12px;
@content;
}
p {
@include style-content(){
color:#333;
}
}
4/ Tổng kết.
Như vậy mình đã hướng dẫn cho tất cả các bạn về kiến thức liên quan đến mixin trong Scss rồi nhé. Hi vọng bài viết sẽ giúp ích cho các bạn. Mọi thắc mắc các bạn liên hệ fanpage của tụi mình nhé. Cảm ơn mọi người đã theo dõi Wolfactive tụi mình.
Bài trước: Lession 3 – Parital | Bài kế: Lession 5 – Import |