慕課網(wǎng)學(xué)習(xí)筆記

什么是 CSS 預(yù)處理器憋槐？

CSS 預(yù)處理器定義了一種新的語言秕衙，其基本思想是吝沫，用一種專門的編程語言爬坑，為 CSS 增加了一些編程的特性纠屋，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作盾计。
通俗的說售担，“CSS 預(yù)處理器用一種專門的編程語言，進(jìn)行 Web 頁面樣式設(shè)計(jì)署辉，然后再編譯成正常的 CSS 文件族铆，以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性哭尝，無需考慮瀏覽器的兼容性問題”哥攘，例如你可以在 CSS 中使用變量、簡單的邏輯程序材鹦、函數(shù)（如右側(cè)代碼編輯器中就使用了變量$color）等等在編程語言中的一些基本特性逝淹，可以讓你的 CSS 更加簡潔、適應(yīng)性更強(qiáng)桶唐、可讀性更佳创橄，更易于代碼的維護(hù)等諸多好處。

什么是Sass

Sass 是一門高于 CSS 的元語言莽红，它能用來清晰地、結(jié)構(gòu)化地描述文件樣式，有著比普通 CSS 更加強(qiáng)大的功能安吁。
Sass 能夠提供更簡潔醉蚁、更優(yōu)雅的語法，同時提供多種功能來創(chuàng)建可維護(hù)和管理的樣式表鬼店。

Sass 和 SCSS 有什么區(qū)別网棍？

Sass 和 SCSS 其實(shí)是同一種東西，我們平時都稱之為 Sass妇智，兩者之間不同之處有以下兩點(diǎn)：
1.文件擴(kuò)展名不同滥玷，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名
2.語法書寫方式不同巍棱，Sass 是以嚴(yán)格的縮進(jìn)式語法規(guī)則來書寫惑畴，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似航徙。

SCSS 和純 CSS 寫法差很多嗎如贷？

SCSS 和 CSS 寫法無差別：
SCSS 和 CSS 寫法無差別，這也是 Sass 后來越來越受大眾喜歡原因之一到踏。簡單點(diǎn)說杠袱，把你現(xiàn)有的“.css”文件直接修改成“.scss”即可使用。

Mac下安裝SASS

• 首先你需要在終端中檢查有沒有安裝ruby窝稿，命令行如下：

  ruby -v
  

如果出現(xiàn)類似代碼楣富，就說明已經(jīng)安裝了。

  ruby 2.0.0p645 (2015-04-13 revision 50299) [universal.x86_64-darwin15]

從上面可以知道伴榔，我的ruby的版本纹蝴。

沒有安裝ruby,先安裝ruby

• 接下來安裝sass

  sudo gem install sass
  

• 安裝成功后，查看sass版本號

  sass -v
  

• 當(dāng)sass版本滯后時潮梯，如何更新sass骗灶？

  gem update sass
  

• 在常期使用的時候難免會碰到無法解決的問題，有時候可能需要卸載 Sass秉馏，然后再重新安裝 Sass耙旦。如何卸載？

  gem uninstall sass
  

Sass編譯

Sass 的編譯有多種方法：

• 命令編譯
• GUI工具編譯
• 自動化編輯

命令編譯

命令編譯是指使用你電腦中的命令終端萝究，通過輸入 Sass 指令來編譯 Sass免都。這種編譯方式是最直接也是最簡單的一種方式。因?yàn)橹恍枰谀愕拿罱K端輸入：

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

這是對一個單文件進(jìn)行編譯帆竹，如果想對整個項(xiàng)目所有 Sass 文件編譯成 CSS 文件绕娘，可以這樣操作：

sass sass/:css/

缺點(diǎn)及解決方法：

在實(shí)際編譯過程中，你會發(fā)現(xiàn)上面的命令栽连，只能一次性編譯险领。每次個性保存“.scss”文件之后侨舆，都得重新執(zhí)行一次這樣的命令。如此操作太麻煩绢陌，其實(shí)還有一種方法挨下，就是在編譯 Sass 時，開啟“watch”功能脐湾，這樣只要你的代碼進(jìn)行任保修改臭笆，都能自動監(jiān)測到代碼的變化，并且給你直接編譯出來：

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

