sass的語法格式和基本特性

五、語法格式

1、sass語法格式
是sass的最初語法格式，是通過tab鍵控制縮進的一種語法規則，對鎖緊要求非常嚴格，而且不帶有任何的分號和大括號，把這種語法格式成爲sass老版本，其文件名以 “.sass”爲擴展名

2、scss語法格式
scss是sass的新語法格式，從外形上來判斷他和css幾乎是一樣的，代碼都包裹在一對大括號裏，並且末尾結束出都有一個分號，其文件名以 “.sass”爲擴展名

不管是 Sass 的語法格式還是 SCSS 的語法格式，他們的功能都是一樣的，不同的是其書寫格式和文件擴展名不同，來看一個簡單的對比圖：

3、父選擇器
在嵌套 CSS 規則時，有時也需要直接使用嵌套外層的父選擇器，例如，當給某個元素設定 hover 樣式時，或者當 body 元素有某個 classname 時，可以用 & 代表嵌套規則外層的父選擇器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

編譯爲：

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

編譯後的 CSS 文件中 & 將被替換成嵌套外層的父選擇器，如果含有多層嵌套，最外層的父選擇器會一層一層向下傳遞：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

編譯爲：

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

& 必須作爲選擇器的第一個字符，其後可以跟隨後綴生成複合的選擇器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

編譯爲：

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

六、sass編譯

1、命令編譯

單文件編譯：sass <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

多文件編譯：sass sass/:css/

自動監測：sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

2、GUI界面工具編譯

