Sử dụng Sass
SASS mạnh hơn và ổn định hơn, cung cấp sức mạnh cho ngôn ngữ cơ bản bằng cách sử dụng phần mở rộng của CSS. Bạn có thể sử dụng SASS theo ba cách khác nhau -
- Là một công cụ dòng lệnh
- Là một mô-đun Ruby
- Là một plugin cho khung kích hoạt Rack
Nếu bạn đang sử dụng SASS trên windows, thì bạn cần cài đặt RubyĐầu tiên. Để biết thêm thông tin về cài đặt Ruby, hãy tham khảo chương Cài đặt SASS .
Bảng sau đây cho thấy các lệnh, được sử dụng để thực thi mã SASS:
| S. Không. | Lệnh & Mô tả |
|---|---|
| 1 | sass input.scss output.css Nó được sử dụng để chạy mã SASS từ dòng lệnh. |
| 2 | sass --watch input.scss:output.css Nó thông báo cho SASS xem tệp và cập nhật CSS bất cứ khi nào tệp SASS thay đổi. |
| 3 | sass --watch app/sass:public/stylesheets Nó được sử dụng để xem toàn bộ thư mục, nếu SASS chứa nhiều tệp trong một thư mục. |
Plugin Rack / Rails / Merb
Racklà một giao diện máy chủ web, được sử dụng để phát triển các ứng dụng web trong Ruby. Để biết thông tin về Rack, chỉ cần truy cập liên kết này .
Bạn có thể bật SASS trong Rails 3 phiên bản sử dụng environment.rb tệp hiện tại dưới configthư mục. Bật SASS cho Rails 3 bằng mã sau:
config.gem "sass"Bạn có thể sử dụng dòng sau cho Gemfile cho Rails 3 (và phiên bản cao hơn), như sau:
gem "sass"Railslà một khung công tác web mã nguồn mở sử dụng các tiêu chuẩn web như JSON, HTML, CSS và JavaScript để hiển thị giao diện người dùng. Để làm việc với Rails, bạn cần có kiến thức cơ bản về Ruby và lập trình hướng đối tượng. Tìm hiểu thêm về khung công tác Rails tại đây .
Nếu bạn muốn bật SASS trong Rack ứng dụng, thêm các dòng sau vào config.ru tệp, có trong thư mục gốc của ứng dụng -
require 'sass/plugin/rack'
use Sass::Plugin::RackMerblà một khung ứng dụng web, cung cấp tốc độ và tính mô đun cho Rails. Để biết thêm về Merb, chỉ cần mở liên kết này .
Bạn có thể bật SASS trong Merb bằng cách thêm dòng sau vào config/dependencies.rb tập tin -
dependency "merb-haml"Bộ nhớ đệm
SASS lưu trữ các tài liệu như mẫu và phần mềm, có thể được sử dụng lại mà không cần phân tích cú pháp trừ khi chúng đã thay đổi. Nó giúp việc biên dịch các tệp SASS nhanh hơn và hoạt động tốt hơn nữa khi các mẫu được chia thành các tệp riêng biệt, tất cả đều được nhập vào một tệp lớn. Nếu bạn xóa các tệp đã lưu trong bộ nhớ cache, chúng sẽ được tạo lại khi bạn biên dịch lần sau.
Tùy chọn
Bạn có thể đặt các tùy chọn trong tệp môi trường.rb của Rails hoặc tệp config.ru của ứng dụng Rack bằng cách sử dụng dòng sau:
Sass::Plugin.options[:style] = :compactBạn cũng có thể đặt các tùy chọn trong tệp init.rb của Merb bằng cách sử dụng dòng sau:
Merb::Plugin.config[:sass][:style] = :compactCó một số tùy chọn có sẵn với SASS và SCSS như được mô tả trong bảng dưới đây -
| S. Không. | Tùy chọn & Mô tả |
|---|---|
| 1 | :style Nó hiển thị kiểu đầu ra. |
| 2 | :syntax Bạn có thể sử dụng cú pháp thụt lề cho sass và cú pháp mở rộng CSS cho scss . |
| 3 | :property_syntax Nó sử dụng cú pháp thụt lề để sử dụng các thuộc tính. Nếu nó không đúng, sau đó nó sẽ ném ra một lỗi. Ví dụ: hãy xem xét "background: # F5F5F5" trong đó background là tên thuộc tính và # F5F5F5 là giá trị thuộc tính của nó. Bạn phải sử dụng dấu hai chấm sau tên thuộc tính. |
| 4 | :cache Nó tăng tốc độ biên dịch các tệp SASS. Nó được đặt thành true theo mặc định. |
| 5 | :read_cache Nó chỉ đọc các tệp SASS nếu bộ đệm không được đặt và read_cache được đặt. |
| 6 | :cache_store Nó có thể được sử dụng để lưu trữ và truy cập kết quả đã lưu trong bộ nhớ cache bằng cách đặt nó thành một thể hiện của Sass :: CacheStores :: Base . |
| 7 | :never_update Nó không bao giờ được cập nhật tệp CSS nếu tệp mẫu thay đổi. Theo mặc định, nó được đặt thành false. |
| số 8 | :always_update Nó sẽ cập nhật tệp CSS bất cứ khi nào tệp mẫu thay đổi. |
| 9 | :always_check Nó sẽ kiểm tra các bản cập nhật bất cứ khi nào máy chủ khởi động. Nó sẽ biên dịch lại và ghi đè lên tệp CSS, nếu có bản cập nhật trong tệp mẫu SASS. |
| 10 | :poll Nó sử dụng phụ trợ thăm dò cho Sass :: Plugin :: Compiler # watch (xem mẫu và cập nhật các tệp CSS) bằng cách đặt nó thành true. |
| 11 | :full_exception Nó hiển thị mô tả lỗi bất cứ khi nào xảy ra ngoại lệ trong mã SASS trong tệp CSS được tạo. Nó hiển thị số dòng nơi xảy ra lỗi cùng với nguồn trong tệp CSS. |
| 12 | :template_location Nó cung cấp đường dẫn cho thư mục mẫu trong ứng dụng. |
| 13 | :css_location Nó cung cấp đường dẫn cho các bảng định kiểu CSS trong ứng dụng. |
| 14 | :unix_newlines Nó cung cấp các dòng mới kiểu Unix khi ghi tệp bằng cách đặt nó thành true. |
| 15 | :filename Nó là tên của tên tệp đang được hiển thị và được sử dụng để báo cáo lỗi. |
| 16 | :line Nó chỉ định dòng đầu tiên của mẫu SASS và hiển thị số dòng cho các lỗi. |
| 17 | :load_paths Nó được sử dụng để tải các đường dẫn cho mẫu SASS được bao gồm bằng cách sử dụng chỉ thị @import . |
| 18 | :filesystem_importer Nó được sử dụng để nhập tệp từ hệ thống tệp sử dụng lớp con Sass :: Importers :: Base để xử lý các đường dẫn tải chuỗi. |
| 19 | :sourcemap Nó tạo bản đồ nguồn hướng dẫn trình duyệt tìm kiểu SASS. Nó sử dụng ba giá trị -
|
| 20 | :line_numbers Nó hiển thị số dòng cho các lỗi được báo cáo trong tệp CSS bằng cách đặt nó thành true. |
| 21 | :trace_selectors Nó giúp theo dõi các bộ chọn nhập và mixin khi nó được đặt thành true. |
| 22 | :debug_info Nó cung cấp thông tin gỡ lỗi của tệp SASS bằng cách sử dụng số dòng và tệp khi nó được đặt thành true. |
| 23 | :custom Nó cung cấp dữ liệu cho các chức năng SASS trong các ứng dụng riêng biệt. |
| 24 | :quiet Nó vô hiệu hóa các cảnh báo bằng cách đặt nó thành true. |
Lựa chọn cú pháp
Bạn có thể xác định cú pháp bạn đang sử dụng trong mẫu SASS bằng cách sử dụng công cụ dòng lệnh SASS. Theo mặc định, SASS sử dụng cú pháp thụt lề, một cú pháp thay thế cho cú pháp SCSS dựa trên CSS. Bạn có thể sử dụng chương trình dòng lệnh SCSS, tương tự như chương trình SASS, nhưng theo mặc định, nó coi cú pháp là SCSS.
Mã hóa
SASS sử dụng mã hóa ký tự của bảng định kiểu bằng cách chỉ định các thông số kỹ thuật CSS sau:
Đầu tiên, nó kiểm tra byte Unicode, khai báo @charset tiếp theo và sau đó là mã hóa chuỗi Ruby.
Tiếp theo, nếu không có gì được đặt, thì nó coi mã hóa bộ ký tự là UTF-8 .
Xác định mã hóa ký tự một cách rõ ràng bằng cách sử dụng khai báo @charset . Chỉ cần sử dụng "tên mã hóa @charset" ở đầu biểu định kiểu và SASS sẽ giả định rằng đây là mã hóa ký tự đã cho.
Nếu tệp đầu ra của SASS chứa các ký tự không phải ASCII thì nó sẽ sử dụng khai báo @charset .