Cách sử dụng Bộ tiền xử lý CSS LESS trên VPS Ubuntu
Về LESS
LESS là một trình xử lý trước CSS cho phép bạn tạo các bảng định kiểu theo cách hiệu quả và thông minh hơn nhiều so với việc sử dụng CSS phẳng đơn giản. Nó cung cấp một số thành phần động sẽ làm cho mã của bạn nhỏ hơn, tái sử dụng nhiều hơn và có thể mở rộng hơn. Cú pháp của nó khá dễ hiểu và thay vào đó nó được bổ sung thêm CSS thông thường hơn là thay thế nó.
Có 2 cách chính bạn có thể sử dụng LESS: phía server hoặc phía client . Trường hợp đầu tiên cần Node.js để biên dịch sang css, trong khi đối với trường hợp thứ hai, bạn cần download file javascript và đưa nó vào trang web . Cách thứ hai này không thực sự được khuyến khích cho các trang web production , nhưng có một chế độ xem theo định hướng phát triển mà bạn nên xem nếu quan tâm.
Trong hướng dẫn này, ta sẽ thấy cách bạn có thể cài đặt LESS và bắt đầu sử dụng nó ở phía server . Đối với điều này, nó giả sử bạn đang chạy VPS của riêng mình với Ubuntu và một web server được cài đặt (nếu bạn muốn xem nội dung nào đó trong trình duyệt). Ngoài ra, bạn sẽ phải cài đặt Node.js và NPM (Node Package Manager). Nếu bạn chưa có, hãy làm theo các bước được nêu trong hướng dẫn này để cài đặt .
Cài đặt
Vì vậy, giả sử bạn đã cài đặt xong Node.js và NPM, ta có thể chạy lệnh sau để cài đặt LESS:
npm install -g less
Sau khi cài đặt trên VPS của bạn, bạn có thể sử dụng dòng lệnh để hướng dẫn LESS biên dịch ít file hơn sang .css. Để dùng thử, hãy truy cập folder root của web server của bạn (mặc định là / var / www trong Apache) và tạo file .less:
nano /var/www/test.less
Bên trong file này, hãy dán khai báo css sau ( lưu ý ngôn ngữ LESS về cơ bản là css với một số bổ sung tuyệt vời ở trên cùng):
#box {
color:red;
}Để LESS biên dịch file này thành css và xuất kết quả trong terminal, hãy chạy lệnh sau:
lessc /var/www/test.less
Bạn sẽ thấy kết quả được in trong cửa sổ terminal của bạn . Để ghi kết quả này vào file .css (nhiều trường hợp phổ biến hơn), hãy chỉ định đích file :
lessc /var/www/test.less > /var/www/test.css
Đến đây bạn sẽ có một file .css mới chứa các câu lệnh css đã biên dịch từ file .less.
Nếu bạn muốn LESS cũng giảm thiểu css kết quả, hãy thêm tùy chọn sau vào lệnh: -x
lessc /var/www/test.less > /var/www/test.css -x
Điều này sẽ tạo css thu nhỏ sẵn sàng production . Để biết thêm thông tin về các tùy chọn bạn có thể chuyển cho lệnh LESS, hãy truy cập trang này hoặc chạy lệnh lessc mà không có bất kỳ tham số nào.
Ngôn ngữ LESS
Vậy tại sao LESS lại tuyệt vời như vậy và bạn có nên thử nó thay vì css đơn giản? Dưới đây ta sẽ xem xét một số lý do tại sao.
Biến:
Với LESS, bạn có thể sử dụng các biến trong css của bạn . Ví dụ:
@white: #fff;
#white-box {
color: @white;
}Sẽ biên dịch thành:
#white-box {
color: #fff;
}Vì vậy, bạn có thể xác định những thứ như màu sắc một lần và sau đó dễ dàng sử dụng lại chúng trên các bảng định kiểu của bạn .
Mixin:
Mixin là để sử dụng lại các khai báo kiểu hiện có. Khi bạn khai báo chúng, bạn có thể sử dụng lại chúng trên các bảng định kiểu của bạn .
Ví dụ, thông tin như thế này:
.shape {
size: 100%;
padding: 20px;
}
.box {
.shape;
background-color: red;
}Sẽ biên dịch thành:
.box {
size: 100%;
padding: 20px;
background-color: red;
}Vì vậy, khai báo đầu tiên là một mixin - trong trường hợp này giống như một biến phức tạp hơn - giá trị của nó sau đó ta chèn vào một khai báo khác (của phần tử .box ).
Làm tổ:
Một điều thú vị khác là bạn có thể lồng các khai báo. Ví dụ:
.box {
color: red;
.box-inner {
max-width: 80%
}
}Sẽ biên dịch thành:
.box {
color: red;
}
.box .box-inner {
max-width: 80%
}Vì vậy, thay vì lặp lại mã của ta , ta lồng mọi thứ lại với nhau một cách hợp lý.
Hoạt động:
Với LESS, bạn có thể dễ dàng thực hiện các thao tác trên số và giá trị biến. Ví dụ:
@length: 10px + 20;
.box {
width: @length / 2;
}Sẽ xuất ra css sau:
.box {
width: 15px;
}Vì vậy, LESS có thể chuyển đổi đơn vị thành số và thực hiện các phép tính. Điều này cũng áp dụng cho màu sắc và bạn có thể làm một số thứ thực sự thú vị và năng động ngay trong bảng định kiểu của bạn .
Chức năng:
LESS đi kèm với một số hàm được định nghĩa mà bạn có thể sử dụng để thao tác khía cạnh của các phần tử HTML trong bảng định kiểu của bạn . Ví dụ:
.box {
color: saturate(#398bce, 5%);
}Hàm saturate () sẽ thực hiện độ bão hòa 5% trên thuộc tính màu của phần tử .box . Để biết thêm thông tin về những chức năng bạn có trong LESS, bạn có thể truy cập trang tham khảo này .
Nhập khẩu:
LESS cho phép bạn cấu trúc các bảng định kiểu của bạn và tổ chức chúng một cách hợp lý. Bạn có thể tạo nhiều file chứa mã có liên quan và sau đó nhập chúng vào một file khác. Bạn có thể làm điều này với câu lệnh sau:
@import "base";
Điều này sẽ bao gồm tất cả các khai báo bạn đã thực hiện trong file base.less nằm trong cùng folder với file bạn đang nhập từ đó. Bằng cách này, bạn sẽ có sẵn các biến và mixin ở bất cứ đâu bạn muốn. Một điều cần lưu ý là nếu bạn không chỉ định phần mở rộng file , LESS sẽ tự động coi file đã nhập là file .less. Nếu bạn muốn nhập một file .css đơn giản, bạn có thể chỉ định phần mở rộng và sẽ được xử lý tương ứng. Nếu bất kỳ phần mở rộng nào khác được chỉ định, phần mở rộng đó sẽ lại được coi là file .less.
Kết luận
Trong bài viết này, ta đã thấy một chút sức mạnh của việc sử dụng LESS để quản lý và sử dụng bảng định kiểu của bạn tốt hơn. Ta đã thấy cách cài đặt và sử dụng nó ở phía server và một cái nhìn sơ lược về những cải tiến ngôn ngữ mà nó mang lại cho css thông thường. Bạn được khuyến khích đọc thêm từ trang web chính thức của LESS và tìm hiểu thêm về tất cả những điều bạn có thể làm với nó.
Ngoài ra, nếu bạn quan tâm, có sẵn các ứng dụng GUI giúp bạn làm việc với LESS ngay trên máy tính của bạn . Điều này cũng bao gồm việc biên dịch các file .less thành css. Bạn có thể tìm thấy các trình biên dịch đa nền tảng như Crunch hoặc Mixture hoạt động trên cả Windows và Mac nhưng cũng có thể là những trình biên dịch dành cho các nền tảng cụ thể. Bạn có thể kiểm tra chúng ở đây .
Ngoài ra, tôi cũng khuyến khích bạn nên xem Sass, một bộ xử lý tiền CSS phổ biến khác. Có một hướng dẫn về DigitalOcean có thể giúp bạn bắt đầu với điều đó.
Các tin liên quan
