Sass的入門安裝和基本使用方法

前言

Sass 是一個 CSS 預處理器，能夠幫助咱們減小 CSS 重複的代碼，節省開發時間。 擴展了 CSS3，增長了規則、變量、混入、選擇器、繼承、內置函數等等特性，生成良好格式化的 CSS 代碼，易於組織和維護，
Sass 文件後綴爲.Scss。

1、Sass安裝

NPM 安裝

1.1 咱們可使用npm來安裝 Sass，這是最經常使用的安裝方式。
首先查看有沒有下載npm，如下命令能夠查看到是否有下載過npm，已經下載會出現一個版本號 6.12.1

npm -v

1.2 咱們通常都使用淘寶 NPM 鏡像定製的 cnpm，命令行工具代替默認的npm:只須要安裝如下命令就會自動下載安裝一個包。

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

1.3 而後咱們就可使用cnpm命令使用這個包，如下就算安裝完成了。

cnpm install -g sass

2、sass的使用方法

2.1 首先要創建2個文件夾，文件夾名稱能夠隨便起，再啓動如下命令監聽。

sass --watch sass:css  //（sass:css爲文件夾名稱，能夠自設定）

2.2 在.scss 文檔寫入內容，另一個css文件夾就會自動出現一個css的文檔，在寫代碼時命令窗口不能關閉，負責沒法執行css文檔代碼。

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

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

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

會在.css文檔出現如下執行代碼：

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

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

3、sass的變量

3.1 Sass 變量使用$符號：變量用於存儲一些信息，它能夠重複使用。
Sass 變量能夠存儲如下信息：

• 字符串
• 數字
• 顏色值
• 布爾值
• 列表
• null 值

3.2 如下實例設置了四個變量：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;  
}

將以上代碼轉換爲 CSS 代碼，以下所示：

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

3.3 Sass變量的做用域,只能在當前的層級上有效果，以下所示 h1 的樣式爲它內部定義的 green，p 標籤則是爲 red。

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

將以上代碼轉換爲 CSS 代碼，以下所示：

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

4、Sass 嵌套規則與屬性

4.1 Sass 嵌套 CSS 選擇器相似於 HTML 的嵌套規則。
以下咱們嵌套一個導航欄的樣式：

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

實例中，ul, li, 和 a 選擇器都嵌套在 nav 選擇器中
將以上代碼轉換爲 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中，咱們可使用嵌套屬性來編寫它們,會省事不少，如下sass的代碼以下：

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

將以上代碼轉換爲 CSS 代碼，以下所示：

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

總結：
以上是sass的基本簡單介紹，sass還有比較深刻複雜的方法，你們也能夠去sass官網看看，深刻學習。

---

做者：湯清麗

日期：2020-1-6

微信：lenat666