Koala (http://koala-app.com/) **
Compass.app（http://compass.kkbox.com/）
Scout（http://mhs.github.io/scout-app/）
CodeKit（https://incident57.com/codekit/index.html）**
Prepros（https://prepros.io/）

3、自動化編譯

Grunt：Grunt 配置 Sass 編譯的示例代碼

Gulp：Gulp 配置 Sass 編譯的示例代碼

七、不同樣式的輸出方式

1、嵌套輸出方式 nested

2、展開輸出方式 expanded

3、緊湊輸出方式 compact

4、壓縮輸出方式 compressed

八、sass聲明變量

1、聲明變量

美元符號“$”開頭

2、普通變量與默認變量

普通變量：定義之後可以在全局範圍內使用

默認變量：sass 的默認變量僅需要在值後面加上 !default 即可

3、局部變量和全局變量

//SCSS（代碼演示）
$color: orange !default;//定義全局變量(在選擇器、函數、混合宏...的外面定義的變量爲全局變量)
.block {
  color: $color;//調用全局變量
}
em {
  $color: red;//定義局部變量
  a {
    color: $color;//調用局部變量
  }
}
span {
  color: $color;//調用全局變量
}

全局變量：定義在元素外面的變量（$color: orange !default;）

局部變量：定義在元素內部的變量（ $color: red;）

九、註釋、數據類型、數組、運算

1、註釋

/* * / 多行註釋
// 單行註釋
Sass 支持標準的 CSS 多行註釋，以及單行註釋，多行註釋會被完整輸出到編譯後的 CSS 文件中，單行註釋則不會

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

編譯爲：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

2、數據類型

SassScript 支持 6 種主要的數據類型：

數字：1, 2, 13, 10px
字符串：有引號字符串與無引號字符串，“foo”, ‘bar’, baz
顏色：blue, #04a3f9, rgba(255,0,0,0.5)
布爾型：true, false
空值：null
數組 (list)：用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps：相當於 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支持其他 CSS 屬性值，比如 Unicode 字符集，或 !important 聲明。然而Sass 不會特殊對待這些屬性值，一律視爲無引號字符串。

3、數組
數組 (lists) 指 Sass 如何處理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 這樣通過空格或者逗號分隔的一系列的值。事實上，獨立的值也被視爲數組 —— 只包含一個值的數組。

數組本身沒有太多功能，但 Sass list functions 賦予了數組更多新功能：nth 函數可以直接訪問數組中的某一項；join 函數可以將多個數組連接在一起；append 函數可以在數組中添加新值；而 @each 指令能夠遍歷數組中的每一項。

數組中可以包含子數組，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個數組的數組。如果內外兩層數組使用相同的分隔方式，需要用圓括號包裹內層，所以也可以寫成 (1px 2px) (5px 6px)。變化是，之前的 1px 2px, 5px 6px 使用逗號分割了兩個子數組 (comma-separated)，而 (1px 2px) (5px 6px) 則使用空格分割(space-separated)。

當數組被編譯爲 CSS 時，Sass 不會添加任何圓括號（CSS 中沒有這種寫法），所以 (1px 2px) (5px 6px) 與 1px 2px, 5px 6px 在編譯後的 CSS 文件中是完全一樣的，但是它們在 Sass 文件中卻有不同的意義，前者是包含兩個數組的數組，而後者是包含四個值的數組。

用 () 表示不包含任何值的空數組（在 Sass 3.3 版之後也視爲空的 map）。空數組不可以直接編譯成 CSS，比如編譯 font-family: () Sass 將會報錯。如果數組中包含空數組或空值，編譯時將被清除，比如 1px 2px () 3px 或 1px 2px null 3px。

基於逗號分隔的數組允許保留結尾的逗號，這樣做的意義是強調數組的結構關係，尤其是需要聲明只包含單個值的數組時。例如 (1,) 表示只包含 1 的數組，而 (1 2 3,) 表示包含 1 2 3 這個以空格分隔的數組的數組。

4、運算

4.1 數字運算

（一）、加法
加法運算是 Sass 中運算中的一種，在變量或屬性中都可以做加法運算。如：

$main-color:red;
body{
    margin: 0;
    padding: 0;
    h1{
			  border: 1px solid;
        font-size: 2rem;
        color: $main-color;
        text-decoration: underline;
				width: 20px+2in;
    }
}

編譯爲：

body {
  margin: 0;
  padding: 0;
}
body h1 {
  border: 1px solid;
  font-size: 2rem;
  color: red;
  text-decoration: underline;
  width: 212px;
}

（二）、減法
Sass 的減法運算和加法運算類似，我們通過一個簡單的示例來做闡述：

$main-color:red;
$full-width: 960px;
$sidebar-width: 700px;
body{
    margin: 0;
    padding: 0;
    h1{
			  border: 1px solid;
        font-size: 2rem;
        color: $main-color;
        text-decoration: underline;
				width: $full-width - $sidebar-width
    }

編譯爲：

body {
  margin: 0;
  padding: 0;
}
body h1 {
  border: 1px solid;
  font-size: 2rem;
  color: red;
  text-decoration: underline;
  width: 260px;
}

（三）、乘法
Sass 中的乘法運算和前面介紹的加法與減法運算還略有不同。雖然他也能夠支持多種單位（比如 em ,px , %），但當一個單位同時聲明兩個值時會有問題。比如下面的示例：

body{
    margin: 0;
    padding: 0;
    h1{
		  border: 1px solid;
		  width: 100px * 2px
    }
}

如果這樣寫，就會報錯，這時要注意：兩個值單位相同時，只需要爲一個數值提供單位即可
修改成：

body{
    margin: 0;
    padding: 0;
    h1{
		 border: 1px solid;
		  width: 100px * 2
    }
}

編譯出來的width就爲200px
Sass 的乘法運算和加法、減法運算一樣，在運算中有不同類型的單位時，也將會報錯,所以我們在運算的時候，要多注意些

（四）、除法
Sass 的乘法運算規則也適用於除法運算。不過除法運算還有一個特殊之處。衆所周知“/”符號在 CSS 中已做爲一種符號使用。因此在 Sass 中做除法運算時，直接使用“/”符號做爲除號時，將不會生效，編譯時既得不到我們需要的效果，也不會報錯，要修正這個問題，只需要給運算的外面添加一個小括號( )即可

body{
    margin: 0;
    padding: 0;
    h1{
			border: 1px solid;
			width: (1000px / 2)
    }
}

編譯出來的結果自然就爲 500px
如果需要使用變量，同時又要確保 / 不做除法運算而是完整地編譯到 CSS 文件中，只需要用 #{} 插值語句將變量包裹。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

編譯爲：

p {
  font: 12px/30px; }

4.2 顏色運算

 h1{
	color: #010203 + #040506;
	color: #010203 * 2;
	color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
 }

編譯爲：

h1{
      color: #050709;
      color: #020406;
      color: rgba(255,255, 0, 0.75);
}

4.3 字符串運算

$value: null;
 h1{
		cursor: e + -resize;  //+ 可用於連接字符串
		content: "Foo " + Bar; //注意，如果有引號字符串（位於 + 左側）連接無引號字符串，運算結果是有引號的，相反，無引號字符串（位於 + 左側）連接有引號字符串，運算結果則沒有引號。
		font-family: sans- + "serif";
		margin: 3px + 4px auto; //運算表達式與其他值連用時，用空格做連接符：
		content: "I ate #{5 + 10} pies!"; //在有引號的文本字符串中使用 #{} 插值語句可以添加動態的值：
		content: "I ate #{$value} pies!"; //空的值被視作插入了空字符串：
 }

編譯爲：

h1 {
  cursor: e-resize;
  content: "Foo Bar";
  font-family: sans-serif;
  margin: 7px auto;
  content: "I ate 15 pies!";
  content: "I ate  pies!";
}

4.4 布爾運算
SassScript 支持布爾型的 and or 以及 not 運算。
4.5 圓括號

h1{
	width: 1em + (2em * 3);
}

編譯爲：

h1{
	width: 7rem;
}

函數
SassScript 定義了多種函數，有些甚至可以通過普通的 CSS 語句調用：

p {
  color: hsl(0, 100%, 50%);
}

編譯爲：

h1 {
  color: #ff0000; }

6、關鍵詞參數
Sass 函數允許使用關鍵詞參數 (keyword arguments)，

h1 {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

雖然不夠簡明，但是閱讀起來會更方便。關鍵詞參數給函數提供了更靈活的接口，以及容易調用的參數。關鍵詞參數可以打亂順序使用，如果使用默認值也可以省缺，另外，參數名被視爲變量名，下劃線、短橫線可以互換使用。

sass的語法格式和基本特性

五、語法格式

六、sass編譯

七、不同樣式的輸出方式

八、sass聲明變量

九、註釋、數據類型、數組、運算

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

promise和async、await的用法

git詳細操作過程

vue-cli中配置axios/element-ui/vant

uni-app基礎語法學習

uni.request 網絡請求

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

sass的語法格式和基本特性

五、 語法格式

六、sass編譯

七、 不同樣式的輸出方式

八、sass聲明變量

九、註釋、數據類型、數組、運算

五、語法格式

七、不同樣式的輸出方式