SASS CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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.

Cùng chuyên mục:

Mở đầu: Sự khác nhau giữa SASS và SCSS

Mở đầu: Sự khác nhau giữa SASS và SCSS

Khi bạn đọc series này bạn sẽ thấy mình giới thiệu và SASS mà lại…

Bài 16: Các hàm xử lý Number trong SASS

Bài 16: Các hàm xử lý Number trong SASS

Tiếp tục tìm hiểu các hàm có sẵn trong SASS và trong bài này chúng…

Bài 15: Các hàm xử lý chuỗi trong SASS

Bài 15: Các hàm xử lý chuỗi trong SASS

SASS cung cấp khá nhiều các hàm có sẵn giúp cho việc lập trình trở…

Bài 14: Function trong SASS

Bài 14: Function trong SASS

Function không còn xa lại gì trong các ngôn ngữ lập trình nhưng với SASS…

Bài 13: Vòng lặp each trong SASS

Bài 13: Vòng lặp each trong SASS

Ta đã biết vòng lặp foreach trong PHP dùng để lặp mảng và mỗi lần…

Bài 12: Vòng lặp while trong SASS

Bài 12: Vòng lặp while trong SASS

Vòng lặp for dùng để lặp cho những trường hợp ta biết trước tổng số…

Bài 10: Vòng lặp for trong SASS

Bài 10: Vòng lặp for trong SASS

Vòng lặp là một khái niệm không còn xa lạ gì nữa với các bạn…

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

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à…

Bài 08: Tìm hiểu Mixin trong SASS

Bài 08: Tìm hiểu Mixin trong SASS

Mình đã từng code CSS cho nhiều trang và mình cũng phân chia và comment…

Bài 07: Nested Selector trong SASS

Bài 07: Nested Selector trong SASS

Như chúng ta biết hoạt động truy vấn các đối tượng HTML trong CSS sẽ…

Bài 06: Khai báo và sử dụng biến trong SASS

Bài 06: Khai báo và sử dụng biến trong SASS

Như mình đã nói SASS có những chức năng rất giống với một ngôn ngữ…

Bài 05: Tìm hiểu Place Holder trong SASS

Bài 05: Tìm hiểu Place Holder trong SASS

Trong bài này chúng ta tìm hiểu cách khai báo một Placer Hoder để cho…

Bài 04: Kế thừa extend trong SASS

Bài 04: Kế thừa extend trong SASS

Như một ngôn ngữ lập trình, SASS cho phép chúng kế thừa lẫn nhau và…

Bài 03: Các lệnh biên dịch file SASS thành file CSS

Bài 03: Các lệnh biên dịch file SASS thành file CSS

Nếu bạn không muốn sử dụng Netbeans và chức năng tự động generate của nó…

Bài 02: Cấu hình SASS trên Netbeans

Bài 02: Cấu hình SASS trên Netbeans

Sau khi cài đặt SASS xong thì chúng ta cần một editor để lập trình.…

Bài 01: SASS là gì? Cài đặt SASS trên Window

Bài 01: SASS là gì? Cài đặt SASS trên Window

Hôm nay chúng ta sẽ tìm hiểu một công nghệ mới dành cho các frontend…

Top