Các kiểu dữ liệu trong SASS

Kiểu dữ liệu là khái niệm quen thuộc ở tất cả các ngôn ngữ lập trình, trong Sass cũng vậy. Mỗi giá trị khác nhau sẽ mang kiểu dữ liệu khác nhau, mỗi kiểu dữ liệu sẽ mang những ý nghĩa riêng của nó. Dưới đây là những kiểu dữ liệu được Sass hỗ trợ

1. Numbers
2. Strings
3. Colors
4. Boolean values
5. null values
6. List of Values
7. Maps

Chúng ta cùng tìm hiểu chi tiết về các kiều dữ liệu trong Sass qua các ví dụ dưới đây nhé.

SASS Numbers

Qui định tất cả các giá trị là số (có đơn vị hoặc không có đơn vị)

@debug 100; /* 100 */
@debug 0.8; /* 0.8 */
@debug 16px; /* 16px */

SASS Numbers: Units

Sass có thể thực hiện các phép tính đối với cả những giá trị cùng đơn vị hoặc khác đơn vị. Và tự chuyển đổi kết quả của phép toán về đơn vị giống như ban đầu.

@debug 4px * 6px; /* 24px*px (read "square pixels") */
@debug 5px / 2s; /* 2.5px/s (read "pixels per second") */

Như đề cập ở trên, khi thực hiện phép tính trên phép, Sass sẽ tự động convert chúng tuy nhiên nếu có lỗi nó sẽ show ra message để chúng ta có thể nắm bắt được.

/* CSS defines one inch as 96 pixels. */
@debug 1in + 6px; /* 102px or 1.0625in */

@debug 1in + 1s;

/* ^^^^^^^^
* Error: Incompatible units s and in.
*/

SASS Strings

Kiểu dữ liệu String trong Sass đơn giản là những giá chị dạng chuỗi như mã màu, kiểu font chữ hay những giá trị string khác như bold, italic, underline,... Kiểu string là kiểu dữ liệu được dùng nhiều nhất trong Sass

@debug "Helvetica Neue"; /* "Helvetica Neue" */
@debug bold; /* bold */

SASS Colors

Giống với CSS, có rất nhiều cách để định nghĩa color cho một thẻ HTML nào đó trên trang. Trong Sass/Scss cũng vậy. Sass color cũng sử dụng các mã màu dạng Hex Code, Color names hay function rbg(), rgba(), hsl() hay hsla()

@debug #f2ece4; /* #f2ece4 */
@debug #b37399aa; /* rgba(179, 115, 153, 67%) */
@debug midnightblue; /* #191970 */
@debug rgb(204, 102, 153); /* #c69 */
@debug rgba(107, 113, 127, 0.8); /* rgba(107, 113, 127, 0.8) */
@debug hsl(228, 7%, 86%); /* #dadbdf */
@debug hsla(20, 20%, 85%, 0.7); /* rgb(225, 215, 210, 0.7) */

SASS Boolean

Cũng giống như những ngôn ngữ khác, kiểu boolean chỉ đơn giản là hai giá trị true hoặc false. Nó có thể là giá trị truyền trực tiếp vào hoặc là kết quả từ một phép so sánh

@debug 1px == 2px; /* false */
@debug 1px == 1px; /* true */
@debug 10px < 3px; /* false */

SASS Null

null là một giá trị đặc biệt và cũng là một kiểu dữ liệu. Ở hầu hết các ngôn ngữ đều có kiểu dữ liệu này

@debug &; /* null */

SASS List

Nếu các bạn đã làm việc với mảng (Array) trong các ngôn ngữ như Java, Javascript, PHP hay những ngôn ngữ khác. Các bạn sẽ thấy khái niệm List trong Sass giống với mảng. Trong Sass cũng cung cấp cho chúng ta các phương thức để làm việc với dữ liệu List như @for, @each và @while.

Giá trị bên trong List được phân biệt với nhau bởi dấu phảy (,) và chúng ta có 2 cách định nghĩa List trong Sass.

$listvar: 1, 2, 3;

/* using square barackets */

$sides: ["left", "right", "top", "bottom"];

SASS MAP

@use "sass:map"

$light-weights: ("lightest": 100, "light": 300)
$heavy-weights: ("medium": 500, "bold": 700)

@debug map.merge($light-weights, $heavy-weights)

// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)

@use "sass:map";

$weights: ("light": 300, "medium": 500)

@debug map.merge($weights, ("medium": 700))
// ("light": 300, "medium": 700)

Tổng kết

Bài viết này giúp các bạn nắm được các kiểu dữ liệu trong Sass qua các ví dụ cụ thể, từ đó ứng dụng hiệu quả hơn vào trong bài toán thực tế của mình.

Thanks for reading!