Cấu trúc logic khi sử dụng SASS, SCSS

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
• <= : so sánh nhỏ hơn hoặc bằng

Câu lệnh @if / @else

 @if (bieu-thuc-logic) {
    //khi điều kiện đúng
    }
 @else {
    //khi điều kiện sai
    }

Ví dụ @if / @else

Mixin my-font-type có tham số mạc định là $font với giá trị là 'base', tùy tham số mà nó trả về thuộc tính font-family với font chữ tương ứng.

// SCSS
@mixin my-font-type($font: 'base') {
    @if ($font==bold) {
        font-family: 'Avenir-Demi';
    }
    @else if ($font==italic) {
        font-family: 'Avenir-LightItal';
    }
    @else {
        font-family: 'Avenir-Light';
    }
}

.title1 {
    @include my-font-type('bold');
    font-weight: bold;
}
.title2 {
    @include my-font-type('italic');
}
.title3 {
    @include my-font-type();
}

// CSS
.title1 {
  font-family: 'Avenir-Demi';
  font-weight: bold; }

.title2 {
  font-family: 'Avenir-LightItal'; }

.title3 {
  font-family: 'Avenir-Light'; }

Vòng lặp @for trong SCSS

Vòng lặp @for thường áp dụng với việc chạy chỉ số từ một giá trị này đến một giá trị khác, ví dụ biến $i chạy từ 1-4

// SCSS
@for $i from 1 through 4 {
    .col-#{$i} {width: ($i/4)* 100%;}
}

// CSS
 .col-1 {
  width: 25%; }

.col-2 {
  width: 50%; }

.col-3 {
  width: 75%; }

.col-4 {
  width: 100%; }

Trong vòng lặp trên cần lưu ý: ký hiệu #{$i} cho biết truy cập biến i như là một chuỗi. Biến $i khởi tạo từ 1 và mỗi vòng lặp $i tăng thêm 1 cho đến khi $i == 4, mỗi vòng lặp thực hiện tạo ra một phần tử .col-

Ngoài ra cũng có thể sử dụng vòng lặp @for hoặc @each với một danh sách list

// SCSS
//Khai báo 4 biến lưu mã màu
$home: #F7E900;
$about: #FF5F09;
$news: #A0005E;
$links: #41004B;
//Tạo biến list (danh sách) với 4 phần tử trên
$pages: $home,
$about,
$news,
$links;

@for $i from 1 through length($pages) {
    body.page-#{$i} {
        background: nth($pages, $i);
    }
}


@each $item in $pages {
    body.section-#{ index($pages, $item)} {
        background: $item;
    }
}

// CSS
body.page-1 {
  background: #F7E900; }

body.page-2 {
  background: #FF5F09; }

body.page-3 {
  background: #A0005E; }

body.page-4 {
  background: #41004B; }

body.section-1 {
  background: #F7E900; }

body.section-2 {
  background: #FF5F09; }

body.section-3 {
  background: #A0005E; }

body.section-4 {
  background: #41004B; }

Hàm length($pages) trả về số phần tử chứa trong danh sách $pages, nth($pages, $i) lấy giá trị thứ $i trong danh sách $pages