SASS P3 – Variable – Data Type – Operation – Interpolation

1. Variables

Giống với các ngôn ngữ lập trình ta khai báo biến để lưu trữ một giá trị được sử dụng nhiều lần. Để khai báo một biến ta sử dụng kí tự $ đằng trước tên biến

Kết quả

2. Global Variables

Ở ví dụ trên nếu ta khai báo biến $text-success ở bên ngoài không nằm trong bất kì bộ chọn nào thì ở chỗ nào ta cũng có thể gọi được đến biến đó. Nhưng nếu bạn khai báo biến ở bên trong 1 bộ chọn thì phạm vi của biến sẽ chỉ nằm trong bộ chọn đấy.

Ở ví dụ trên bạn có thể hiểu được là biến $text-success được khai báo bên trong bộ chọn selector của h2 nên thẻ span nằm trong h2 có thế sử dụng được nhưng h3 thì không.

Để h3 sử dụng được biến trên thì ta thêm !global như dưới đây là ok

3. Data Types

Sass hỗ trợ 8 kiểu dữ liệu khác nhau:

• numbers: 1.2, 13, 10px
• strings of text, có hoặc không có dấu nháy: “foo”, ‘foo’, foo
• colors: blue, green, #04a3f9, rgba(255, 0, 0, 0.5)
• booleans: true, false
• nulls: null
• lists of values, ngăn cách nhau bởi dấu cách hoặc dấu phẩy: 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps from one value to another: (key1: value1, key2: value2)
• function references

4. Operations

Sass hỗ trợ các kiểu toán tử so sánh, tính toán cộng, trừ, nhân, chia, lấy dư. Ngoài ra còn dùng được khi nối chuỗi.

4.1. Number Operations

Các kiểu hỗ trợ tính toán so sánh áp dụng với Data Types là Number. Xem ví dụ dưới đây để hiểu cách làm việc của Sass (lưu ý đặc biệt giữa kí hiệu slash / và phép chia /)

Kết quả

4-2. Color Operations

Sass hỗ trợ việc tính toán các giá trị màu sắc lần lượt dựa trên 3 màu chính red, green, blue

• Với ex1: 01 + 04 = 05, 02 + 05 = 07, 03 + 06 = 09
• Với ex2: 01 * 2 = 02, 02 * 2 = 04, 03 * 2 = 06
• Với ex3: cộng giá trị tương ứng với mỗi phần tử

4-3. String Operations

Nối chuỗi lại với nhau sử dụng dấu +, lưu ý chỉ áp dụng với Data Types là String

Kết quả

4-4. Interpolation

Sử dụng để lấy giá trị của một biến gán vào bộ chọn selector hoặc tên của thuộc tính sử dụng kí tự #{ }

Kết quả