SASS基本特性

• 聲明變量

sass變量包含三個部分：
1.聲明變量的符號‘$’
2.變量名稱
3.賦予變量的值
下面看個例子：

   $color:red;
   body {
      color:$color;
   }

編譯結(jié)果：

  body {
      color: red;
   }

如果值后面加上!default則表示默認(rèn)值秤掌。!default用于變量愁铺，含義是：如果這個變量被聲明賦值了，那就用它聲明的值闻鉴，否則就用這個默認(rèn)值茵乱。sass 的默認(rèn)變量一般是用來設(shè)置默認(rèn)值，然后根據(jù)需求來覆蓋的椒拗，覆蓋的方式也很簡單似将，只需要在默認(rèn)變量之前重新聲明下變量即可。下面看個例子：

  $color:red;
  $color:blue;
    body {
        color:$color;
  }

color的值后面沒有加!default,那么前一個$color會被覆蓋在验。編譯結(jié)果為:

body {
  color: blue; 
}

加了!default,前一個$color不會被覆蓋,代碼如下

$color:red;
$color:blue !default;
body {
    color:$color;
}

編譯結(jié)果如下：

body {
  color: red;
 }

• [Sass]局部變量和全局變量

先看個例子：

 //SCSS   $color: orange !default;//定義全局變量(在選擇器、函數(shù)堵未、
混合宏...的外面定義的變量為全局變量)
  
  $color:red !default;
  body {
    color:$color;
     $color:blue;
  div {
   color:$color;
      }
  }

編譯結(jié)果：

body {
    color: red;
 }
body div {
    color: blue; 
}

上面的示例演示可以得知腋舌，在元素內(nèi)部定義的變量不會影響其他元素。如此可以簡單的理解成渗蟹，全局變量就是定義在元素外面的變量块饺，如下代碼：第一個$color 就是一個全局變量，而定義在元素內(nèi)部的變量雌芽，是一個局部變量授艰。
當(dāng)在局部范圍（選擇器內(nèi)、函數(shù)內(nèi)世落、混合宏內(nèi)...）聲明一個已經(jīng)存在于全局范圍內(nèi)的變量時淮腾，局部變量就成為了全局變量的影子√爰眩基本上谷朝，局部變量只會在局部范圍內(nèi)覆蓋全局變量。

<strong>什么時候聲明變量武花？</strong>

我的建議圆凰，創(chuàng)建變量只適用于感覺確有必要的情況下。不要為了某些駭客行為而聲明新變量体箕，這絲毫沒有作用专钉。只有滿足所有下述標(biāo)準(zhǔn)時方可創(chuàng)建新變量：

1.該值至少重復(fù)出現(xiàn)了兩次挑童；
2.該值至少可能會被更新一次；
3.該值所有的表現(xiàn)都與變量有關(guān)（非巧合）跃须。
基本上炮沐，沒有理由聲明一個永遠(yuǎn)不需要更新或者只在單一地方使用變量。

• [SASS]嵌套

1.[Sass]嵌套-選擇器嵌套

nav {
   a {
      color: red;
      header & {
      color:green;
      }
    }  
 }

編譯結(jié)果：

nav a {
  color:red;
}
header nav a {
  color:green;
}

2.[Sass]嵌套-屬性嵌套

Sass 中還提供屬性嵌套回怜，CSS 有一些屬性前綴相同，只是后綴不一樣换薄，比如：border-top/border-right玉雾，與這個類似的還有 margin、padding轻要、font 等屬性复旬。假設(shè)你的樣式中用到了：

 .box {
     font: {
     size: 12px;
     weight: bold;
    }  
}

編譯結(jié)果：

.box {
  font-size: 12px;
  font-weight: bold; 
}

3.[Sass]嵌套-偽類嵌套

