Sử dụng hàm var() trong CSS3

Sử dụng hàm var() trong CSS

Trong CSS hàm var()trongCSS3được dùng để gọi thuộc tính tùy chỉnh đã được định nghĩa từ trước vào cấu trúc CSS và các thuộc tính tùy chỉnh này "THƯỜNG" được khai báo từ trước bằng bằng cấu trúc

:root {
	/* các thuộc tính css */
}

Và những thuộc tính được định nghĩa bởi :root có thể được sử dụng ở bất kì nơi nào trong tệp style. Tuy nhiên, điều đó không bắt buộc, có thể khai thác thuộc tính tùy chỉnh ở bất cứ nơi nào và tất nhiên chỉ có những phần tử con của nó mới có thể sử dụng được thuộc tính tùy chỉnh đó.

Cấu trúc sử dụng hàm var() trong CSS

Trước khi sử dụng được bất kì kiểu thuộc tính định dạng tùy chỉnh nào thì các ông phải khai báo nó trước bằng cấu trúc sau

--<tên-thuộc-tính>: <giá trị>;

Và sau đó có thể sử dụng nó bằng cấu trúc var() sau:

var(--<tên-thuộc-tính>,<các-giá-trị-dự-phòng>)

Trong đó<các-giá-trị-dự-phòng> các nhau bởi dấu phẩy, và nó chỉ được sử dụng nếu như --<tên-thuộc-tính> không tồn tại. Và tất nhiên, giá trụ dự phòng cuối cùng sẽ luôn được ưu tiến sử dụng trong trường hợp đó

Ví dụ

/* SỬ DỤNG :ROOT*/
:root {
	--color-mau-do : red ;
	--text-bold : bold ;
}
.element1 {
	color : var(--color-mau-do,blue);
	/* BLUE và YELLOW là các màu dự phòng nếu như --color-mau-do không tồn tại	*/
	font-weight: var(--text-bold,bolder);
}
.element2 {
	color : var(--color-mau-vang,blue);
	font-weight: var(--text-bolder,normal);
}

<span class="element1">Text hiển thị thử cho bài demo element1</span>
<span class='element2'>Text hiển thị thử cho bài demo element2</span>

/* KHÔNG SỬ DỤNG :ROOT */
.main {
	--color-mau-xanh : blue;
}
/* elements là một phần tử con của main */
/* do đó chỉ có elements mới áp dụng được 
   thuộc tính --color-mau-xanh */
.elements {
	color: var(--color-mau-xanh);
}
/* no-name-class không là phần tử con của main */
/* do đó no-name-class sẽ không áp dụng được 
   thuộc tính --color-mau-xanh */
.no-name-class {
	color: var(--color-mau-xanh);
}

<div class='no-name-class'>Huấn Rose đại thiên ca ca</div>
<div class='main'>
   <div class='elements'>Hôm nay ăn gì nhỉ?</div>
   <div class='elements'>Có làm thì mới có ăn không làm ăn cứt</div>
</div>

Code Vô Đối bản quyền bài viết của Code Vô Đối nhé thằng ăn cắp. https://codevodoi.blogspot.com Đit_cu_may !