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ụ:

Bài viết này được đăng tại [free tuts .net]

$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:

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:

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:

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 đề.

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.