Lession 6: Function & Condition trong SASS

Chào các bạn đến với Lession 6 của series SASS của tụi mình. ở Lession 6 này, mình sẽ viết về Function và Condition (toán tử điều kiện) trong Sass, chúng ta sẽ tìm hiểu về cách viết function trong SCSS và cách sử dụng Condition trong lession này. Giờ ta cùng nhau bắt đâu nhé.

1/ Function

Funtion , hàm , cũng như các ngôn ngữ khác, function trong Scss cũng có công dụng và ý nghĩa nó như nhau. Nó cho phép bạn viết một đoạn chương trình ngắn vào nó và trả về một giá trị mà bạn cần, bên cạnh đó chúng ta còn có thể tái sử dụng lại nhiều lần nếu cần thiết.

Cú pháp để khai báo của function tương tự như mixin:

@function ten_function ($param_1 , $param_2,...){
   //Code here
}

Giờ mình sẽ làm mẫu cho các bạn một vài ví dụ nhé:

VD1: function tính tổng:

@function sum($number_1 , $number_2){
   @return $number_1 + $number_2;
}

VD2: function chia col:

@function div_col($colums , $gap , $page_width:100%){
   @return ($page_width - ($gap * ($colums - 1))) / $colums;
}

Và giờ thì chúng ta bắt đầu lấy giá trị của nó nhé, đầu tiên mình sẽ lưu nó vào trong một biến để lưu giá trị trả về của function

$valueSum : sum(12px,13px);
$col: div_col(12,1%);

Sau đó mình gọi biến đó, bên cạnh đó mình cũng thử một trường hợp là gọi function trực tiếp trong flex cho các bạn xem:

#content {
    #introduction{
      h2{
        color:red;
        background:#333;
        border-radius: 3px;
        margin-right:$valueSum ;
        max-width: $col*8 ;
        flex:0 0 div_col(12,1%)*8;
        @include box-shadow(2px 0px 4px #999, 1px 1px 6px #393939)
      }
    }
  }

2/ Condition

if – else, condition (toán tử điều kiện), chắc các bạn nghe tên condition thì cũng biết nó như thế nào rồi nhỉ?! Nếu thì , ngược lại thì… cách sử dụng if – else như sau:

Cú pháp:

@if $number_one == $number_true {
  // code here
} @else if $number_one > $number_true{
  // code here
} @else{
  // code here
}

Rất đơn giản đúng không các bạn? giờ thì mình cùng nhau làm một ví dụ nhé. Ở ví dụ dưới mình sẽ kết hợp với mixin nhé

$primary-color:#232323;
@mixin change-color($primary-color){
  @if $primary-color == #232323{
    background:palevioletred;
  } @else {
    background:#393939;
    color:#fff;
  }
}

#main {
  @include change-color($primary-color);
  #content {
    #introduction{
      h2{
        color:red;
        background:#333;
        border-radius: 3px;
        margin-right:$valueSum ;
        max-width: $col*4 ;
        flex:0 0 div_col(12,0%)*4;
        @include box-shadow(2px 0px 4px #999, 1px 1px 6px #393939)
      }
    }
  }
}