Sass：初識Sass與Koala工具的使用

一、下載 Koala（找到合適的系統版本）並安裝

 

 

二、先新建一個css文件夾，並在里面新建一個文本文檔(.txt)，將其命名為demo.scss

 

 

三、打開Koala，將css文件夾拽進來，可以修改一下輸出方式

 

【擴展】SASS提供四個編譯風格的選項：

• nested：嵌套縮進的css代碼，它是默認值。
• expanded：沒有縮進的、擴展的css代碼。
• compact：簡潔格式的css代碼。
• compressed：壓縮后的css代碼。

 

四、又到了寫代碼的時候啦，隨便用一款文本編寫工具打開demo.scss

1.css風格編寫

ul li a{
    color: red;
}

保存后會看到自動生成2個文件（前提：Koala軟件不要關閉）

2.在demo.scss中以sass風格編寫上述css代碼

ul{
    li{
        a{
            color: black;
        }
    }
}

修改並保存，此時，我們見到生成的demo.css代碼是一樣的

 

如果我們想寫成這樣的css：

ul li a:hover {
  color: blue;
}

對應的sass可以是：

ul{
    li{
        a{
            color: black;
            &:hover{
                color: blue;
            }
        }
    }
}

【解說】&表示替代元素自身，在這里指a

3.使用變量：所有變量以$開頭

在demo.scss編寫以下代碼：

$color: #abc;
a{
    color:$color;
}

保存后，編譯成的css：

a {
  color: #abc;
}

 

五、今天所寫代碼截圖

== demo.scss ==

== demo.css ==