Cấu Trúc Logic Khi Sử Dụng SASS, SCSS

Trang chủ » Học Scss » Cấu Trúc Logic Khi Sử Dụng SASS, SCSS

Có thể bạn quan tâm

Trong phần này nói về các vấn đề liên quan tới logic sử dụng code SCSS với các chức năng hỗ trợ sinh ra code CSS như các hàm, tính toán số học, Mixins ...

Sử dụng biểu thức số học đơn giản SCSS

Một tính năng hưu ích trong SCSS đó là có thể viết các biểu thức tính toán về số học một cách đơn giản bằng các toán tử cộng - trừ - nhân - chia (+, -, *, /).

// SCSS $globalsize : 20; .titlesmall { font-size:($globalsize / 2 + 2) + px; } // CSS .titlesmall { font-size: 12px; }

Biểu thức ($globalsize / 2 + 2) + px trong SCSS đã được tính toán thành 12px trong CSS

Sử dụng @mixin

Mixin là đoạn code SCSS có thể thay đổi tùy thuộc vào tham số chuyển đến nó, nó giống như hàm có các tham số nhưng giá trị trả về là một đoạn code SCSS

Cú pháp khai báo mixin như sau:

$mixin mixin-name($variable) { những gì trả về viết ở đây; }

Chỗ nào muốn chèn code trả về bởi mixin thì dùng biểu thức @include mixin-name(value);, xem ví dụ sau:

// SCSS $base-font-size: 16; @mixin font-size($size) { font-size: ($size / $base-font-size) + rem; } .title { @include font-size(32); } .detail { @include font-size(16); } // CSS .title { font-size: 2rem; } .detail { font-size: 1rem; }

Lưu ý biến tham số truyền vào mixin có thể khai báo nhiều tham số, các tham số cách nhau bởi dấu , ví dụ: @mixin mixin-name($var1, $var2, $var3)

Nếu mixin không có tham số nào, có thể bỏ hẳn phần () ví dụ:

// SCSS @mixin clearfix { &:before, &:after { display: table; content: ''; line-height: 0; } &:after { clear: both; } } .articledetail { @include clearfix; } // CSS .articledetail:before, .articledetail:after { display: table; content: ''; line-height: 0; } .articledetail:after { clear: both; }

Khai báo và sử dụng hàm trong SASS/SCSS

Hàm thì giống như mixin chỉ có điểm khác nó trả về giá trị chứ không trả về đoạn code như mixin. Ví dụ hàm px2rem() sau chuyển từ đơn vị px sang rem

// SCSS @function px2rem($pxsize) { @return ($pxsize/16)+rem; } p.detail { font-size: px2rem(20); } // CSS p.detail { font-size: 1.25rem; }

Điểu kiện @if và @else trong SCSS

Điều kiện logic là true/false có thể sử dụng toán tử logic ở dưới.

Toán tử logic

  • == : so sánh bằng
  • != : so sánh khác
  • > : so sánh lớn hơn
  • < : so sánh nhỏ hơn
  • >= : so sánh lớn hơn hoặc bằng

Từ khóa » Học Scss