其實(shí)偽類嵌套和屬性嵌套非常類似，只不過他需要借助&符號一起配合使用冲泥。

.box{
  &:before {
  content:"偽元素嵌套";
  }
}

編譯結(jié)果：

.box:before {
   content: "偽元素嵌套"; 
}

• [Sass]混合宏-聲明混合宏

如果你的整個網(wǎng)站中有幾處小樣式類似驹碍，比如顏色，字體等凡恍，在 Sass 可以使用變量來統(tǒng)一處理志秃，那么這種選擇還是不錯的。但當(dāng)你的樣式變得越來越復(fù)雜嚼酝，需要重復(fù)使用大段的樣式時浮还，使用變量就無法達(dá)到我們目了。這個時候 Sass 中的混合宏就會變得非常有意義闽巩。

1钧舌、聲明混合宏

<strong>不帶參數(shù)混合宏：
在 Sass 中，使用“@mixin”來聲明一個混合宏</strong>

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

其中 @mixin 是用來聲明混合宏的關(guān)鍵詞涎跨，有點(diǎn)類似 CSS 中的 @media洼冻、@font-face 一樣。border-radius 是混合宏的名稱隅很。大括號里面是復(fù)用的樣式代碼撞牢。

<strong>帶參數(shù)混合宏：</strong>
除了聲明一個不帶參數(shù)的混合宏之外，還可以在定義混合宏時帶有參數(shù)外构，如：

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

<strong>復(fù)雜的混合宏：</strong>
Sass 中的混合宏還提供更為復(fù)雜的普泡，你可以在大括號里面寫上帶有邏輯關(guān)系，幫助更好的做你想做的事情,如：

@mixin box-shadow($shadow...) {
    @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

這個 box-shadow 的混合宏审编，帶有多個參數(shù)撼班，這個時候可以使用“ … ”來替代。簡單的解釋一下垒酬，當(dāng) $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時砰嘁，表示有多個陰影值件炉，反之調(diào)用默認(rèn)的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”。

• [Sass]混合宏-調(diào)用混合宏

在 Sass 中通過 @mixin 關(guān)鍵詞聲明了一個混合宏矮湘，那么在實(shí)際調(diào)用中斟冕，其匹配了一個關(guān)鍵詞“@include”來調(diào)用聲明好的混合宏。例如在你的樣式中定義了一個圓角的混合宏“border-radius”:

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

調(diào)用宏

button {
  @include border-radius;

}

編譯結(jié)果：

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

• [Sass]混合宏的參數(shù)--傳一個不帶值的參數(shù)

在 Sass 的混合宏中缅阳，還可以給混合宏的參數(shù)傳一個默認(rèn)值磕蛇，例如：

  @mixin border-radius($radius:3px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
  }

在混合宏“border-radius”傳了一個參數(shù)“$radius”，而且給這個參數(shù)賦予了一個默認(rèn)值“3px”十办。
在調(diào)用類似這樣的混合宏時秀撇，會多有一個機(jī)會，假設(shè)你的頁面中的圓角很多地方都是“3px”的圓角向族，那么這個時候只需要調(diào)用默認(rèn)的混合宏“border-radius”:

.btn {
    @include border-radius;
 }

編譯出來的 CSS:

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

但有的時候呵燕，頁面中有些元素的圓角值不一樣，那么可以隨機(jī)給混合宏傳值件相，如：

 .box {
    @include border-radius(50%);
}

編譯出來的 CSS:

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

• [Sass]混合宏的參數(shù)--傳多個參數(shù)

Sass 混合宏除了能傳一個參數(shù)之外再扭，還可以傳多個參數(shù)，如：

  @mixin center($width,$height){
    width: $width;
    height: $height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -($height) / 2;
    margin-left: -($width) / 2;
  }

在混合宏“center”就傳了多個參數(shù)夜矗。在實(shí)際調(diào)用和其調(diào)用其他混合宏是一樣的：

  .box-center {
    @include center(500px,300px);
  }

編譯出來 CSS:

  .box-center {
    width: 500px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -250px;
  }

有一個特別的參數(shù)“…”泛范。當(dāng)混合宏傳的參數(shù)過多之時，可以使用參數(shù)來替代侯养，如：

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
} @else {
  $shadows: 0 0 2px rgba(#000,.25);
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
  }
}

