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

發(fā)布時間：2020-08-30 07:25:35 來源：網(wǎng)絡(luò) 閱讀：347 作者：胡壯壯欄目：網(wǎng)絡(luò)安全

一、下載 Koala（找到合適的系統(tǒng)版本）并安裝

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

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

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

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

【擴(kuò)展】SASS提供四個編譯風(fēng)格的選項：

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

1.css風(fēng)格編寫

1 ul li a{2     color: red;3 }

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

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

2.在demo.scss中以sass風(fēng)格編寫上述css代碼

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

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

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

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

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

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

ul li a:hover {
  color: blue;
}

對應(yīng)的sass可以是：

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

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

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

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

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

在demo.scss編寫以下代碼：

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

保存后，編譯成的css：

a {
  color: #abc;
}

五、今天所寫代碼截圖

== demo.scss ==

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

== demo.css ==

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

向AI問一下細(xì)節(jié)

猜你喜歡