Khi nói đến phát triển web, cách phổ biến nhất để tạo kiểu cho ứng dụng là sử dụng CSS. Tuy nhiên, CSS có thể gặp rắc rối khi làm việc vì nó rất khó gỡ lỗi.
Tìm hiểu cách sử dụng Stylus CSS và bạn sẽ có một tùy chọn khác, với một trong những bộ tiền xử lý CSS phổ biến nhất hiện có.
Bộ tiền xử lý CSS là gì?
Bộ tiền xử lý CSS là công cụ giúp việc viết CSS dễ dàng hơn. Họ thường biên dịch mã từ cú pháp tùy chỉnh của riêng họ thành định dạng .css mà trình duyệt có thể hiểu được.
Ví dụ: các bộ tiền xử lý CSS như Sass cung cấp các tính năng đặc biệt như vòng lặp, mixin, bộ chọn lồng nhau và câu lệnh if/else. Những tính năng này giúp mã CSS dễ bảo trì hơn, đặc biệt là trong các nhóm lớn.
Để sử dụng bộ xử lý CSS, bạn cần cài đặt trình biên dịch trong môi trường cục bộ và/hoặc máy chủ sản xuất. Một số trình tạo giao diện người dùng, chẳng hạn như Vite, cho phép tích hợp các bộ tiền xử lý CSS như LessCSS vào dự án.
Cách hoạt động của CSS Stylus
Để cài đặt Stylus trong môi trường cục bộ, bạn cần cài đặt Node.js và Node Package Manager (NPM) hoặc Yarn trên máy tính của mình. Chạy lệnh đầu cuối sau:
npm install stylus
Hoặc:
yarn add stylus
Mỗi tệp CSS Stylus kết thúc bằng phần mở rộng .styl. Sau khi viết mã CSS Stylus, bạn có thể biên dịch nó bằng lệnh này:
stylus .
Điều này sẽ biên dịch tất cả các tệp .style và tạo các tệp .css trong thư mục hiện tại. Trình biên dịch Stylus cũng cho phép bạn biên dịch các tệp .css thành .styl bằng cờ –css. Để chuyển đổi tệp .css sang định dạng .style, hãy sử dụng lệnh này:
stylus --css style.css style.styl
Cú pháp kiểu CSS và bộ chọn gốc
Trong CSS truyền thống, bạn xác định một khối kiểu bằng dấu ngoặc nhọn; không bao gồm các ký tự này sẽ dẫn đến phong cách bị hỏng. Trong CSS Stylus, việc sử dụng dấu ngoặc nhọn là tùy chọn.
Bút stylus hỗ trợ cú pháp giống Python, có nghĩa là bạn có thể xác định các khối bằng cách sử dụng thụt lề:
.container
margin: 10px
Khối mã trên biên dịch thành CSS sau:
.container {
margin: 10px;
}
Tương tự như các bộ tiền xử lý CSS như Less, bạn có thể tham khảo bộ chọn gốc bằng ký tự &:
button
color: white;
&:hover
color: yellow;
Biên dịch thành:
button {
color: #fff;
}
button:hover {
color: #ff0;
}
Cách sử dụng biến trong Stylus CSS
Trong các bộ tiền xử lý CSS như Less CSS, các biến được xác định bằng ký hiệu @, trong khi CSS truyền thống sử dụng dấu “–” để xác định một biến.
Bút stylus hơi khác một chút: bạn không cần ký hiệu đặc biệt để xác định một biến. Thay vào đó, chỉ cần xác định biến bằng dấu bằng (=) để liên kết biến đó với một giá trị:
bg-color = black
Bây giờ bạn có thể sử dụng biến trong tệp .style như sau:
div
background-color: bg-color
Các khối mã ở trên biên dịch thành CSS sau:
div {
background-color: #000;
}
Bạn có thể xác định một biến null bằng dấu ngoặc đơn. Ví dụ:
empty-variable = ()
Bạn có thể tham khảo các giá trị thuộc tính khác bằng ký hiệu @. Ví dụ: nếu bạn muốn đặt chiều cao của div thành một nửa chiều rộng của nó, bạn có thể thực hiện như sau:
element-width = 563pxdiv
width: element-width
height : (element-width / 2)
Điều đó sẽ hiệu quả, nhưng bạn cũng có thể tránh tạo biến hoàn toàn và thay vào đó hãy tham khảo giá trị của thuộc tính width:
div
width: 563px
height: (@width / 2)
Trong khối mã này, ký hiệu @ cho phép bạn tham chiếu đến thuộc tính chiều rộng thực tế của div. Cho dù bạn chọn cách tiếp cận nào, bạn sẽ nhận được CSS sau khi biên dịch tệp .style của mình:
div {
width: 563px;
height: 281.5px;
}
Các chức năng CSS của bút cảm ứng
Bạn có thể tạo các hàm trả về giá trị trong Stylus CSS. Giả sử bạn muốn đặt thuộc tính căn chỉnh văn bản của div thành “giữa” nếu chiều rộng lớn hơn 400 pixel hoặc “trái” nếu chiều rộng nhỏ hơn 400 pixel. Bạn có thể tạo một hàm xử lý logic này.
alignCenter(n)
if (n > 400)
'center'
else if (n < 200)
'left'div {
width: 563px
text-align: alignCenter(@width)
height: (@width / 2)
}
Khối mã này gọi hàm AlignCenter, chuyển giá trị của thuộc tính width bằng cách tham chiếu đến nó bằng ký hiệu @. Hàm AlignCenter kiểm tra xem tham số n của nó có lớn hơn 400 hay không và trả về “center” nếu có. Nếu n nhỏ hơn 200, hàm trả về “trái”.
Khi chạy, trình biên dịch sẽ tạo ra kết quả sau:
div {
width: 563px;
text-align: 'center';
height: 281.5px;
}
Trong hầu hết các ngôn ngữ lập trình, các hàm gán tham số dựa trên thứ tự bạn nhập chúng. Điều này có thể dẫn đến lỗi do truyền tham số sai thứ tự, càng có nhiều khả năng bạn phải truyền nhiều tham số hơn.
Stylus cung cấp một giải pháp: các tham số được đặt tên. Sử dụng chúng thay vì tham số theo thứ tự khi gọi hàm, ví dụ:
subtract(b:30px, a:10px)
Khi nào nên sử dụng bộ tiền xử lý CSS
Bộ tiền xử lý CSS là những công cụ rất mạnh có thể được sử dụng để hợp lý hóa quy trình làm việc của bạn. Chọn công cụ phù hợp cho dự án của bạn có thể giúp tăng năng suất của bạn. Nếu dự án của bạn chỉ yêu cầu một lượng nhỏ CSS thì việc sử dụng bộ tiền xử lý CSS có thể là quá mức cần thiết.
Nếu bạn đang xây dựng một dự án lớn, có thể là thành viên của một nhóm dựa vào lượng CSS khổng lồ, hãy cân nhắc sử dụng bộ tiền xử lý. Họ cung cấp các tính năng như chức năng, vòng lặp và sự kết hợp giúp dễ dàng tạo kiểu cho các thiết kế phức tạp.
