前言

Sass 是一個(gè) CSS 預(yù)處理器，可以幫助我們減少 CSS 重復(fù)的代碼，節(jié)省開發(fā)時(shí)間。 擴(kuò)展了 CSS3，增加了規(guī)則、變量、混入、選擇器、繼承、內(nèi)置函數(shù)等等特性。生成良好格式化的 CSS 代碼，易于組織和維護(hù)，Sass 文件后綴為.Scss。

一、Sass安裝

NPM 安裝

1.1 我們可以使用npm來安裝 Sass，這是最常用的安裝方式。
首先查看有沒有下載npm，以下命令可以查看到是否有下載過npm，已經(jīng)下載會(huì)出現(xiàn)一個(gè)版本號(hào) 6.12.1

npm -v

image

1.2 sass一般都使用淘寶 NPM 鏡像定制的 cnpm，命令行工具代替默認(rèn)的npm:只需要安裝以下命令就會(huì)自動(dòng)下載安裝一個(gè)包。

npm install \-g cnpm \--registry\=https://registry.npm.taobao.org

image

1.3 然后就可以使用cnpm命令使用這個(gè)包，以下就算安裝完成了。

cnpm install -g sass

image

二、sass的使用方法

2.1 首先要建立2個(gè)文件夾，文件夾名稱可以隨便起，再啟動(dòng)以下命令監(jiān)聽。

sass --watch sass:css  //（sass:css為文件夾名稱，可以自設(shè)定）

image

2.2 在.scss 文檔寫入內(nèi)容，另外一個(gè)css文件夾就會(huì)自動(dòng)出現(xiàn)一個(gè)css的文檔，在寫代碼時(shí)命令窗口不能關(guān)閉，負(fù)責(zé)無法執(zhí)行css文檔代碼。

image

2.3 下面是案例 .scss文檔代碼：

$a:#fff;
$b:#000;

body {
    color: $a;
    background: $b;
    width: 500px;
    height: 100px;
}

會(huì)在.css文檔出現(xiàn)以下執(zhí)行代碼：

body {
  color: #fff;
  background: #000;
  width: 500px;
  height: 100px;
}

/*# sourceMappingURL=a.css.map */

三、sass的變量

3.1 Sass 變量使用$符號(hào)：變量用于存儲(chǔ)一些信息，它可以重復(fù)使用。
Sass 變量可以存儲(chǔ)以下信息：

• 字符串
• 數(shù)字
• 顏色值
• 布爾值
• 列表
• null 值

3.2 以下實(shí)例設(shè)置了四個(gè)變量：myFont, myColor, myFontSize, 和 myWidth。
變量聲明后我們就可以在代碼中使用它：

$myFont:Helvetica,sans-serif;  
$myColor:red;  
$myFontSize:18px;  
$myWidth:680px;  
  
body{  
font-family:$myFont;  
font-size:$myFontSize;  
color:$myColor;  
}  
  
#container{  
width:$myWidth;  
}

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

body{  
font-family:Helvetica,sans-serif;  
font-size:18px;  
color:red;  
}  
  
#container{  
width:680px;  
}

3.3 Sass變量的作用域,只能在當(dāng)前的層級(jí)上有效果，如下所示 h1 的樣式為它內(nèi)部定義的 green，p 標(biāo)簽則是為 red。

$myColor:red;  
  
h1{  
$myColor:green;// 只在 h1 里頭有用，局部作用域  
color:$myColor;  
}  
  
p{  
color:$myColor;  
}

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

h1{  
color:green;  
}  
  
p{  
color:red;  
}

四、Sass 嵌套規(guī)則與屬性

4.1 Sass 嵌套 CSS 選擇器類似于 HTML 的嵌套規(guī)則。
如下我們嵌套一個(gè)導(dǎo)航欄的樣式：

nav{  
  ul{  
margin:0;  
padding:0;  
list-style:none;  
}  
  li{  
display:inline-block;  
}  
  a{  
display:block;  
padding:6px12px;  
text-decoration:none;  
}  
}

實(shí)例中，ul, li, 和 a 選擇器都嵌套在 nav 選擇器中
將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

nav ul{  
margin:0;  
padding:0;  
list-style:none;  
}  
nav li{  
display:inline-block;  
}  
nav a{  
display:block;  
padding:6px12px;  
text-decoration:none;  
}

4.2 Sass嵌套屬性很多,在 Sass中，我們可以使用嵌套屬性來編寫它們,會(huì)省事很多，以下sass的代碼如下：

font:{  
  family:Helvetica,sans-serif;  
size:18px;  
  weight:bold;  
}  
  
text:{  
  align:center;  
  transform:lowercase;  
overflow:hidden;  
}

將以上代碼轉(zhuǎn)換為 CSS 代碼，如下所示：

font-family:Helvetica,sans-serif;  
font-size:18px;  
font-weight:bold;  
  
text-align:center;  
text-transform:lowercase;  
text-overflow:hidden;

總結(jié)：

以上是sass的基本簡單介紹，sass還有比較深入復(fù)雜的方法，大家也可以去sass官網(wǎng)深入學(xué)習(xí)，網(wǎng)址：https://www.sasscss.com/getting-started/
。

作者：湯清麗

日期：2020-1-6

微信：lenat666