SCSS-or-CSS-wolfactive-949x475
04/04/2021

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)
      }
    }
  }

Và đây là kết quả:

function-result

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;
  }
}
Gọi mixin:
#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)
      }
    }
  }
}

Đầu tiên mình tạo một biến $primary-color với color là #232323, sau đo mình tạo biểu thức điều kiện (condition), nếu param truyền vào bằng với #232323 thì ra thực hiện lệnh 1, ngược lại thì thực hiện lệnh 2. Dưới đây là kết quả nhé:

condition

3/ Tổng kết:

Như vậy là kết thúc lession 6. Mình đã giới thiệu cho các bạn về function và condition trong Scss, bên cạnh đó cũng như cách sử dụng của chúng trong việc code rồi. Nếu các bạn có thắc mắc gì thì các bạn gửi thông tin, đóng góp vào fanpage Wolfactive tụi mình nhé. Tụi mình sẽ giải đáp và tiếp thu thêm kiến thức, chỉnh sửa lại cho mỗi ngày Wolfactive tụi mình mạnh mẽ hơn.

Vui lòng chọn size trước khi đặt hàng (*)