国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webstorm 設置 sass自動編譯問題

APICloud / 1748人閱讀

摘要：語法使用它帶來的好處，就不再這里做介紹了，主要看怎么在里配置自動編譯。因為國內網絡的問題導致源間歇性中斷因此我們需要更換源。也就是說，任何標準的樣式表都是具有相同語義的有效的文件。參考文檔官網設置自動編譯及參數配置

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

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

? ? ?

安裝完成后需測試安裝有沒有成功,運行CMD輸入以下命令：

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

如上已經安裝成功，Ruby自帶一個叫做RubyGems的系統(tǒng)，用來安裝基于Ruby的軟件。因為國內網絡的問題導致gem源間歇性中斷因此我們需要更換gem源。（使用淘寶的gem源https://ruby.taobao.org/ ）

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

//2.添加國內淘寶源
gem sources -a https://ruby.taobao.org/

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

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

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

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

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

在每一個安裝過程中，你都會看到如下輸出：

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

安裝完成之后，你應該通過運行下面的命令來確認應用已經正確地安裝到了電腦中：

//更新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 的強大功能。也就是說，任何標準的 CSS3 樣式表

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

??????? Progarm: Ruby SaSS 擴展路徑

C:Ruby25-x64binsass.bat

?

　　?Arguments:配置編譯參數

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

-t 后面有4種參數可選：

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

　　Output paths to refresh：文件輸出路徑

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

配置完畢，添加一個 .scss文件，果然自動編譯成了.css文件。

參考文檔：? Sass官網

　　　　　 ?webstorm設置sass自動編譯,及參數配置

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1607.html

相關文章

  • sass的基本使用

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

    alighters 評論0 收藏0

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

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

    freecode 評論0 收藏0

  • webstorm修改文件，webpack-dev-server不會自動編譯刷新

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

    CarlBenjamin 評論0 收藏0

發(fā)表評論

0條評論

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