成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Sass -- 安裝配置及簡單使用

HitenDev / 3189人閱讀

摘要:本文僅適用于系統(tǒng)。安裝每個流行的平臺都有多種工具可用于安裝平臺,可以使用第三方工具如或或使用系統(tǒng)中的包管理系統(tǒng)。平臺,可以使用。安裝過程按照提示來即可安裝假定已經(jīng)安裝好了運行進入命令提示符。

本文僅適用于 Windows 系統(tǒng)。
什么是 Sass

Sass---- CSS 擴展語言或 CSS 預處理器,是一種 CSS 的開發(fā)工具,提供了許多便利的寫法,節(jié)省了設計者的時間,使得 CSS 的開發(fā)變得簡單和可維護。

Sass 是用 Ruby 語言寫的,但是兩者之間的語法沒有關系。不懂 Ruby ,也可以使用。但是必須先安裝 Ruby ,然后再安裝 Sass 。

安裝 Ruby

每個流行的平臺都有多種工具可用于安裝 Ruby:

Linux/UNIX 平臺,可以使用第三方工具(如 rbenv 或 RVM)或使用系統(tǒng)中的包管理系統(tǒng)。

OS X 平臺,可以使用第三方工具(如 rbenv 或 RVM)。

Windows 平臺,可以使用 RubyInstaller。

安裝過程按照提示來即可

.......

安裝 Sass

假定已經(jīng)安裝好了 Ruby

運行 cmd 進入命令提示符。輸入 ruby -v , gem -v 查看版本號,如果能正確顯示版本號,那么恭喜安裝成功!

接著在命令行輸入下面的命令:

gem install sass 

現(xiàn)在應該已經(jīng)安裝好了 Sass 。不放心可以再檢查一遍,在命令行輸入下面的命令:

sass -v

若正確顯示版本號,那么就可以正常使用了!

Sass的一些使用

Sass 文件就是普通的文本文件,可以直接使用 CSS 語法。文件后綴名是 .scss ,意思為Sassy CSS。

假定新建了一個 demo.scss 文件, 并寫了一部分代碼

輸入 sass demo.scss 命令,可實現(xiàn) .scss 文件轉(zhuǎn)化為 css 代碼(注意:這里 css 代碼是顯示在命令行中):

sass demo.scss

要將顯示結(jié)果保存成 css 文件,則輸入下面命令:

sass demo.scss demo.css

也可以讓 Sass 監(jiān)聽某個文件或目錄,一旦源文件有變動,就自動生成編譯后的版本

監(jiān)聽文件

 sass --watch demo.scss:demo.css

監(jiān)聽目錄

sass --watch app/sass:public/stylesheets

另外,使用 sass --help 可以列出完整的幫助文檔。

Sass 編譯時可能會出現(xiàn)的問題

Syntax error: Invalid GBK character 錯誤的解決方法:

找到 ruby 的安裝目錄,里面有 sass 模塊,如下面這個路徑:

“C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.5.3/lib/sass” *

找到文件 engine.rb 后打開,在文件中所有的 require XXXX 之后,添加下面這行代碼即可:

 Encoding.default_external = Encoding.find("utf-8")

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/112692.html

相關文章

  • 使用compass自動合并css雪碧圖(css sprite)

    摘要:使用雪碧圖,能夠減少頁面的請求數(shù)降低圖片占用的字節(jié),以此來達到提升頁面訪問速度的目的。也正是因為這一點,導致很多開發(fā)者懶于使用雪碧圖。本文就介紹下怎樣使用來自動合并雪碧圖。生成的每個雪碧圖默認的規(guī)則是目錄名圖片名。 css雪碧圖又叫css精靈或css sprite,是一種背景圖片的拼合技術。使用css雪碧圖,能夠減少頁面的請求數(shù)、降低圖片占用的字節(jié),以此來達到提升頁面訪問速度的目的。但...

    劉永祥 評論0 收藏0
  • PostCSS自學筆記(一)【安裝使用篇】

    摘要:而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經(jīng)等不及安裝使用了吧。安裝及使用一般是結(jié)合自動化工具使用,如果要單獨使用可以安裝,這里我先對的安裝使用講解下。接下來說點實際的,如何利用結(jié)合自動化工作在項目中使用。 PostCSS介紹 PostCSS是一個利用JS插件來對CSS進行轉(zhuǎn)換的工具,這些插件非常強大,強大到無所不能。其中,Autoprefixer就是眾多Post...

    jsummer 評論0 收藏0
  • Gulp入門教程

    摘要:本教程分為兩個部分先講解的使用及參數(shù)說明,后以一個實際項目案例作為演練。或自動監(jiān)視文件變化并執(zhí)行指定的任務。項目代碼下載其他文獻官方接口文檔很多演示項目代碼其它教程文章 Gulp介紹 Gulp是一個前端開發(fā)的自動化構(gòu)建工具。前端開發(fā)往往需要把LESS/SCSS文件進行編譯成CSS文件,JavaScript多文件合并成一個文件并壓縮以及一些其他需要重復性操作的工作。而Gulp就是通過簡單...

    levius 評論0 收藏0
  • 20分鐘gulp快速入門

    摘要:所以出現(xiàn)了各種前端構(gòu)建化工具也應運而生等已經(jīng)成為現(xiàn)在前端開發(fā)工程師的必備技能之一。結(jié)語今天的分享就告一段落啦希望能對大家有所幫助。 在互聯(lián)網(wǎng)告訴發(fā)展的今天,自node出現(xiàn)后,我們前端也越來越大(心里美美噠~),同樣帶來的Web業(yè)務日益復雜化和多元化,模式也都想webPage模式轉(zhuǎn)向webApp模式,拼幾個頁面搞幾個jquery的插件就能搞一個完成一個項目的日子已經(jīng)是很久遠的曾經(jīng)了,而且...

    RichardXG 評論0 收藏0

發(fā)表評論

0條評論

HitenDev

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<