Bạn có thể sử dụng một biến trong CSS không?

Khi viết mã CSS cho trang web của mình, bạn có thể sử dụng Thuộc tính tùy chỉnh CSS (Biến) để tăng tốc quá trình phát triển. Bạn có thể sử dụng các biến để xác định các thuộc tính (kích thước, màu sắc), sau đó có thể áp dụng các thuộc tính này cho một số phần tử

Bằng cách đó, có thể có nhiều quyền kiểm soát hơn đối với mã và thiết kế. Thay đổi giá trị của một biến ở một nơi sẽ ghi đè giá trị của thuộc tính đó ở mọi nơi nó được gọi.  

Bài đăng này sẽ giải thích cách sử dụng Biến CSS và một số ứng dụng thực tế.  

Hãy bắt đầu

Khai báo một biến

Các biến có thể có phạm vi toàn cục hoặc cục bộ. Để xác định một biến trên toàn cầu, bạn sử dụng. bộ chọn gốc

:root {
    --base-font-size: 1.1rem;
} 

Bộ chọn :root khớp với thư mục gốc của tài liệu, tức là  trong trường hợp cụ thể của chúng ta.  

Để khai báo Thuộc tính tùy chỉnh CSS (Biến), bạn bắt đầu bằng hai dấu gạch ngang (–). Các biến phân biệt chữ hoa chữ thường, ví dụ

#first-container {
    --background: #ccc;
}

#first-container {
    --background: #ccc;
}

Để xác định một biến cục bộ, bạn sử dụng bộ chọn của phần tử mà bạn muốn sử dụng biến đó

#first-container {
    --background: #ccc;
}

Khi bạn đã xác định biến, cần phải gọi nó.  

Hàm var()

Hàm _______1_______2 dùng để chèn giá trị của Biến CSS đã xác định. Hàm thay thế chính nó bằng giá trị của biến. Hãy xem xét một ví dụ.  

Mã HTML

• Sao chép và dán mã này vào trình chỉnh sửa mã của bạn.  
• Lưu tệp dưới dạng 

  #first-container {
      --background: #ccc;
  }

  3

	
	
	
	
	


	

    	

        	
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?
        	Click here!
    	
    	

        	
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.
        	Click here!
    	
    	

        	
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!
        	Click here!
    	
	

Mã CSS

• Tạo một tệp có tên 

  #first-container {
      --background: #ccc;
  }

  4 (trong cùng thư mục của

  #first-container {
      --background: #ccc;
  }

  5)
• Dán mã bên dưới và lưu tệp

/* Global styles */
.wrapper, div {
   padding: 1rem;
}

div {
   margin: 1rem auto;
}

/* DEFINITION OF VARIABLES */
:root {
   /* Color palette */
   --primary: #007bff;
   --success: #28a745;
   --warning: #ffc107;
   --white: #f9f9f9;
   --light-grey: #d8d8d8;

   /* Borders */
   /* It is possible to use an already declared variable within the definition of another variable */
   --border-primary: 1px solid var(--primary);
   --border-success: 1px solid var(--success);
   --border-warning: 1px solid var(--warning);
}

/* VARIABLES */
/* Wrapper */
.wrapper {
   background-color: var(--light-grey);
}

/* First Container */
.container-1 {
   /* The var() function replaces itself with the value of the variable */
   border: var(--border-primary);
   color: var(--primary);
   background-color: var(--white);
}

.container-2 {
   /* The var() function replaces itself with the value of the variable */
   border: var(--border-success);
   color: var(--success);
   background-color: var(--white);
}

.container-3 {
   /* The var() function replaces itself with the value of the variable */
   border: var(--border-warning);
   color: var(--warning);
   background-color: var(--white);
}

.container-1 button {
   background-color: var(--primary);
   color: var(--white);
}

.container-2 button {
   background-color: var(--success);
   color: var(--white);
}

.container-3 button {
   background-color: var(--warning);
   color: var(--white);
}<

button {   border-radius: 5px;
}

Có một số điều cần chú ý ở đây.

1. Tạo một bảng màu là một quá trình đơn giản
2. Có thể sử dụng một biến bên trong định nghĩa của một biến khác, giống như màu sắc trong định nghĩa của các biến viền
3. Các biến được kế thừa, thuộc tính màu của phần tử ____1_______6 ảnh hưởng đến các phần tử con trực tiếp của nó. Trong trường hợp này, phần tử

   #first-container {
       --background: #ccc;
   }

   7

Để ghi đè một biến, bạn khai báo nó bên trong vùng chứa của nó, làm cho nó cụ thể hơn

