Bắt đầu với cài đặt Sass và những điều cơ bản
Trong bài đăng này, chúng ta sẽ thảo luận về Bộ xử lý CSS có tên là Sass hoặc Các bảng định kiểu tuyệt vời.
Nếu bạn đã theo dõi các bài viết trước của chúng tôi trên LESS, chúng tôi chắc chắn rằng bạn đã quen thuộc với Bộ tiền xử lý CSS. Cả Sass và LESS đều là Bộ tiền xử lý CSS, chủ yếu mở rộng cách chúng ta soạn thảo CSS tĩnh đơn giản theo cách năng động hơn bằng cách sử dụng các ngôn ngữ lập trình như Biến, Mixins và Hàm.
Cài đặt Sass
Trước khi chúng ta có thể soạn Sass, chúng ta cần cài đặt nó. Sass được xây dựng dựa trên Ruby. Nếu bạn đang làm việc trên máy Mac, rất có thể, bạn đã cài đặt Ruby. Nếu bạn có thể cài đặt Ruby trong Windows, hãy sử dụng Trình cài đặt Ruby này.
Sau khi cài đặt hoàn tất, bạn có thể đi đến Terminal (trên máy Mac) hoặc trong Dấu nhắc lệnh (trên Windows), sau đó nhập dòng lệnh sau vào đó:
Trên máy Mac;
đá quý sudo cài đặt sass
Trên Windows;
cài đặt đá quý
Nếu quá trình cài đặt thành công, bạn sẽ có thông báo sau trong Terminal / Command Prompt.
Tiếp theo, chúng ta cần chọn thư mục nào để Sass xem bằng lệnh sau;
sass - Đường dẫn đồng hồ / thư mục sass
Dòng lệnh trên sẽ xem mọi .scss/.sass tập tin trong đường dẫn / thư mục và bất cứ khi nào một trong các tệp trong thư mục đó bị thay đổi, Sass sẽ cập nhật các tệp tương ứng hoặc tạo một tệp nếu không tồn tại.
Nếu chúng ta cần Sass để tạo các tệp trong một thư mục cụ thể, chúng ta có thể làm theo cách này;
sass --watch path / sass-thư mục: path / css-thư mục
Chúng ta cũng có thể xem một tập tin cụ thể thay vì thư mục, với dòng lệnh này;
sass - Đường dẫn đồng hồ / sass-thư mục / style.css
Nếu lệnh xem thành công, một cái gì đó như thông báo dưới đây sẽ xuất hiện trong Terminal / Command Prompt của bạn.
Đọc thêm: Tự động biên dịch tệp Sass với Sass 3
Ứng dụng Sass
Tuy nhiên, nếu bạn ghét làm việc thông qua Terminal hoặc Command Prompt, bạn có thể sử dụng một số ứng dụng cho Sass. Tùy chọn miễn phí là Scout; nó được xây dựng trên Adobe Air để có thể chạy trên tất cả các hệ điều hành (Windows, OSX và Linux).
Tuy nhiên, nó chạy rất chậm như một số báo cáo trước đây.
Vì vậy, nếu bạn không đủ kiên nhẫn cho nó, cũng có một số tùy chọn phải trả tiền. Giá thay đổi cho mỗi ứng dụng, Compass.app có giá $ 10, Fire.app, $ 14 và Codekit với giá $ 25.
Mã đánh dấu
Mặc dù Sass chủ yếu là một phần mở rộng CSS, trình soạn thảo hiện tại của bạn có thể không làm nổi bật cú pháp đúng cách. May mắn thay, đã có một số gói cho hầu hết mọi trình soạn thảo mã để kích hoạt .sass hoặc là .scss làm nổi bật mã.
Nếu bạn đang làm việc với Sublime Text 2 như tôi, bạn có thể sử dụng các gói này; Sublime Text HAML & Sass và Sublime Text 2 Sass Gói, và để dễ dàng hơn, bạn có thể cài đặt một trong các gói này thông qua Kiểm soát gói.
Đối với các trình chỉnh sửa mã khác, xem bên dưới hoặc thử Googling cho nó.
- Đây là một hướng dẫn tuyệt vời để làm việc trên Sass với Dreamweaver
- Chế độ Sass cho Coda. Nhưng, có vẻ như chế độ này đã được tích hợp với Coda kể từ phiên bản 2
- Gói SCSS chính thức của TextMate
- Espresso Sugar cho Sass
- Gói InType
Ngôn ngữ Sass
Sass và LESS thực sự chia sẻ một số ngôn ngữ phổ biến, dưới đây là một vài trong số đó.
Biến
$ màu-cơ sở: # 000; $ chiều rộng: 100px;
Sự khác biệt duy nhất từ các biến LESS là biến trong Sass được định nghĩa bằng một $ ký tên.
Quy tắc làm tổ
tiêu đề width: 980px; chiều cao: 80px; nav ul list-style: none; đệm: không có; lề: không có; li hiển thị: nội tuyến; một văn bản trang trí: không có;
Mixins và chức năng
@mixin Border-radius ($ radius) -moz-Border-radius: $ radius; -webkit-Border-radius: $ radius; -ms-Border-radius: $ radius; bán kính đường viền: $ radius;
Hoạt động
li chiều rộng: $ chiều rộng / 5 - 10px;
Tuyên bố có điều kiện
@if độ sáng ($ color-base)> = 51% màu nền: # 333333; @else màu nền: #ffffff;
Trong LESS bạn có thể làm điều tương tự thông qua biểu thức Guard, điều mà chúng tôi đã đề cập trong hướng dẫn này.
Suy nghĩ cuối cùng
Và đó là nó. Trong bài tiếp theo, chúng ta sẽ bắt đầu khám phá các ngôn ngữ Sass và người bạn đồng hành của nó, La bàn. Hãy theo dõi.
