Bài 09: Lệnh if else trong SASS

Còn khá nhiều kiến thức quan trọng của SASS mà bạn cần phải học và trong bài này là một trong nhũng phần đó, trong bài này chúng ta tìm hiểu cú pháp và cách sử dụng lệnh if else và if else lồng nhau trong SASS.

1. Lệnh if else trong SASS

Lệnh if else dùng để kiểm tra điều kiện nào đó có đúng hay không, nếu đúng thì thực thi lệnh bên trong khối if và ngược lại nếu sai thì thực hiện lệnh trong khối else.

Cú pháp:

@if ($condition){
    // do something
}
@else{
    // do something
}

Trường hợp sử dụng nhiều if else lồng nhau thì bạn có thể sử dụng cú pháp sau:

Bài viết này được đăng tại [kiso.vn]

@if ($condition1){
    // do something
}
@else if ($condition2){
    // do something
}
@else{
    // do something
}

Ví dụ: Kiểm tra chiều dài của $with-nav nếu bé hơn 280px thì ẩn thẻ h1, ngược lại thì hiển thị bình thường.

SCSS:

$with-nav : 500px;


@if ($with-nav < 280px){
    h1 {
        display: none;
    }
}
@else{
    h1 {
        display: block;
    }
}

CSS sau khi biên dịch:

h1 {
    display: block; 
}

Bạn thử thay đổi giá trị của biến $with-nav : 200px thì sẽ thấy kết quả CSS sẽ khác.

2. Lệnh if else lồng nhau

Rất giống với các ngôn ngữ lập trình, để lồng câu if else với nhau thì ta chỉ việc đặng lệnh if bên trong lệnh if.

Ví dụ: Sử dụng lệnh if else lồng nhau

@if ($condition1){
    @if ($condition2){
        // do something
    }
    @else{
        // do something
    }
}
@else{
    // do something
}

Ví dụ: Sử dụng lệnh if else lồng nhau

SCSS:

@if ($with-nav > 280){
    @if ($with-nav < 720){
        h1 {
            display: inline-block;
        }
    }
    @else{
        h1 {
            display: block;
        }
    }
}
@else{
    h1 {
        display: none;
    }
}

CSS sau khi biên dịch:

h1 {
    display: inline-block; 
}

3. Lời kết

Vậy là mình đã giới thiệu xong cú pháp và cách sử dụng lênh if else, lênh if else lồng nhau trong SASS, bài tương đối ngắn vì nó rất giống với các ngôn ngữ lập trình khác nên mình nghĩ ban chỉ cần đọc sơ qua là có thể làm được ngay. Bài tiếp theo chúng ta sẽ tìm hiểu toán tử biểu thức trong SASS.