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 $text-success: #3c763d;h1.big-title {color:$text-success;} Kết quả h1.big-title{color: #3c763d;} 2. Global Variables Ở ví dụ trên nếu ta

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

$text-success: #3c763d;h1.big-title {color:$text-success;}

Kết quả

h1.big-title{color: #3c763d;}

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.

h2 {$text-success: #3c763d;span {color:$text-success;}}h3 {color:$text-success;}

Ở 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

h2 {$text-success: #3c763d !global;span {color:$text-success;}}h3 {color:$text-success;}

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 /)

p {font: 10px/8px;// Plain CSS, no division$width: 1000px;width:$width/2;// Uses a variable, does divisionheight:(500px/2);// Uses parentheses, does divisionline-height:round(1.5)/2;// Uses a function, does divisionmargin-left: 5px + 8px/2px;// Uses +, does divisionfont:(italic bold 10px/8px);// In a list, parentheses don't count}

Kết quả

p{font: 10px/8px;width: 500px;height: 250px;line-height: 1;margin-left: 9px;font: italic bold 10px/8px;}

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

.ex1 {color: #010203 + #040506;}.ex2 {color: #010203 * 2;}.ex3 {color:rgba(255, 0, 0, 0.75)+rgba(0, 255, 0, 0.75);}
  • 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ử
.ex1{color: #050709;}.ex2{color: #020406;}.ex3{color:rgba(255, 255, 0, 0.75);}

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

p:before {content:"Foo "+ Bar;font-family: sans- +"serif";margin: 3px + 4px auto;}

Kết quả

p:before{content:"Foo Bar";font-family:"san-serif";margin: 7px auto;}

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ự #{ }

$name: foo;$attr: border;$font-size: 12px;$line-height: 30px;//wrongp.$name{$attr-color: blue;font:$font-size/$line-height;}//correctp.#{$name}{#{$attr}-color: blue;font:#{$font-size}/#{$line-height};}

Kết quả

p.foo{border-color: blue;font: 12px/30px;}

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