溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、下載 Koala（找到合適的系統版本）并安裝
二、先新建一個css文件夾，并在里面新建一個文本文檔(.txt)，將其命名為demo.scss
三、打開Koala，將css文件夾拽進來，可以修改一下輸出方式
【擴展】SASS提供四個編譯風格的選項：
nested：嵌套縮進的css代碼，它是默認值。
expanded：沒有縮進的、擴展的css代碼。
compact：簡潔格式的css代碼。
compressed：壓縮后的css代碼。
四、又到了寫代碼的時候啦，隨便用一款文本編寫工具打開demo.scss
1.css風格編寫
1 ul li a{2 color: red;3 }保存后會看到自動生成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 ==
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
