文章彙整

幫你的sass專案加上Autoprefixer功能

By Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  幫你的sass專案加上Autoprefixer功能

sass-Autoprefixer01

 

Autoprefixer是一個自動幫CSS加上前輟詞的工具,如果你習慣使用compass 來watch你的sass專案,你可以用底下的方式來幫你的sass專案加上Autoprefixer功能。

Step 1: 開啟命令字元,在專案的路徑底下輸入底下命令列:

gem install autoprefixer-rails

Step 2: 開啟sass專案設定檔config.rb,加上底下設定:

Encoding.default_external = "UTF-8"


require 'autoprefixer-rails'


on_stylesheet_saved do |file|

 css = File.read(file)

 map = file + '.map'


 if File.exists? map

   result = AutoprefixerRails.process(css,

     from: file,

     to:   file,

     map:  { prev: File.read(map), inline: false })

   File.open(file, 'w') { |io| io << result.css }

   File.open(map,  'w') { |io| io << result.map }

 else

   File.open(file, 'w') { |io| io << AutoprefixerRails.process(css) }

 end

end

 

接下來你只要照平常的方式使用compass watch,所產生的css都會自動加上前輟詞了。
sass

 

 

SASS的相關文章:

SASS的二種註解方式 /* */ 與 //

SASS的註解功能,讓除錯工作變得更簡單

如何修改SASS的輸出樣式

 

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。