成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

webstorm 設(shè)置 sass自動(dòng)編譯問題

APICloud / 1806人閱讀

摘要：語法使用它帶來的好處，就不再這里做介紹了，主要看怎么在里配置自動(dòng)編譯。因?yàn)閲?guó)內(nèi)網(wǎng)絡(luò)的問題導(dǎo)致源間歇性中斷因此我們需要更換源。也就是說，任何標(biāo)準(zhǔn)的樣式表都是具有相同語義的有效的文件。參考文檔官網(wǎng)設(shè)置自動(dòng)編譯及參數(shù)配置

　　sass語法、使用它帶來的好處，就不再這里做介紹了，主要看怎么在webstorm里配置自動(dòng)編譯。

　　sass編譯是需要Ruby環(huán)境的，可以到這里去下載? : ?https://rubyinstaller.org/downloads/? ?? ,安裝時(shí)選擇加入Path

? ? ?

安裝完成后需測(cè)試安裝有沒有成功,運(yùn)行CMD輸入以下命令：

ruby -v
//如安裝成功會(huì)打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

如上已經(jīng)安裝成功，Ruby自帶一個(gè)叫做RubyGems的系統(tǒng)，用來安裝基于Ruby的軟件。因?yàn)閲?guó)內(nèi)網(wǎng)絡(luò)的問題導(dǎo)致gem源間歇性中斷因此我們需要更換gem源。（使用淘寶的gem源https://ruby.taobao.org/ ）

//1.刪除原gem源
gem sources --remove https://rubygems.org/

//2.添加國(guó)內(nèi)淘寶源
gem sources -a https://ruby.taobao.org/

//3.打印是否替換成功
gem sources -l

//4.更換成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

我的機(jī)器上由于https的問題加無法訪問淘寶源，我把它換成了騰訊源 ，騰訊源地址：? http://gems.ruby-china.com/

我們下面來安裝Sass和Compass。要安裝最新版本的Sass和Compass，你需要輸入下面的命令：

//安裝如下(如mac安裝遇到權(quán)限問題需加 sudo gem install sass)
gem install sass
gem install compass

在每一個(gè)安裝過程中，你都會(huì)看到如下輸出：

Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed

安裝完成之后，你應(yīng)該通過運(yùn)行下面的命令來確認(rèn)應(yīng)用已經(jīng)正確地安裝到了電腦中：

//更新sass
gem update sass

//查看sass版本
sass -v

//查看sass幫助
sass -h

下面打開webstorm, File -> Settings -> Tools -> File Watchers + -> SCSS

?

?　　在這里? File Type? 配置為? Scss Style Sheet?? ,不要配置為 SASS style sheet 。SCSS 是 Sass 3 引入新的語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強(qiáng)大功能。也就是說，任何標(biāo)準(zhǔn)的 CSS3 樣式表

都是具有相同語義的有效的 SCSS 文件。另外，SCSS 還能識(shí)別大部分 CSS hacks（一些 CSS 小技巧）和特定于瀏覽器的語法

??????? Progarm: Ruby SaSS 擴(kuò)展路徑

C:Ruby25-x64binsass.bat

?

　　?Arguments:配置編譯參數(shù)

--no-cache --update -t compact $FileName$:$FileNameWithoutExtension$.css

-t 后面有4種參數(shù)可選：

  • 嵌套輸出方式 nested?它是默認(rèn)值
  • 展開輸出方式 expanded
  • 緊湊輸出方式 compact
  • 壓縮輸出方式 compressed?生產(chǎn)環(huán)境當(dāng)中一般使用這個(gè)

　　Output paths to refresh：文件輸出路徑

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

配置完畢，添加一個(gè) .scss文件，果然自動(dòng)編譯成了.css文件。

參考文檔：? Sass官網(wǎng)

　　　　　 ?webstorm設(shè)置sass自動(dòng)編譯,及參數(shù)配置

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1607.html

相關(guān)文章

  • sass的基本使用

    摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預(yù)處理器，文件后綴名為，可以用中的來轉(zhuǎn)成樣式。 最近在項(xiàng)目中利用到了css預(yù)處理器（sass），而之前沒接觸過的本博主出于好奇心，就在業(yè)余的時(shí)間里搜了一些資料來看看，看完后覺得sass挺不錯(cuò)，就想簡(jiǎn)單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內(nèi)容都是本博主覺得比較有...

    alighters 評(píng)論0 收藏0

  • 前端入門23-CSS預(yù)處理器（Less&Sass）

    摘要：聲明聲明本篇內(nèi)容梳理自以下幾個(gè)來源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個(gè)時(shí)候，預(yù)處理器就出現(xiàn)了，其實(shí)應(yīng)該是說和這類語言出現(xiàn)了。聲明 本篇內(nèi)容梳理自以下幾個(gè)來源： Github:smyhvae/web Bootstrap網(wǎng)站的 less 文檔 Sass中文網(wǎng) 感謝大佬們的分享。 正文-CSS預(yù)處理（less&Sass） CSS預(yù)處理 什么是 CSS 預(yù)處理？為什么要有 CSS 預(yù)處理？ 這...

    freecode 評(píng)論0 收藏0

  • webstorm修改文件，webpack-dev-server不會(huì)自動(dòng)編譯刷新

    摘要：重裝了，一升不要緊，打開老項(xiàng)目，開啟，然后改代碼，發(fā)現(xiàn)瀏覽器不會(huì)自動(dòng)刷新了這可急死我了，各種卸載，安裝各種版本，調(diào)試。各種查資料查文檔，都講的是參數(shù)配置啟動(dòng)就會(huì)自刷新，參數(shù)都是其它用途。 重裝了 webstorm ，一升不要緊，打開老項(xiàng)目，開啟webpakc-dev-server，然后改代碼，發(fā)現(xiàn)瀏覽器不會(huì)自動(dòng)刷新了！??！ 這可急死我了，各種卸載webpack、webpack-dev-...

    CarlBenjamin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<