Stylus là một trình xử lý trước mã CSS , cho phép chúng ta làm việc dễ dàng hơn trong trình soạn thảo văn bản, và dưới đây tôi sẽ giải thích lý do cho nhận định này.
Đây là một biểu định kiểu như chúng ta biết:
nội dung {font: 12px Helvetica, Arial, sans-serif; } a.button {-webkit-border-radius: 5px; -moz-border-radius: 5px; bán kính đường viền: 5px; }
Và đây sẽ là cùng một bảng định kiểu được tạo bằng Stylus:
phông chữ cơ thể 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
Chìa khóa đâu rồi? Dấu chấm phẩy và dấu hai chấm biến mất đâu rồi? Mất hút rồi. Bút cảm ứng làm điều đó thay cho chúng ta.
Nếu bạn mới bắt đầu học CSS và HTML, việc sử dụng Stylus không được khuyến khích đơn giản vì bạn có thể quên cách mọi thứ hoạt động. Nhưng nếu bạn đã có kinh nghiệm trong lĩnh vực này và muốn tiết kiệm thời gian và công sức... thì cứ thoải mái sử dụng.
Các lập trình viên Python sẽ thấy trong Stylus một thứ rất giống với những gì họ đã quen thuộc, vì họ chỉ cần thụt lề đúng cách là mọi thứ sẽ hoạt động trơn tru.
Cài đặt
Để Stylus hoạt động, chúng ta cần cài đặt Node.js, nằm trong nhánh Community, vì vậy chúng ta tiến hành cài đặt như sau:
$ sudo pacman -S nodejs
Và sau đó chúng tôi cài đặt Stylus. Cách truyền thống sẽ là:
$ npm install -g stylus
Nó cài đặt tốt, nhưng nó không hoạt động đối với tôi, vì vậy việc cài đặt từ AUR sẽ dễ dàng hơn nhiều:
$ yaourt -S nodejs-stylus
Cách sử dụng Bút cảm ứng
Được rồi, chúng ta đã cài đặt Node.js và Stylus . Vậy làm thế nào để sử dụng chúng? Rất đơn giản. Giả sử chúng ta có một thư mục với các tệp sau:
- dir - index.html - style.css
Việc chúng ta cần làm là tạo tệp style.styl , đây là tệp chúng ta sẽ làm việc cùng. Trong tệp đó, chúng ta có thể có nội dung như sau:
body background-color #ffff font-size 12px a.button color padding 10px
Nếu ta lưu hoặc thực hiện bất kỳ thay đổi nào, sẽ không có gì xảy ra, bởi vì ta không "biên dịch" tệp tin. Để biên dịch, ta mở một cửa sổ dòng lệnh trong thư mục chứa tệp tin style.styl và chạy lệnh sau:
stylus -c style.styl
Nhưng mỗi lần lưu file style.styl , chúng ta lại phải chạy đoạn mã đó, nhưng may mắn là điều đó không cần thiết, bởi vì nếu ta chạy cùng một lệnh nhưng thêm tham số -w (watch), thì điều sau đây sẽ xảy ra:
stylus -c -w style.styl xem /usr/lib/node_modules/stylus/lib/functions/index.styl biên dịch style.css xem style.styl biên dịch style.css biên dịch style.css
Nói cách khác, tệp được biên dịch tự động .. Kết quả là?
nội dung {background-color: #fff; font-size: 12px} a.button {color: # f00; padding: 10px}
Như bạn thấy, nó không chỉ tạo ra mã CSS của chúng ta mà còn loại bỏ các khoảng trắng không cần thiết để bảng định kiểu của chúng ta nhẹ hơn
Không chỉ vậy, Stylus cho phép chúng ta chuyển đổi các tệp CSS sang định dạng của nó, và cách chúng ta có thể sử dụng cú pháp của nó vô cùng đa dạng. Và đây chỉ là một phần nhỏ. Vì vậy, nếu bạn quan tâm, tôi khuyến khích bạn tìm hiểu thêm về Stylus.