CSS ít hơn là gì và bạn sử dụng nó như thế nào?
Nếu bạn là một nhà phát triển CSS có kinh nghiệm, bạn sẽ nhận thức rõ những nhược điểm của ngôn ngữ này. Nó vẫn thiếu sự hỗ trợ rộng rãi cho các tính năng được yêu cầu từ lâu như lồng ghép và trộn.
Ít hơn (Leaner Style Sheets) là một phần mở rộng của CSS với nhiều tính năng mạnh mẽ. Nếu bạn biết CSS thì học Less rất dễ vì cú pháp của Less rất giống nhau.
Mục Lục
Cách cài đặt Ít hơn
Bạn có thể cài đặt Ít hơn với Trình quản lý gói JavaScript, NPM bằng cách chạy:
npm install less -g
Sau khi cài đặt, bạn có thể biên dịch .ít hơn tập tin để .css sử dụng ítc yêu cầu. Ví dụ, lệnh sau biên dịch style.less và đưa ra kết quả trong một phong cách.css tài liệu.
lessc style.less style.css
Các biến trong ít hơn
Không giống như CSS thông thường sử dụng toán tử “–” để xác định các biến, Ít hơn xác định các biến bằng ký hiệu “@”. Ví dụ:
@width: 40px;
@height: 80px;
Khối mã chỉ cần tạo hai biến, chiều rộng và chiều cao chứa hai giá trị tương ứng: 40px và 80px. Thực tế phổ biến là lấy các giá trị thường được sử dụng trong CSS và lưu trữ chúng trong một biến. Điều này giúp dễ dàng sửa đổi các giá trị đó vì chỉ có một nguồn kiểm soát.
Đây là cách bạn có thể sử dụng các biến trong Ít hơn. Tạo ra một chỉ mục.htm tệp và thêm mã soạn sẵn sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Using Less CSS</title>
</head>
<body>
<div>
Hello from the children of planet Earth!
</div>
</body>
</html>
Tiếp theo, tạo một style.less tập tin và thêm vào như sau:
@width: 400px;
@height: 400px;
@vertical-center: center;
@txt-white: white;
@bg-red: rgb(220, 11, 11);
@font-40: 40px;div {
width: @width;
height: @height;
display: flex;
color: @txt-white;
background-color: @bg-red;
font-size: @font-40;
}
Bây giờ, khi bạn có thể biên dịch .ít hơn tập tin để .css sử dụng ítc yêu cầu:
lessc style.less style.css
CSS được biên dịch sẽ trông như thế này:
div {
width: 400px;
height: 400px;
display: flex;
color: white;
background-color: #dc0b0b;
font-size: 40px;
}
Khi bạn mở trình duyệt của mình, đây là những gì bạn sẽ thấy:
Bạn có thể làm được nhiều điều hơn nữa với các biến trong Ít hơn, chẳng hạn như phép nội suy cho phép bạn sử dụng các biến làm tên bộ chọn, URL, v.v. Đây là một ví dụ về cách thực hiện nội suy biến:
@custom-selector: container;.@{custom-selector} {
padding: 10px;
margin: 10px;
border: solid 10px;
}
Khối mã trên sử dụng @{…} mệnh đề để sử dụng một biến làm bộ chọn. Khi được biên dịch, mã sẽ cho kết quả như sau:
.container{
padding: 10px;
margin: 10px;
border: solid 10px;
}
Phép toán số học trong Ít hơn
Ít hơn cũng cung cấp hỗ trợ cho các phép toán số học như cộng, trừ, chia và nhân. Các hoạt động này hoạt động với các hằng số, giá trị và biến.
@variable-1: 5px;
@variable-2: @variable-1 * 2
@variable-3: 10px + @variable-2
Cách sử dụng Mixin
Mixins cho phép bạn sử dụng lại các kiểu (hoặc mã CSS) trong toàn bộ biểu định kiểu. Các tiện ích mở rộng CSS khác như Sass cũng cung cấp Mixins. Để minh họa cách mixin hoạt động trong Ít hơn, hãy tạo một index.htm và thêm đoạn mã sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Using Less CSS</title>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta
architecto repudiandae ipsum animi velit id iste dolore reprehenderit
dolorum! Voluptate quos autem culpa et sit, assumenda reiciendis
facilis unde sequi.
</p>
</body>
</html>
Tiếp theo, tạo một style.less tập tin và thêm các dòng sau:
.sample-text() {
background-color: yellow;
}.first-letter() {
background-color: red;
color: white;
font-size: 30px;
}
p {
.sample-text();
}
p::first-letter {
.first-letter();
}
Trong khối mã ở trên, có hai lớp mixin: .sample-text Và .chữ cái đầu tiên. Khi bạn muốn sử dụng một mixin trong một phần khác của biểu định kiểu, chỉ cần tham chiếu nó theo tên với dấu ngoặc đơn ở cuối: .mixin(). Trong trình duyệt, bạn sẽ thấy một cái gì đó như thế này:
Phong cách Nesting trong ít hơn
Giả sử bạn có một div cha với hai phần tử là con của nó: a P phần tử và một phần tử khác div. Thông thường, nếu bạn muốn tạo kiểu cho P phần tử có màu đỏ và div các phần tử có màu xanh lục, bạn có thể sử dụng phương pháp sau:
div p {
color: red;
}div {
color: green
}
Ít hơn cung cấp chức năng tương tự thông qua việc sử dụng làm tổ. Vì vậy, trong trường hợp này, tương đương Ít hơn của khối mã ở trên sẽ là:
div {
color: green; p {
color: red;
}
}
Điều này không chỉ giúp bạn dễ hiểu hơn mà còn giúp mã dễ bảo trì hơn. Tham chiếu bộ chọn gốc với less dễ dàng hơn với & nhà điều hành. Ví dụ:
button {
background-color: blue;
border: none; &:hover {
background-color: grey;
transform: scale(1.2);
}
}
Khối mã ở trên sẽ dẫn đến mã CSS sau khi được biên dịch:
button {
background-color: blue;
border: none;
}button:hover {
background-color: grey;
transform: scale(1.2);
}
Hiểu phạm vi và chức năng trong ít hơn
Giống như các ngôn ngữ lập trình thông thường, các biến có phạm vi của khối mà bạn định nghĩa chúng. Để minh họa điều này, hãy tạo một chỉ mục.htm tệp và thêm mã soạn sẵn HTML đầu tiên được cung cấp trước đó. Sau đó thêm khối sau vào thân hình nhãn:
<div class="outer-div">
Outer Div should be red.
<br />
<span class="inner-div">
Inner div should be green.
</span>
</div>
bên trong style.less tập tin, thêm các dòng sau:
@bg-color: red;body {
font-size: 40px;
color: white;
margin: 20px;
}
.inner-div {
@bg-color: green;
background-color: @bg-color;
}
.outer-div {
background-color: @bg-color;
}
Các div trong khối xác định lại màu bg biến, nằm trong phạm vi chỉ khối đó. Vì vậy, màu xanh lá cây chỉ áp dụng cho lớp đó và không ảnh hưởng đến toàn cầu màu bg Biến đổi. Khi bạn biên dịch và mở kết quả trong trình duyệt, đây là những gì bạn sẽ thấy:
Ít hơn cũng cung cấp các chức năng tiện dụng có thể hữu ích trong một số tình huống. Ví dụ: nếu bạn chỉ muốn đặt kiểu khi một điều kiện nhất định được đáp ứng, bạn có thể thực hiện điều đó với nếu như chức năng. Hàm này có cú pháp như sau:
if((condition), value1, value2)
Mã trả về giá trị1 nếu điều kiện được đáp ứng và giá trị2 nếu không thì. Đây là một ví dụ:
@var1: 20px;
@var2: 20px;div {
padding: if((@var1 = @var2), 10px, 20px);
}
Khối mã ở trên sẽ dẫn đến CSS sau khi được biên dịch:
div {
padding: 10px;
}
Làm nhiều hơn với ít hơn và các phần mở rộng CSS khác
Hàng nghìn nhà phát triển sử dụng Ít hơn để làm cho việc viết CSS trở nên thú vị hơn. Các tính năng tuyệt vời như hàm, mixin và biến chỉ là một phần nhỏ trong những gì Ít hơn cung cấp.
Ít phù hợp cho cả dự án nhỏ và lớn. Điều đáng chú ý là các ngôn ngữ mở rộng CSS tuyệt vời không kém khác như Sass và Stylus CSS cũng đáng để kiểm tra.