SCSS @function

• SCSS @function, khá giống nhau với @mixin, tuy nhiên thay vì biên dịch CSS style như @mixin, thì @function sẽ trả về giá trị, thuộc tính, hoặc function hoặc thậm chí là một @mixin.

Ví dụ về SCSS function

Function tính chiều rộng các phần tử con.

@function getWidth($widthWarp, $item) {
    @return $widthWarp / $item;
}
.list {
    width: 600px;
    li {
        float: left;
        width: getWidth(600px,4);
    }
}

.list {
    width: 600px;
}
.list li {
    float: left;
    width: 150px;
}

Function tính chiều rộng các phần tử con theo phần trăm.

@function getWidth($item) {
    @return 100% / $item;
}
.two-cols {
    width: columns(2);
}
.three-cols {
    width: columns(3);
}
.four-cols {
    width: columns(4);
}
.five-cols {
    width: columns(5);
}

.two-cols {
  width: 50%; }

.three-cols {
  width: 33.33333%; }

.four-cols {
  width: 25%; }

.five-cols {
  width: 20%; }

• Vậy là các bạn biết cách sử dụng @function như thế nào rồi nhe, việc còn lại là tùy vào sự sáng tạo của các bạn thôi he ^^.
• Nếu học từ đầu tới đây thì các bạn đã nắm khá tốt kiến thức của SCSS rồi, có thể nói là đủ để làm việc. Những bài học sau thường dành cho các bạn thích lập trình logic nhiều hơn, có thể áp dụng để làm template dùng chung hơn. Nên muốn tìm hiểu thêm thì học vẫn được nhé.