Hướng dẫn how do i declare a variable in css file? - làm cách nào để khai báo một biến trong tệp css?

Giống như hầu hết các ngôn ngữ lập trình, CSS bản địa hiện có hỗ trợ cho các biến và họ ở đây để ở lại.

Nếu bạn biết một chút CSS, rất có thể bạn đã nghe nói về các tiền xử lý CSS như SASS và ít hơn. Bạn có thể đã sử dụng chúng trong các dự án của mình bất kể khuôn khổ của bạn là Frontend Framework. Hoặc có thể bạn thiên đường và bạn đã sử dụng CSS cũ đơn giản.

Dù bằng cách nào, điểm bán hàng chính của các tiền xử lý đó là bạn có thể sử dụng các biến giống như bạn làm bằng ngôn ngữ lập trình. Bạn khai báo một biến, gán cho nó một giá trị và sử dụng nó trên tài liệu để làm cho khả năng bảo trì trở nên dễ dàng.

Trong hướng dẫn này, chúng tôi sẽ cung cấp một giới thiệu mềm mại cho khái niệm này bằng cách làm sáng tỏ các biến CSS đầu tiên và sau đó xây dựng hai dự án đơn giản sử dụng nó. Nếu bạn háo hức tham gia vào hành động càng sớm càng tốt, bạn có thể tìm thấy mã cho cả hai dự án trên Codepen (ở đây và đây).here and here).

Một số kiến ​​thức CSS cơ bản được yêu cầu phải tuân theo với hướng dẫn này. Không có gì khó chịu, hãy để Lặn lặn vào!

Những gì chúng tôi sẽ xây dựng

Để củng cố kiến ​​thức của chúng tôi về các biến CSS, chúng tôi sẽ xây dựng hai dự án rất đơn giản. Đầu tiên sẽ trình bày cách tạo các biến thể nút. Khái niệm này là phổ biến trong Bootstrap, trong đó các yếu tố nhất định chia sẻ các quy tắc CSS cung cấp cho họ thiết kế mặc định nhưng được phân biệt bởi màu sắc hoặc các thuộc tính khác. Dự án thứ hai sẽ là một thiết kế dựa trên chủ đề-cụ thể, một chủ đề nhẹ và sáng được JavaScript thao túng.

Cách sử dụng các biến CSS

Cũng được gọi là thuộc tính tùy chỉnh hoặc biến xếp tầng, các biến CSS có các trường hợp sử dụng myRaid. Một trong những phổ biến nhất là quản lý các trang web trong đó nhiều giá trị tương tự như trong tài liệu. Điều này giúp giảm ma sát liên quan đến việc tái cấu trúc hoặc cập nhật mã của bạn.

Những thứ cơ bản

Để khai báo một biến trong CSS, hãy đưa ra một tên cho biến, sau đó nối hai dấu gạch nối ( -) là tiền tố.

element {
  --bg-color: #405580;
}

body {
  background-color: var(--bg-color);
}

Tên biến là

body {
  background-color: var(--bg-color);
}

body {
  background-color: var(--bg-color);
}