• Chỉnh sửa mã CSS

button {
	border-radius: 5px;
	/* Overriding a global variable */
	--primary: #021b35;
}

Biến và truy vấn phương tiện

Các biến cũng có thể được kế thừa và ghi đè trong các truy vấn phương tiện CSS

• Thêm mã này vào các biến

:root {
	/* Color palette */
	--primary: #007bff;
	--success: #28a745;
	--warning: #ffc107;
	--white: #f9f9f9;
	--light-grey: #d8d8d8;


	/* Borders */
	/* It is possible to use an already declared variable within the definition of another variable */
        --border-primary: 1px solid var(--primary);
	--border-success: 1px solid var(--success);
	--border-warning: 1px solid var(--warning);
	/* Width of the wrapper 1000px / 90% on smaller devices */
	--wrapper-width: 1000px;
}

Chúng tôi đã xác định một cơ sở

#first-container {
    --background: #ccc;
}

#first-container {
    --background: #ccc;
}

	
	
	
	
	


	

    	

        	
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?
        	Click here!
    	
    	

        	
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.
        	Click here!
    	
    	

        	
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!
        	Click here!
    	
	

• Thêm mã này vào cuối tệp CSS

.wrapper {
	width: var(--wrapper-width);	margin: 0 auto;
}

Để xác định truy vấn phương tiện cho các thiết bị có màn hình nhỏ hơn

	
	
	
	
	


	

    	

        	
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?
        	Click here!
    	
    	

        	
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.
        	Click here!
    	
    	

        	
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!
        	Click here!
    	
	

• Chỉnh sửa mã CSS

@media screen and (max-width: 1100px) {
	.wrapper {
    	--wrapper-width: 90%;
	}
}

Định nghĩa biến mới bên trong truy vấn phương tiện sẽ ghi đè giá trị của nó. Cũng lưu ý rằng biến có sẵn trong DOM, có nghĩa là nó có thể được truy xuất và thao tác bằng JS. Điều đó là không thể với các biến trong bộ tiền xử lý CSS.

Tóm lược

Các biến rất hữu ích để tổ chức và quản lý số lượng CSS nhỏ và lớn. Họ giảm sự lặp lại và do đó ngăn ngừa những sai lầm. Biến CSS là biến động, có nghĩa là chúng có thể được thay đổi trong thời gian chạy. Thật dễ dàng để tự động tạo chủ đề cho một trang web hoặc ứng dụng với các biến CSS. Chúng cung cấp khả năng gán giá trị cho thuộc tính CSS bằng tên tùy chỉnh. Các biến tuân theo các quy tắc xếp tầng tiêu chuẩn, vì vậy có thể xác định cùng một thuộc tính ở các mức độ đặc hiệu khác nhau

Tôi hy vọng bạn thích hướng dẫn này. Cảm ơn vì đã đọc.     

người hướng dẫn

• Jorge Montoya

  Jorge sống ở Ecuador và Đức. Bây giờ anh ấy đã trở về quê hương Colombia. Anh dành thời gian dịch từ tiếng Anh và tiếng Đức sang tiếng Tây Ban Nha. Anh ấy thích chơi với Drupal cũng như các Công nghệ và Hệ thống quản lý nội dung mã nguồn mở khác

  Các biến có thể được sử dụng trong CSS không?

  Các biến CSS có quyền truy cập vào DOM, nghĩa là bạn có thể tạo các biến có phạm vi cục bộ hoặc toàn cầu, thay đổi các biến bằng JavaScript và thay đổi các biến dựa trên truy vấn phương tiện. Một cách hay để sử dụng các biến CSS là khi nói đến màu sắc của thiết kế của bạn

  Làm cách nào để sử dụng biến trong CSS nội tuyến?

  Để xác định Biến CSS, cần thêm biến đó vào. khai báo gốc nếu nó là toàn cầu (. root tương đương với

  CSS hỗ trợ các biến khi nào?

  Bản thảo hoạt động đầu tiên của mô-đun biến CSS đã được xuất bản vào khoảng năm 2012 và các thuộc tính tùy chỉnh CSS cho các biến xếp tầng (vì nó được đổi tên chính xác hơn) cuối cùng đã thu hút được sự chú ý vào khoảng năm 2017 . . . . . . . . . . . . . . with browser support parity.

  Các biến CSS được gọi là gì?

  Thuộc tính tùy chỉnh (đôi khi được gọi là biến CSS hoặc biến xếp tầng) là các thực thể do tác giả CSS xác định có chứa các giá trị cụ thể sẽ được sử dụng lại trong toàn bộ tài liệu.