sass筆記

sass

sass的安裝： sass依賴於ruby環境，因此裝sass以前先確認裝了ruby。安裝完ruby以後，在開始菜單中，找到剛纔咱們安裝的ruby，打開Start Command Prompt with Ruby，直接在命令行輸入gem install sass,按回車鍵確認等待安裝完成

在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，否則之後使用編譯軟件的時候會提示找不到ruby環境

sass

sass的安裝： sass依賴於ruby環境，因此裝sass以前先確認裝了ruby。安裝完ruby以後，在開始菜單中，找到剛纔咱們安裝的ruby，打開Start Command Prompt with Ruby，直接在命令行輸入gem install sass,按回車鍵確認等待安裝完成

在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，否則之後使用編譯軟件的時候會提示找不到ruby環境

ruby安裝步驟：

Window 系統下，咱們可使用 RubyInstaller 來安裝 Ruby 環境，下載地址爲：請點擊這裏下載。

下載 rubyinstaller 以後，解壓到新建立的目錄下：

雙擊 rubyinstaller-2.2.3.exe 文件，啓動 Ruby 安裝嚮導。

點擊 Next，繼續嚮導，記得勾選 Add Ruby executables to your PATH，直到 Ruby 安裝程序完成 Ruby 安裝爲止。

安裝完成以後，能夠用ruby -v代碼檢測是否安裝成功

sass安裝：  ruby環境中 打開comand promt with ruby，在命令行直接輸入gem install sass,按回車確認，便可安裝

sass轉譯css文件：設置監聽，直接打包等方法，直接打包以下：在webstorm裏使用compess init,在setting中勾選language&framework中compass中勾選，在不自動編譯的狀況下用watch -time進行編譯

 

 

1、sass語法

sass有兩種後綴名文件：一種後綴名爲sass，不使用大括號和分號；另外一種是scss文件，scss跟css文件格式差很少，使用大括號和分號。

2、導入：編譯時會將@import的scss文件合併進來只生成一個css文件，若是導入的是css文件，則不會被整合合併。

3、註釋：兩種方式，/*   */,和雙斜槓//,      其中雙斜槓方式不被轉譯

4、變量

變量的書寫：必須是以$開頭，其後緊跟變量名，變量名和變量值以冒號隔開， 後面加上!default則表示默認值。

一、普通變量：定義以後能夠全局調用

二、默認變量：通常用來設置默認值，而後覆蓋，默認變量前面前面申明新的變量定義肯定覆蓋範圍

三、特殊變量：通常定義的變量都爲屬性值，可直接使用，可是若是變量做爲屬性或在某些特殊狀況下等則必需要以#{$variables}形式使用。

四、多值變量：list和map兩種，listl類型有點像js中的數組，map類型有點像js類型中的對象

      1》list數據可經過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值

            eg:

     $linkColor:blue,green  !default;

         //下面第一個值是默認值，第二個是鼠標滑過值        a{            color:nth($linkColor,1);            &:hover{            color:nth($linkColor,2);              }            }  

   2》map數據以key和value成對出現，其中value又能夠是list。格式爲：。$map: (key1: value1, key2: value2, key3: value3);

五、全局變量：在變量值後面加上即爲全局變量!global

5、嵌套

一、選擇器嵌套：指的是在一個選擇器中嵌套另外一個選擇器來實現繼承，從而加強了sass文件的結構性和可讀性，用&表示父元素選擇器。

二、屬性嵌套：屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

@at-root:用來跳出選擇器嵌套的。默認全部的嵌套，繼承全部上級選擇器，但有了這個就能夠跳出全部上級選擇器。

@at-root(without:...)和at-root(with:...)

默認只會跳出選擇器嵌套，而不能跳出或，若是要跳出這兩種，則需使用，。這個語法的關鍵詞有四個：（表示全部），（表示常規css），（表示media），@at-root@media@support@at-root (without: media)@at-root (without: support)allrulemedia

（表示support，由於目前還沒法普遍使用，因此在此不表）。咱們默認的其實就是。support@support@at-root@at-root (without:rule)

                                                                emmet/zen-coding

emmet和zen-coding是提升代碼編寫的兩個插件

學會安裝插件，主要熟悉一些快捷鍵的使用，運用emmet插件提升開發速度

sass轉譯css文件;設置監聽法和直接打包法

 

1、sass語法

sass有兩種後綴名文件：一種後綴名爲sass，不使用大括號和分號；另外一種是scss文件，scss跟css文件格式差很少，使用大括號和分號。

2、導入：編譯時會將@import的scss文件合併進來只生成一個css文件，若是導入的是css文件，則不會被整合合併。

3、註釋：兩種方式，/*   */,和雙斜槓//,      其中雙斜槓方式不被轉譯

4、變量

變量的書寫：必須是以$開頭，其後緊跟變量名，變量名和變量值以冒號隔開， 後面加上!default則表示默認值。

一、普通變量：定義以後能夠全局調用

二、默認變量：通常用來設置默認值，而後覆蓋，默認變量前面前面申明新的變量定義肯定覆蓋範圍

三、特殊變量：通常定義的變量都爲屬性值，可直接使用，可是若是變量做爲屬性或在某些特殊狀況下等則必需要以#{$variables}形式使用。

四、多值變量：list和map兩種，listl類型有點像js中的數組，map類型有點像js類型中的對象

      1》list數據可經過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值

            eg:

     $linkColor:blue,green  !default;

         //下面第一個值是默認值，第二個是鼠標滑過值        a{            color:nth($linkColor,1);            &:hover{            color:nth($linkColor,2);              }            }  

   2》map數據以key和value成對出現，其中value又能夠是list。格式爲：。$map: (key1: value1, key2: value2, key3: value3);

五、全局變量：在變量值後面加上即爲全局變量!global

5、嵌套

一、選擇器嵌套：指的是在一個選擇器中嵌套另外一個選擇器來實現繼承，從而加強了sass文件的結構性和可讀性，用&表示父元素選擇器。

二、屬性嵌套：屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

@at-root:用來跳出選擇器嵌套的。默認全部的嵌套，繼承全部上級選擇器，但有了這個就能夠跳出全部上級選擇器。

@at-root(without:...)和at-root(with:...)

默認只會跳出選擇器嵌套，而不能跳出或，若是要跳出這兩種，則需使用，。這個語法的關鍵詞有四個：（表示全部），（表示常規css），（表示media），@at-root@media@support@at-root (without: media)@at-root (without: support)allrulemedia

（表示support，由於目前還沒法普遍使用，因此在此不表）。咱們默認的其實就是。support@support@at-root@at-root (without:rule)