Sass cơ bản: Mixin

Viết bài report thì cũng cần có chút hứng thú về vấn đề mình viết, bài này tìm hiểu về mixin trong sass.

Sass Mixin là gì?

Một mixin cho phép bạn tạo các khối CSS có thể tái sử dụng. Điều đó có thể sẽ giúp bạn tránh viết mã lặp đi lặp lại. Ví dụ:

a:link { color: white; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }

Việc viết đoạn này nhiều lần có thể khiến ta bị điên, đặc biệt với một trang web lớn với nhiều liên kết. Do đó, ta có thể tạo các style cho các liên kết của mình với một mixin Sass như thế này:

@mixin linx ($link, $visit, $hover, $active) {
  a {
    color: $link;
    &:visited {
      color: $visit;
    }
    &:hover {
      color: $hover;   
    }
    &:active {
      color: $active;
    }
  }
}

Dùng Sass Mixin như thế nào?

Để sử dụng mixin, ta phải đưa nó vào file sass của mình. Để gọi linx mixin từ phía trên, ta cần thêm dòng này:

@include linx(white, blue, green, red);

sau khi compile thì ta sẽ được đoạn css đầu tiên.

Làm thế nào để tạo một Sass Mixin?

Theo ví dụ đầu tiên, ta dùng @mixin directive:

@mixin sample {
  font-size: 12px;
}

Chúng ta định nghĩa directive này bằng cách sử dụng @mixin và tên của mixin. Và ta cũng có thể tùy chọn thêm các tham số cho mixin . Ví dụ không có tham số:

@mixin linx () {
  a {
    color: white;
    &:visited {
      color: blue;
    }
    &:hover {
      color: green;   
    }
    &:active {
      color: red;
    }
  }
}

và gọi

@include linx;

(kết quả ta cũng được đoạn css ví dụ đầu tiên.)

Khi ta sử dụng các biến trong mixin, được định nghĩa ở nơi khác trong file sass (Miễn là biến đã được xác định, ta có thể sử dụng nó trong mixin lúc nào cũng được)

$font-base: 12px;

@mixin sample {
  font-size: $font-base;
}

p {
  @include sample;
}

Kết quả là

p {
  font-size: 12px;
}

Tham số trong Sass Mixin

Một mixin có thể lấy các giá trị dữ liệu Sass như các tham số. Các giá trị này được chỉ định khi ta định nghĩa mixin và đưa ra một giá trị cụ thể và @include mixin. Các tham số sau đó được truyền vào mixin dưới dạng các biến:

@mixin headline ($color, $size) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(green, 12px);
}

Kết quả là

h1 {
  color: green;   
  font-size: 12px;
}

Tất nhiên là các biến truyền vào vẫn theo quy tắc cơ bản đó là được dùng theo thứ tự khi truyền vào:

h1 {
  @include headline(12px, green);
}

và kết quả là thế này:

h1 {
  color: 12px;
  font-size: green;
}

Chúng ta cũng có thể sử dụng biến trong sass như là 1 tham số:

$base-color: pink;

@mixin headline($color, $size) {
  color: $color;
  font-size: $size;
}

h1 { @include headline($base-color, 12px);}

Kết quả

h1 {
  color: pink;
  font-size: 12px;
}

Các giá trị mặc định trong Sass Mixin

Cũng giống php, chúng ta có thẻ truyền các giá trị mặc định vào mixin:

@mixin headline($size, $color: red) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline(12px);
}

h1 {
  @include headline(12px, blue);
}

Sau khi compile ta có

h1 {
  color: red;
  font-size: 12px;
}
h1 {
  color: blue;
  font-size: 12px;
}

Ta cũng có thể sử dụng biến trong sass để làm giá trị mặc định:

$base-color: orange;

@mixin headline($size, $color: $base-color) {
  color: $color;
  font-size: $size;
}

Keyword Arguments trong mixin

Keyword Arguments làm cho code của chúng ta dễ đọc hơn rất nhiều, ví dụ:

@mixin headline($size, $color: red) {
  color: $color;
  font-size: $size;
}

h1 {
  @include headline($color: blue, $size: 12px);
}

Và ta có kết quả ngay cả khi thứ tự biến truyền vào không đúng thứ tự:

h1 {
  color: blue;
  font-size: 12px;
}

Variable Arguments (tham số biến) trong mixin

Đôi khi ta cần mixin chấp nhận một số các tham số, ví dụ thuộc tính padding có thể có từ 1 đến 4 tham số. Trong trường hợp này, bạn có thể tạo ra một mixin sử dụng Variable Arguments, nó cho phép ta đóng gói các tham số như một danh sách. Các tham số biến giống như các tham số thông thường, ngoại trừ chúng thêm (...) vào cuối:

@mixin pad ($pads...) {
  padding: $pads;
}

.one {
  @include pad(20px);
}
.two {
  @include pad(10px 20px);
}
.three {
  @include pad(10px 20px 40px);
}
.four {
  @include pad(10px 20px 30px 20px);
}

Kết quả của compile đoạn trên

.one {
  padding: 20px;
}
.two {
  padding: 10px 20px;
}
.three {
  padding: 10px 20px 40px;
}
.four {
  padding: 10px 20px 30px 20px;
}

Ta cũng có thể thêm vào các tham số thông thường bên cạnh tham số biến:

@mixin pad ($color,$pads...) {
  color: $color;
  padding: $pads;
}
.four { @include pad(orange, 10px 20px 30px 20px); }

Kết quả:

.four {
  color: orange;
  padding: 10px 20px 30px 20px;
}

Giờ làm 1 đoạn code vui vẻ tổng hợp các thứ ở trên:

$box-style1: 5px, solid, red;
$box-style2: (bStyle: dotted, bColor: blue, bWidth: medium);

@mixin boxy($bWidth, $bStyle, $bColor) {
  border-width: $bWidth;
  border-style: $bStyle;
  border-color: $bColor;
}

.first {
  @include boxy($box-style1...);
}

.second {
  @include boxy($box-style2...);
}

Nhìn là biết chúng ta sẽ có kết quả gì rồi đúng không?

.first {
  border-width: 5px;
  border-style: solid;
  border-color: red;
}

.second {
  border-width: medium;
  border-style: dotted;
  border-color: blue;
}

@content

Chúng ta có thể thêm vào mixin 1 khối style thông qua @content. Khối style thêm vào sẽ năm ở vị trí của @content trong mixin, ví dụ cho dễ hiểu:

Viết mixin:

@mixin cont {
  background-color: black;
  color: white;
  @content;
}

div {
  @include cont {
    font-size: 12px;
    font-style: italic;
  }
}

Kết quả:

div {
  background-color: black;
  color: white;
  font-size: 12px;
  font-style: italic;
}

Kết Luận

• Mixin quá là bá đạo, giúp ta code sass được nhanh và hợp lý hơn rất nhiều.
• Cảm ơn tới Google The Sass Mixin Directive