CSS Variables với mã nguồn Blogspot

Trong quá trình viết CSS cho website, ta thường gặp phải các thuộc tính trùng lặp về giá trị như color, background-color, font-size, font-weight... việc viết đi viết lại sẽ rất khó cho khâu bảo trì, nâng cấp. Vì vậy thuật ngữ biến trong css (CSS Variables) được ra đời giúp cho việc xử lý chúng được tối ưu hơn. Qua bài viết này bạn sẽ biết được cách áp dụng CSS Variables vào mã nguồn Blogspot

Sử dụng hàm var()

Đây là hàm mới được trang bị cho CSS, bạn có thể đặt biến và gọi biến trực tiếp trong thẻ style mà không cần qua các CSS Preprocessors như SASS hay LESS. var() được youtube sử dụng rất nhiều

Cấu trúc

var(custom-name, value)

Trong đó

Value	Description
custom-name	Required. The custom property's name (must start with two dashes)
value	Optional. The fallback value (used if the custom property is invalid)

Ví dụ

<style>
:root {
  --main-bg-color: coral;
  --main-txt-color: blue; 
  --main-padding: 15px; 
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
</style>

Sử dụng b:skin

b:skin là thẻ được dùng trong Blogger để viết code CSS tương tự như thẻ style. Điểm khác biệt đó là nếu trong b:skin xuất hiện code markup của blogger chúng sẽ được render ra mã css tương ứng. Vì vậy bạn có thể dùng nó để viết css nâng cao

Biến trong b:skin định nghĩa bằng thẻ <Variable> được viết trong phần chú thích <![CDATA[ ... ]]>, có 2 kiểu đặt tên cho biến: tenbien (viết liền không dấu) và ten.bien (không dấu và có dấu ".").

Cấu trúc

<b:skin><![CDATA[

/* Variable definitions:
<Variable name="tenbien" description="Phần mô tả của biến" type="kiểu giá trị" default="giá trị mặc định" value="giá trị hiện tại"/>
<Variable name="ten.bien" description="Phần mô tả của biến" type="kiểu giá trị" default="giá trị mặc định" value="giá trị hiện tại"/>
-----------------------------------------------*/

]]></b:skin>

Các thuộc tính

• name: tên của biến để gọi ra để sử dụng, thông thường ta viết liền hoặc ngăn nhau bằng dấu "."
• description: mô tả cho biến (nó sẽ hiện trong phần cài đặt nâng cao nếu nằm trong Group)
• type: kiểu giá trị để sử dụng hiện tại nhưng những cái này không ảnh hướng gì nhiều, nó chỉ quy định cho giá trị ở phần default và value
• color: kiểu màu sắc
• font: kiểu font chữ
• string: kiểu ký tự
• url: kiểu đường dẫn
• length: kiểu độ dài
• automatic: kiểu tự động
• default: giá trị mặc định
• value: giá trị được lấy ta gọi biến ra

Cách thức gọi giá trị của biến vào CSS

body {
  background-color: $tenbien; /* Tên biến viết liền thì viết sau kí tự "$" */
  color: $(ten.bien); /* Có dấu "." thì được viết trong ngoặc () */
}

Ví dụ

<b:skin><![CDATA[
/*
   <Variable name="hovercolor" description="Hover color" type="color" default="#d70f0f"  value="#d70f0f"/>
   <Variable name="active.color" description="Active color" type="color" default="#e70f0f"  value="#e70f0f"/>
*/

a:hover{color:$hovercolor}
a:active{color:$(active.color)}
]]></b:skin>

Như vậy tôi đã giới thiệu xong 2 cách sử dụng CSS Variables với mã nguồn Blogspot, việc thành thạo chúng giúp bạn tiết kiệm rất nhiều thời gian, công sức trong khâu bảo trì cũng như tăng độ chuyên nghiệp trong khâu lập trình thiết kế.

Good luck !