Ruby（或cmd中）輸入命令行編譯sass

ranwu 發布于2019-04-23 13:24 / 2965人閱讀

摘要：或中輸入命令行編譯步驟如下舉例在盤中新建一個總文件夾，比如文件夾，其中在該文件夾下面建立等文件夾。文件夾下的啟動根據步驟命令行輸入得到結構如下圖命令行沒有清除緩存得到結構如下圖如若文件下面有多個文件，要指定某一個文件被編譯，需要指定文件。

Ruby（或cmd中）輸入命令行編譯sass步驟如下：

舉例：

1、在F盤中新建一個總文件夾，比如test文件夾，其中在該文件夾下面建立html、images、js、sass等文件夾。

2、在sass文件夾中創建要使用到的sass文件，或者scss文件。common.scss、reset.scss、config.scss等一些公共文件以及項目中需要使用到的各個文件。（當然這里的文件也可以分別放在不同的文件夾中，不過必須都是sass文件夾的子目錄。）

3、sass文件夾下的common.scss：

div{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    background-color: #333;
    p{
    width: 200px;
    height: 200px;
    background-color: #666;
     a{
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: #999;
        }
    }
}

4、啟動ruby

5、根據步驟命令行輸入

得到結構如下圖

6、命令行沒有清除緩存

得到結構如下圖

7、如若sass文件下面有多個sass文件，要指定某一個文件被編譯，需要指定文件。其中首先找到sass文件這個目錄，然后將sass文件夾下的某一個文件轉化為css文件夾下的某一個。

得到結構如下圖

發現的問題

a．在建立的文件夾下必須建立了sass文件夾，ruby需要識別sass文件夾（我試過直接在沒有sass文件夾下進行編譯，失敗了）；

b．--no-cache是清除緩存，--watch是監聽指令，--style是樣式，compressed指令可以壓縮css文件。

SASS提供四個編譯風格的選項：

　　* nested：嵌套縮進的css代碼，它是默認值。

　　* expanded：沒有縮進的、擴展的css代碼。

　　* compact：簡潔格式的css代碼。

　　* compressed：壓縮后的css代碼。

GPU云服務器云服務器 Ruby命令行 php cmd命令行命令行編譯命令行輸入歷史

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

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

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

摘要：本文僅適用于系統。安裝每個流行的平臺都有多種工具可用于安裝平臺，可以使用第三方工具如或或使用系統中的包管理系統。平臺，可以使用。安裝過程按照提示來即可安裝假定已經安裝好了運行進入命令提示符。本文僅適用于 Windows 系統。什么是 Sass Sass---- CSS 擴展語言或 CSS 預處理器，是一種 CSS 的開發工具，提供了許多便利的寫法，節省了設計者的時間，使得 CSS ...

HitenDev 2019-08-29 13:46 評論0 收藏0
webstorm 設置 sass自動編譯問題

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

APICloud 2019-04-23 13:13 評論0 收藏0
CSS 強化裝備！Sass 安裝與使用

摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國內網絡原因你懂的，導致存放在上面的資源文件間歇性連接失敗。嵌套可以進行選擇器的嵌套，表示層級關系。重要注釋管理項目文件結構預處理器的特點之一是可以把你的代碼分割成很多文件，而且不會影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 評論0 收藏0
[Sass]-Sass入門

摘要：未編譯樣式多繼承鏈式繼承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數，參數名以符號開始，多個參數以逗號分開，也可以給參數設置默認值。初識Sass SASS簡介 sass是一種css預處理器，用專門的編程語言，進行網頁樣式設計，然后再編譯成正常的CSS文件。Sass是CSS3的擴展，它增加了嵌套規則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組...

godiscoder 2019-08-29 13:27 評論0 收藏0