在實(shí)際調(diào)用中：

.box {
@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px   rgba(#000,.2));
}

編譯出來的CSS:

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0,     0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

• [Sass]擴(kuò)展/繼承

在 Sass 中也具有繼承一說敦跌，也是繼承類中的樣式代碼塊。在 Sass 中是通過關(guān)鍵詞 “@extend”來繼承已存在的類樣式塊逛揩，從而實(shí)現(xiàn)代碼的繼承柠傍。如下所示：

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}
.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

編譯出來之后：

//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
 .btn-primary {
   background-color: #f36;
   color: #fff;
}
.btn-second {
  background-clor: orange;
  color: #fff;
}

從示例代碼可以看出，在 Sass 中的繼承辩稽，可以繼承類樣式塊中所有樣式代碼惧笛，而且編譯出來的 CSS 會將選擇器合并在一起，形成組合選擇器：

.btn, .btn-primary, .btn-second {
   border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

• [Sass]占位符 %placeholder

Sass 中的占位符 %placeholder 功能是一個很強(qiáng)大逞泄，很實(shí)用的一個功能患整，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗余的情形喷众。因?yàn)?%placeholder 聲明的代碼各谚，如果不被 @extend 調(diào)用的話，不會產(chǎn)生任何代碼到千。來看一個演示：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

這段代碼沒有被 @extend 調(diào)用昌渤，他并沒有產(chǎn)生任何代碼塊，只是靜靜的躺在你的某個 SCSS 文件中憔四。只有通過 @extend 調(diào)用才會產(chǎn)生代碼：

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}
.btn {
  @extend %mt5;
  @extend %pt5;
}
.block {
   @extend %mt5;
  span {
    @extend %pt5;
  }
}

編譯出來的CSS:

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

從編譯出來的 CSS 代碼可以看出膀息，通過 @extend 調(diào)用的占位符般眉，編譯出來的代碼會將相同的代碼合并在一起。這也是我們希望看到的效果潜支，也讓你的代碼變得更為干凈甸赃。

sass.jpg

• [Sass]插值#{}

使用 CSS 預(yù)處理器語言的一個主要原因是想使用 Sass 獲得一個更好的結(jié)構(gòu)體系。比如說你想寫更干凈的冗酿、高效的和面向?qū)ο蟮?CSS埠对。Sass 中的插值(Interpolation)就是重要的一部分。讓我們看一下下面的例子：

$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
    #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

它可以讓變量和屬性工作的很完美裁替，上面的代碼編譯成 CSS：

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

這是 Sass 插值中一個簡單的實(shí)例鸠窗。當(dāng)你想設(shè)置屬性值的時候你可以使用字符串插入進(jìn)來。另一個有用的用法是構(gòu)建一個選擇器胯究。可以這樣使用：

@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

編譯出來的 CSS:

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

個人總結(jié)：插值可以能用在屬性名中躁绸，即:的左邊裕循。還可以用在@extend 中。例如：

%updated-status {
   margin-top: 20px;
   background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
  @extend %updated-#{$flag};
  @extend .selected-#{$flag};
}

上面的 Sass 代碼是可以運(yùn)行的净刮，因?yàn)樗o了我們力量剥哑，可以動態(tài)的插入 .class 和 %placeholder。當(dāng)然他們不能接受像 mixin 這樣的參數(shù)淹父，上面的代碼編譯出來的 CSS:

.navigation {
    margin-top: 20px;
    background: #F00;
}
.selected-status, .navigation {
    font-weight: bold;
}

• [Sass]注釋

在 Sass 中注釋有兩種方式：
1株婴、類似 CSS 的注釋方式，使用 ”/* ”開頭暑认，結(jié)屬使用 ”*/ ”
2困介、類似 JavaScript 的注釋方式，使用“//”

