Bài 11: Các toán tử hay dùng trong SASS

SASS hỗ trợ khá nhiều toán tử không kém gì các ngôn ngữ lập trình, ví dụ toán tử gán, các toán tử cộng trừ nhân chia, toán tử chia lấy dư, hay thậm chí là các toán tử so sánh và nối chuỗi. Và trong bài này chúng ta sẽ lần lượt tìm hiểu các toán tử này nhé.

1. Toán tử gán

Chúng ta đã sử dụng toán tử gán khá nhiều rồi đấy. Ví dụ trong bài khai báo biến mình đã sử dung toán tử gán để gán giá trị cho biến. 

Ví dụ:

$bg-color : red;

Như vậy ta sử dụng dấu hai chấm : để gán giá trị. Bên phải là giá trị cần gán và bên trái là biến sẽ nhận giá trị đó.

2. Toán tử toán học

Chúng ta thường dùng năm toán tử toán học trong bảng sau:

Toán tử Mô tả
+ Phép cộng
- Phép trừ
* Phép nhân
/ Phép chia
% Phép chia lấy phần dư

Lưu ý: Bạn nên sử dụng cặp dấu ngoặc () để bao quanh các biểu thức lại, nếu không nó sẽ hiểu là bạn đang viết một đoạn text chứ không phải là sử dụng toán tử.

Với toán tử cộng và trừ không những chỉ dùng được với số mà bạn có thể cộng với các đơn vị như px, em, % ...

Ví dụ:

.nav{
    width: 30px + 60px;
    height: 30% + 20%;
    line-height: 10px - 2px;
}

CSS sau khi biên dịch.

.nav {
    width: 90px;
    height: 50%;
    line-height: 8px; 
}

Với toán tử nhân và chia trong trường hợp cả hai đều là số thì quá đơn giản rồi. Nhưng trường hợp bạn sử dụng đơn vị px, % thì liệu có thực hiện được không? Câu trả lời là được nếu tham số thứ hai phải là một con số.

Ví dụ:

.nav{
    width: (30px * 2);
    height: (30% / 2);
}

CSS sau khi biên dịch:

.nav {
    width: 60px;
    height: 15%; 
}

3. Toán tử so sánh

Chúng ta có hai toán tử so sánh bằng sau:

Toán tử Mô tả
== So sánh bằng. Trả về TRUE nếu vế trái bằng về phải và ngược lại sẽ trả về FALSE nếu vế trái khác vế phải
!= So sánh không bằng. Trả về TRUE nếu vế trái khác vế phải và ngược lại sẽ trả về FALSE nếu vế trái bằng vế phải

Ví dụ:

$color : red;

@if ($color == red){
    h1 {
        background:  red;
    }
}
@else if ($color != red){
    h1{
        background: blue;
    }
}

CSS sau khi biên dịch:

h1 {
    background: red; 
}

Ngoài ra chúng ta còn các toán tử so sánh sau:

Toán tử Mô tả
> So sánh lớn hơn
>= So sánh lớn hơn hoặc bằng
< So sánh bé hơn
<= So sánh bé hơn hoặc bằng

Ví dụ:

$padding : 200px;

@if ($padding <= 200px){
    h1{
        background: blue;
    }
}
@else {
    h1{
        background: red;
    }
}

CSS sau khi biên dịch:

h1 {
    background: blue; 
}

4. Toán tử logic

Toán tử logic là các toán tử so sánh hai mệnh đề.

Toán tử Ví dụ Mô tả
and X and Y Trả về TRUE nếu X và Y đều TRUE
or X or Y Trả về TRUE nếu một trong hai X hoặc Y đúng hoặc cả hai đều TRUE
not not X Trả về TRUE nếu x khác TRUE

Ví dụ:

$padding : 200px;

@if ($padding == 200px or $padding < 200px){
    h1{
        background: blue;
    }
}

CSS sau khi biên dịch:

h1 {
    background: blue; 
}

Còn các toán tử khác bạn tự cho ví dụ nhé.

5. Cộng hai chuỗi

Để cộng hai chuỗi thì ta sử dụng dấu cộng (+) để nối hai chuỗi với nhau. Tuy nhiên có một lưu ý là nếu vê trái có sử dụng dấu nháy đơn hoặc nháy kép bao quanh thì kết quả sau khi cộng sẽ nằm bên trong dấu nháy đó luôn (nghĩa là nó phụ thuộc vào vế đầu tiên).

Ví dụ:

h1{
    font-family: "Arial " + sans-serif;
}

h2{
    font-family: Arial  + "sans-serif";
}

CSS sau khi biên dịch:

h1 {
    font-family: "Arial sans-serif"; 
}

h2 {
    font-family: Arialsans-serif; 
}

6. Toán tử cho Color

Trong SASS bạn có thể cộng hoặc trừ các color rất dễ dàng. Tuy nhiên để thực hiện được phép tính thì đòi hỏi nó phải cùng đơn vị màu sắc.

Ví dụ:

h1 {
    color: #468499 + #204479;
}

CSS sau khi biên dịch:

h1 {
    color: #66c8ff; 
}

7. Lời kết

Bài này mình dừng ở đây vì mình đã giới thiệu xong những toán tử hay dùng trong SASS, bạn thấy có một số toán tử không tồn tại ở các ngôn ngữ lập trình như toán tử xử lý Color.

Bài tiếp theo chúng ta tìm hiểu vòng lặp while và vòng lặp each.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.