Cách chuyển đổi CSS cũ sang ÍT
Chúng tôi đã trình bày nhiều điều cơ bản cho LESS trong các bài viết trước của chúng tôi. Nếu bạn đã theo dõi loạt LESS của chúng tôi, chúng tôi tin rằng tại thời điểm này, bạn đã có một ý tưởng hay về cách sử dụng Biến, Hỗn hợp và Hoạt động trong bài.
Chúng tôi cũng đã đề cập đến cách chuyển đổi LESS thành CSS thông thường, với một ứng dụng hoặc với trình biên dịch. Nhưng, làm thế nào để chúng ta làm ngược lại; để chuyển đổi CSS thành LESS? Vâng, mẹo này là dành cho bạn.
Sử dụng một công cụ
Với sự phổ biến ngày càng tăng của Bộ tiền xử lý CSS, một số công cụ và ứng dụng mới chủ yếu hướng đến cuộc sống của nhà thiết kế web hoặc nhà phát triển makea dễ dàng hơn, chẳng hạn như công cụ này: CSS2Less.
Công cụ này cho phép chúng tôi chuyển đổi CSS thông thường thành LESS. Vì vậy, hãy thử xem. Tôi có các quy tắc CSS sau từ tệp cũ của mình sẽ được chuyển đổi.
điều hướng chiều cao: 40px; chiều rộng: 100%; nền: # 000; viền dưới: 2px solid #fff; nav ul đệm: 0; lề: 0 tự động; nav li hiển thị: nội tuyến; phao: trái; điều hướng màu: #fff; hiển thị: khối nội tuyến; chiều rộng: 100px; bóng văn bản: 1px 1px 0px # 000; nav li a Border-right: 1px solid #fff; kích thước hộp: hộp viền; nav li: con cuối cùng a Border-right: 0; điều hướng a: di chuột, điều hướng
Đây là kết quả.
điều hướng a: di chuột, điều hướng a: hoạt động màu nền: #fff; điều hướng chiều cao: 40px; chiều rộng: 100%; nền: # 000; viền dưới: 2px solid #fff; một màu: #fff; hiển thị: khối nội tuyến; chiều rộng: 100px; bóng văn bản: 1px 1px 0px # 000; ul đệm: 0; lề: 0 tự động; li: con cuối cùng a Border-right: 0; li hiển thị: nội tuyến; phao: trái; a Border-right: 1px solid #fff; kích thước hộp: hộp viền;
Như chúng ta có thể thấy ở trên, CSS cũ của chúng ta hiện được lồng vào như trong LESS.
Giới hạn
Tuy nhiên, chúng tôi cũng có thể thấy một số hạn chế trong kết quả của chuyển đổi. Trong CSS cũ, chúng ta có một số màu giống nhau, chẳng hạn như trong hai khai báo này viền dưới: 2px solid #fff; và viền phải: 1px solid #fff; chúng tôi có cả hai biên giới màu trắng. Trong LESS chúng ta thực sự có thể lưu trữ giá trị không đổi này trong một Biến.
Nó cũng không làm tổ và tách rời giả- * với ký hiệu dấu và (&), chẳng hạn như trong các quy tắc sau li: con cuối và điều hướng a: di chuột, điều hướng a: hoạt động. Chúng vẫn như cũ, nơi chúng ta thực sự có thể đơn giản hóa các quy tắc theo cách này;
li &: con đầu lòng a &: hover &: active
Phần kết luận
Mặc dù có những hạn chế hiện tại vẫn còn, công cụ này có thể khá hữu ích trong việc tiết kiệm thời gian của chúng tôi để lồng các quy tắc CSS. Chúng ta chỉ cần làm phần còn lại bằng tay; có thể cho đến khi những hạn chế ở trên là đã giải quyết.