兩者區(qū)別蘸际，前者會在編譯出來的 CSS 顯示座哩，后者在編譯出來的 CSS 中不會顯示，來看一個示例：

//定義一個占位符
%mt5 {
  margin-top: 5px;
}
/*調(diào)用一個占位符*/
.box {
 @extend %mt5;
}

編譯出來的CSS

.box {
  margin-top: 5px;
}
/*調(diào)用一個占位符*/

• [Sass]數(shù)據(jù)類型

Sass 和 JavaScript 語言類似粮彤，也具有自己的數(shù)據(jù)類型根穷，在 Sass 中包含以下幾種數(shù)據(jù)類型：

• 數(shù)字: 如，1导坟、 2屿良、 13、 10px惫周；
• 字符串：有引號字符串或無引號字符串尘惧，如，"foo"闯两、 'bar'褥伴、 baz谅将；
• 顏色：如，blue重慢、 #04a3f9饥臂、 rgba(255,0,0,0.5)；
• 布爾型：如似踱，true隅熙、 false；
• 空值：如核芽，null囚戚；
• 值列表：用空格或者逗號分開，如轧简，1.5em 1em 0 2em 驰坊、 Helvetica, Arial, sans-serif。

SassScript 也支持其他 CSS 屬性值（property value）哮独，比如 Unicode 范圍拳芙，或 !important 聲明。然而皮璧，Sass 不會特殊對待這些屬性值舟扎，一律視為無引號字符串 (unquoted strings)。

• [Sass]字符串

SassScript 支持 CSS 的兩種字符串類型：

• 有引號字符串 (quoted strings)悴务，如 "Lucida Grande" 睹限、'http://sass-lang.com'；
• 無引號字符串 (unquoted strings)讯檐，如 sans-serifbold羡疗。

在編譯 CSS 文件時不會改變其類型。只有一種情況例外别洪，使用 #{ }插值語句 (interpolation) 時顺囊，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名蕉拢。

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

編譯為:

body.firefox .header:before {
  content: "Hi, Firefox users!";
 }

• [Sass]值列表

所謂值列表 (lists) 是指 Sass 如何處理 CSS 中:

margin: 10px 15px 0 0

或者：

font-face: Helvetica, Arial, sans-serif

像上面這樣通過空格或者逗號分隔的一系列的值特碳。
事實(shí)上，獨(dú)立的值也被視為值列表——只包含一個值的值列表晕换。
Sass列表函數(shù)（Sass list functions）賦予了值列表更多功能（Sass進(jìn)級會有講解）：

1.nth函數(shù)（nth function） 可以直接訪問值列表中的某一項(xiàng)午乓；
2.join函數(shù)（join function） 可以將多個值列表連結(jié)在一起；
3.append函數(shù)（append function） 可以在值列表中添加值闸准；
4.@each規(guī)則（@each rule） 則能夠給值列表中的每個項(xiàng)目添加樣式益愈。

值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個值列表的值列表。如果內(nèi)外兩層值列表使用相同的分隔方式蒸其，要用圓括號包裹內(nèi)層敏释，所以也可以寫成 (1px 2px) (5px 6px)。當(dāng)值列表被編譯為 CSS 時摸袁，Sass 不會添加任何圓括號钥顽，因?yàn)?CSS 不允許這樣做。(1px 2px) (5px 6px)與 1px 2px 5px 6px 在編譯后的 CSS 文件中是一樣的靠汁，但是它們在 Sass 文件中卻有不同的意義蜂大，前者是包含兩個值列表的值列表，而后者是包含四個值的值列表蝶怔。

可以用 () 表示空的列表奶浦，這樣不可以直接編譯成 CSS，比如編譯 font-family: ()時踢星，Sass 將會報(bào)錯澳叉。如果值列表中包含空的值列表或空值，編譯時將清除空值沐悦，比如 1px 2px () 3px 或 1px 2px null 3px耳高。