body {
  background-color: var(--bg-color);
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

body {
  background-color: var(--bg-color);
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

Tuyên bố các biến của bạn ở đây hiển thị chúng trên toàn cầu và có sẵn cho toàn bộ tệp.

Biến CSS kế thừa

Giống như CSS truyền thống, các biến CSS đang xếp tầng trong tự nhiên - tức là, chúng được thừa hưởng. Giá trị của một phần tử được kế thừa từ cha mẹ của nó nếu không có thuộc tính tùy chỉnh được xác định.

HTML:

  
  

    
Heading text
    
Paragraph text
  

CSS:

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

Phần đệm của các lớp

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

Giá trị dự phòng và không hợp lệ

Khi sử dụng các thuộc tính tùy chỉnh, bạn có thể tham chiếu một thuộc tính tùy chỉnh được xác định trong tài liệu. Bạn có thể chỉ định giá trị dự phòng sẽ được sử dụng thay cho giá trị đó. Cú pháp cung cấp giá trị dự phòng vẫn là ký hiệu

body {
  background-color: var(--bg-color);
}

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

Bạn có nhận thấy rằng tôi đã viết sai giá trị

  
  

    
Heading text
    
Paragraph text
  

Một trường hợp sử dụng khác cho các giá trị dự phòng là khi một giá trị không hợp lệ với một thuộc tính được cung cấp.

:root { 
  --text-danger: 16px; 
} 

body { 
  color: var(--text-color); 
} 

Trong đoạn trích này, thuộc tính tùy chỉnh

  
  

    
Heading text
    
Paragraph text
  

  
  

    
Heading text
    
Paragraph text
  

  
  

    
Heading text
    
Paragraph text
  

  
  

    
Heading text
    
Paragraph text
  

  
  

    
Heading text
    
Paragraph text
  

Trình duyệt coi nó là một giá trị không hợp lệ và kiểm tra xem thuộc tính màu có thể được kế thừa bởi một phần tử cha hay không. Nếu có, nó sử dụng nó. Nếu không, nó rơi trở lại màu mặc định (màu đen trong hầu hết các trình duyệt).

Bây giờ, hãy để đào sâu vào dự án đầu tiên của chúng tôi.

Dự án 1: Xây dựng một biến thể nút

Trong các khung CSS như bootstrap, các biến làm cho việc chia sẻ thiết kế cơ sở trên các yếu tố dễ dàng hơn nhiều. Lấy lớp

  
  

    
Heading text
    
Paragraph text
  

Bắt đầu bằng cách tạo một thư mục dự án. Trong thiết bị đầu cuối của bạn, bạn có thể chạy các lệnh này lần lượt.

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

# create a base project folder
mkdir css-variables-pro 

# change directory to the created folder 
cd css-variables-pro

# create a new folder for the first project
mkdir button-variations

# change directory to the new folder
cd button-variations

# create two files
touch variations.html variations.css

Điều này sẽ tạo ra một thư mục dự án có tên là

  
  

    
Heading text
    
Paragraph text
  

Dán đoạn trích sau đây trong tệp

  
  

    
Heading text
    
Paragraph text
  

  
    
    
    
    
    
  
  
    

      

        
CSS Color Variations
        

          Primary
          Secondary
          Link
          Success
          Error
        
      
    
  

Cấu trúc của đánh dấu này là khá chuẩn. Lưu ý cách mỗi phần tử nút có hai lớp: lớp

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

Dán đoạn trích này vào tệp

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

/* css-variables-pro/button-variations/variations.css */

* {
 border: 0;
}
:root {
 --primary: #0076c6;
 --secondary: #333333;
 --error: #ce0606;
 --success: #009070;
 --white: #ffffff;
}
/* base style for all buttons */
.btn {
 padding: 1rem 1.5rem;
 background: transparent;
 font-weight: 700;
 border-radius: 0.5rem;
 cursor: pointer;
 outline: none;
}
/* variations */
.primary {
 background: var(--primary);
 color: var(--white);
}
.secondary {
 background: var(--secondary);
 color: var(--white);
}
.success {
 background: var(--success);
 color: var(--white);
}
.error {
 background: var(--error);
 color: var(--white);
}
.link {
 color: var(--primary);
}

Lớp

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

:root {
  --primary-color: #0076c6;
  --blur: 10px;
}

Ví dụ: nếu ngày mai bạn quyết định giá trị cho thuộc tính tùy chỉnh

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

Đây là những gì dự án đầu tiên của bạn sẽ trông như thế nào:

Dự án 2: Xây dựng một chủ đề trang web trên toàn bộ

Trong dự án thứ hai, chúng tôi sẽ xây dựng một chủ đề nhẹ và sáng. Chủ đề ánh sáng sẽ có hiệu lực theo mặc định trừ khi người dùng đã đặt hệ thống của họ thành một chủ đề tối. Trên trang, chúng tôi sẽ tạo một nút chuyển đổi cho phép người dùng chuyển đổi giữa các chủ đề.

Mở thư mục ________ 37 & nbsp; bạn đã tạo trước đó. Bên trong thư mục, tạo một thư mục khác cho dự án thứ hai của bạn và đặt tên cho nó

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

body {
  background-color: var(--bg-color);
}

Tiếp theo, di chuyển vào thư mục theo chủ đề.

body {
  background-color: var(--bg-color);
}

Tạo ba tập tin mới.

body {
  background-color: var(--bg-color);
}

Phần này liên quan đến một chút JavaScript. Đầu tiên, hãy mở

.container {
  --padding: 1rem;
}
.container-inner {
  padding: var(--padding);
}
.post {
  --padding: 1.5rem;
}
.post-content {
  padding: var(--padding);
}

body {
  background-color: var(--bg-color);
}

Đoạn trích này đại diện cho một trang blog đơn giản với tiêu đề, nút chuyển đổi chủ đề, bài viết giả và liên kết đến cả các tệp CSS và JavaScript tương ứng.

Bây giờ, hãy mở tệp

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

body {
  background-color: var(--bg-color);
}

Đoạn trích này có thể được chia thành hai phần chính: phần Bố cục và phần thuộc tính tùy chỉnh. Sau này là những gì bạn nên tập trung vào. Như bạn có thể thấy, các biến được áp dụng ở trên trong các yếu tố liên kết, đoạn, tiêu đề và bài viết.

Ý tưởng đằng sau cách tiếp cận này là, theo mặc định, trang web sử dụng một chủ đề ánh sáng và khi hộp được kiểm tra, các giá trị cho chủ đề ánh sáng được đảo ngược vào một biến thể tối.

Vì bạn có thể kích hoạt các thay đổi trang web này thông qua CSS, JavaScript rất quan trọng ở đây. Trong phần tiếp theo, chúng tôi sẽ kết nối mã JavaScript cần thiết để chuyển đổi giữa các chủ đề ánh sáng và tối.

Ngoài ra, bạn có thể tự động kích hoạt thay đổi thông qua CSS bằng truy vấn phương tiện

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

Thêm đoạn trích sau đây vào tất cả các mã CSS bạn vừa viết.

body {
  background-color: var(--bg-color);
}

Chúng tôi đang nghe các cài đặt thiết bị của người dùng và điều chỉnh chủ đề thành tối nếu họ đã sử dụng một chủ đề tối.

Cập nhật tệp

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

body {
  background-color: var(--bg-color);
}

Bây giờ, hãy để chia nhỏ tình trạng hiện tại của trang web.

Một người dùng truy cập trang. Truy vấn phương tiện

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

Tùy thuộc vào việc hộp được kiểm tra hay không được kiểm soát, hàm

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

Hàm

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

:root {
  --light-gray: #ccc;
}

p {
  color: var(--light-grey, #f0f0f0, #f9f9f9) /* No --light-grey, so #f0f0f0 is 
  used as a fallback value */
}

Phần cuối cùng của câu đố vẫn tồn tại chủ đề hiện tại, đạt được bằng cách đọc chủ đề ưa thích cuối cùng từ bộ lưu trữ cục bộ và đặt nó tự động khi người dùng xem lại trang web.

Bạn có thể nghĩ về một triệu cách khác để đạt được điều này. Hãy thoải mái thông qua mã và thực hiện nhiều thay đổi như bạn thấy phù hợp.

Ở đây, dự án thứ hai của bạn sẽ trông như thế nào:

Sự kết luận

Bằng cách xây dựng các dự án đơn giản này, bạn có thể tìm hiểu cách sử dụng các biến CSS như Pro. Ở đó, chắc chắn với họ nhiều hơn tôi đã giải thích, vì vậy hãy thoải mái lộn xộn với mã để khám phá thêm.

Các biến CSS giúp đơn giản hóa cách bạn xây dựng các trang web và hoạt hình phức tạp trong khi vẫn cho phép bạn viết mã có thể tái sử dụng và thanh lịch. Để tìm hiểu thêm, hãy tham khảo tài liệu về MDN.

Frontend của bạn có phải là CPU của người dùng của bạn không?

Khi các mặt tiền web ngày càng phức tạp, các tính năng tài nguyên-tài nguyên đòi hỏi ngày càng nhiều từ trình duyệt. Nếu bạn quan tâm đến việc theo dõi và theo dõi việc sử dụng CPU phía máy khách, sử dụng bộ nhớ và nhiều hơn nữa cho tất cả người dùng của bạn trong sản xuất, hãy thử logrocket.https: //logrocket.com/signup/

Logrocket giống như một DVR cho các ứng dụng web và di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán tại sao các vấn đề xảy ra, bạn có thể tổng hợp và báo cáo về các số liệu hiệu suất chính, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, yêu cầu mạng nhật ký và tự động bề mặt tất cả các lỗi.

Hiện đại hóa cách bạn gỡ lỗi các ứng dụng web và di động - bắt đầu giám sát miễn phí.