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

我們提供的服務有：成都網(wǎng)站建設、成都網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、靈川ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的靈川網(wǎng)站制作公司

 

 

二、先新建一個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 ==

分享標題：Sass：初識Sass與Koala工具的使用
本文網(wǎng)址：http://chinadenli.net/article4/giipoe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、品牌網(wǎng)站制作、Google、云服務器、移動網(wǎng)站建設、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)