[Sass運(yùn)算]加法

加法運(yùn)算是 Sass 中運(yùn)算中的一種，在變量或?qū)傩灾卸伎梢宰黾臃ㄟ\(yùn)算所踊。如：

.box {
  width: 20px + 8in;
}

編譯出來的 CSS:

.box {
  width: 788px;
}

但對于攜帶不同類型的單位時，在 Sass 中計(jì)算會報(bào)錯概荷，如下例所示：

.box {
    width: 20px + 1em;
}

編譯的時候秕岛，編譯器會報(bào)錯：“Incompatible units: 'em' and ‘px'.”

[Sass運(yùn)算]減法

Sass 的減法運(yùn)算和加法運(yùn)算類似，我們通過一個簡單的示例來做闡述：

$full-width: 960px;
$sidebar-width: 200px;
.content {
  width: $full-width -  $sidebar-width;
}

編譯出來的 CSS 如下：

.content {
      width: 760px;
}

同樣的误证，運(yùn)算時碰到不同類型的單位時继薛，編譯也會報(bào)錯。

[Sass運(yùn)算]乘法

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

.box {
      width:10px * 2px;  
}

編譯的時候報(bào)“20px*px isn't a valid CSS value.”錯誤信息蓝谨。

如果進(jìn)行乘法運(yùn)算時灌具，兩個值單位相同時，只需要為一個數(shù)值提供單位即可譬巫。上面的示例可以修改成：

box {
  width: 10px * 2;
}

編譯出來的 CSS:

.box {
  width: 20px;
}

Sass 的乘法運(yùn)算和加法咖楣、減法運(yùn)算一樣，在運(yùn)算中有不同類型的單位時芦昔，也將會報(bào)錯诱贿。

[Sass運(yùn)算]除法

Sass 的乘法運(yùn)算規(guī)則也適用于除法運(yùn)算。不過除法運(yùn)算還有一個特殊之處。眾所周知“/”符號在 CSS 中已做為一種符號使用珠十。因此在 Sass 中做除法運(yùn)算時料扰，直接使用“/”符號做為除號時，將不會生效焙蹭，編譯時既得不到我們需要的效果晒杈，也不會報(bào)錯。一起先來看一個簡單的示例：

.box {
  width: 100px / 2;  
}

編譯出來的 CSS 如下：

.box {
  width: 100px / 2;
}

這樣的結(jié)果對于大家來說沒有任何意義壳嚎。要修正這個問題桐智，只需要給運(yùn)算的外面添加一個小括號( )即可：

.box {
  width: (100px / 2);  
}

編譯出來的 CSS 如下：

.box {
  width: 50px;
}

”/ ”符號被當(dāng)作除法運(yùn)算符時有以下幾種情況：
? 如果數(shù)值或它的任意部分是存儲在一個變量中或是函數(shù)的返回值。
? 如果數(shù)值被圓括號包圍烟馅。
? 如果數(shù)值是另一個數(shù)學(xué)表達(dá)式的一部分说庭。

Sass 的除法運(yùn)算還有一個情況。我們先回憶一下郑趁，在乘法運(yùn)算時刊驴，如果兩個值帶有相同單位時，做乘法運(yùn)算時寡润，出來的結(jié)果并不是我們需要的結(jié)果捆憎。但在除法運(yùn)算時，如果兩個值帶有相同的單位值時梭纹，除法運(yùn)算之后會得到一個不帶單位的數(shù)值躲惰。

[Sass運(yùn)算]數(shù)字運(yùn)算

在 Sass 運(yùn)算中數(shù)字運(yùn)算是較為常見的，數(shù)字運(yùn)算包括前面介紹的：加法变抽、減法础拨、乘法和除法等運(yùn)算。而且還可以通過括號來修改他們的運(yùn)算先后順序绍载。和我們數(shù)學(xué)運(yùn)算是一樣的诡宗，一起來看個示例。

.box {
    width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

編譯出來的 CSS:

.box {
  width: 60px;
}