Giới thiệu về gem Autoprefixer trong Rails
Bài đăng này đã không được cập nhật trong 8 năm
Ruby on Rails
Thêm gem autoprefixer-rails
vào file Gemfile:
gem "autoprefixer-rails"
Xóa cache:
rake tmp:clear
Viết CSS và Autoprefixer sẽ tự động áp dụng tiền tố cho bạn. Ví dụ với file app/assets/stylesheet/foobar.sass
như sau:
:fullscreen a
display: flex
Autoprefixer dùng dữ liệu của Can I Use với thống kê sự hỗ trợ của các trình duyệt để tự động thêm tiền tố sử dụng Asset Pipeline:
:-webkit-full-screen a {
display: -webkit-box;
display: -webkit-flex;
display: flex
}
:-moz-full-screen a {
display: flex
}
:-ms-fullscreen a {
display: -ms-flexbox;
display: flex
}
:fullscreen a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
Nếu bạn cần ghi lại trình duyệt cho Rails project, bạn có thể lưu lại ở:
browserslist
và đặt ởapp/assets/stylesheets/
hoặc bất kì thư mục cha nào.
> 1%
last 2 versions
IE > 8 # comment
- Hoặc bạn có thể lưu tại
config/autoprefixer.yml
flexbox: no-2009
browsers:
- "> 1%"
- "last 2 versions"
- "IE > 8"
Ghi chú: bạn cần dọn dẹp cache (rake tmp:clear
) để những thiết lập của mình có hiệu lực.
Bạn có thể xem những thuộc tính bị thay đổi khi dùng Rake:
rake autoprefixer:info
Disable Autoprefixer:
AutoprefixerRails.uninstall(Rails.application.assets)
Sprockets
Nếu bạn sử dụng Sinatra hay các framework non-Rails khác với Sprockets, chỉ cần kết nối môi trường Sprockets của bạn với Autoprefixer và viết CSS bình thường:
assets = Sprockets::Environment.new do |env|
# Your assets settings
end
require "autoprefixer-rails"
AutoprefixerRails.install(assets)
Ruby
Nếu cần gọi Autoprefixer từ một đoạn code Ruby thuần, mọi thứ rất đơn giản:
require "autoprefixer-rails"
prefixed = AutoprefixerRails.process(css, from: 'main.css').css
Bạn có thể ghi chú trình duyệt bằng lựa chọn browsers
:
AutoprefixerRails.process(css, from: 'a.css', browsers: ['> 1%', 'ie 10']).css
Source map
Autoprefixer sẽ sinh ra source map nếu bạn thiết lập thuộc tính map
là true
trong method process
.
Bạn phải thiết lập file CSS input và output (bằng lựa chọn from
và to
) để sinh ra map đúng.
result = AutoprefixerRails.process(css,
map: true,
from: 'main.css',
to: 'main.out.css')
Autoprefixer cũng có thể chỉnh sửa source map cũ (ví dụ từ biên dịch của SASS. Bạn chỉ cần đặt nội dung của source map (dạng string) vào map
.
result = AutoprefixerRails.process(css, {
map: File.read('main.sass.css.map'),
from: 'main.sass.css',
to: 'main.min.css')
result.map #=> Source map from main.sass to main.min.css
Tổng kết
Hy vọng qua bài viết này, mọi người có thể phần nào nắm được về gem autoprefixer-rails
của Rails. Bài viết được dịch từ Autoprefixer Rails
All rights reserved