什麼是CSS預處理器？
CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲 CSS 增加了一些編程的特性，將 CSS 作爲目標生成文件，然後開發者就只需要使用
這種語言進行編碼工作。通俗的說，“CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然後再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理
器爲 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題”，例如你可以在 CSS 中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可以讓
你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。
CSS 預處理器技術已經非常的成熟，而且也湧現出了很多種不同的CSS 預處理器語言，比如說：
- Sass（SCSS）
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
DT CSS如此之多的 CSS 預處理器，那麼“我應該選擇哪種 CSS 預處理器？”也相應成了最近網上的一大熱門話題，在 Linkedin、Twitter、CSS-Trick、知乎以及各大
技術論壇上，很多人爲此爭論不休。相比過去我們對是否應該使用 CSS 預處理器的話題而言，這已經是很大的進步了。到目前爲止，在衆多優秀的 CSS 預處理器語
言中就屬 Sass、LESS 和 Stylus 最優秀，討論的也多，對比的也多。就拿我目前學習的Sass來做個記錄吧。
什麼是Sass？
Sass 官網上是這樣描述 Sass 的：
Sass 是一門高於 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有着比普通 CSS 更加強大的功能。
Sass 能夠提供更簡潔、更優雅的語法，同時提供多種功能來創建可維護和管理的樣式表。
Sass 前世今生：
Sass 是最早的 CSS 預處理語言，有比 LESS 更爲強大的功能，不過其一開始的縮進式語法（Sass 老版本語法，後面課程會詳細介紹 ）並不能被大衆接受，不過由於其強大的功能和 Ruby on Rails 的大力推動，還是有很多開發者選擇了 Sass。Sass 是採用 Ruby 語言編寫的一款 CSS 預處理語言，它誕生於2007年，是最大的成熟的 CSS 預處理語言。最初它是爲了配合 HAML（一種縮進式 HTML 預編譯器）而設計的，因此有着和 HTML 一樣的縮進式風格。
爲什麼早期不如 LESS 普及？
雖然縮進式風格可以有效縮減代碼量，強制規範編碼風格，但它一方面並不爲大多數程序員接受，另一方面無法兼容已有的 CSS 代碼。這也是 Sass 雖然出現得最早，但遠不如 LESS 普及的原因。
sass和scss有什麼區別？
Sass 和 SCSS 其實是同一種東西，我們平時都稱之爲 Sass，兩者之間不同之處有以下兩點：
- 文件擴展名不同，Sass 是以“.sass”後綴爲擴展名，而 SCSS 是以“.scss”後綴爲擴展名
- 語法書寫方式不同，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
先來看一個示例：
1. Sass 語法
$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
font: 100% $font-stack
color: $primary-color
2. SCSS 語法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
編譯出來的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
sass與scss和純css寫法差別
Sass 和 CSS 寫法的確存在一定的差異，由於 Sass 是基於 Ruby 寫出來，所以其延續了 Ruby 的書寫規範。在書寫 Sass 時不帶有大括號和分號，其主要是依靠嚴格的縮進方式來控制的。如：
Sass寫法：
body
color: #fff
background: #f36
而在 CSS 我們是這樣書寫：
body{
color:#fff;
background:#f36;
}
SCSS 和 CSS 寫法無差別，這也是 Sass 後來越來越受大衆喜歡原因之一。簡單點說，把你現有的“.css”文件直接修改成“.scss”即可使用。
sass的安裝（windows版）
- 在 Windows 平臺下安裝 Ruby 需要先有 Ruby 安裝包，可以到 Ruby 的官網（http://rubyinstaller.org/downloads）下載對應需要的 Ruby 版本。
- Ruby 安裝文件下載好後，按步驟進行安裝 Ruby。在安裝過程中，個人建議將其安裝在 C 盤下，在安裝過程中選擇第二個選項：Add Ruby excutables to your PATH（不選中，就會出現編譯時找不到Ruby環境的情況）。
- Ruby 安裝完成後，在開始菜單中找到新安裝的 Ruby，並啓動 Ruby 的 Command 控制面板。此時Ruby已安裝好了。
- 安裝好 Ruby 之後，接下來就可以安裝 Sass 了。同樣的在windows下安裝 Sass 有多種方法。但這幾種方法都是非常的簡單，只需要在你的命令終端輸入一行命令即可。
在打開的Ruby 的 Command 控制面板命令終端，輸入下面的命令：
gem install sass
我們要如何確認自己是否安裝 Sass 成功了呢？其實很簡單，只需要通過下面的命令即可：
sass -v
如果在你的命令終端能看到類似這樣的信息就表示你的電腦安裝 Sass 已成功。也就是說可以正常的使用 Sass 了。
更新 Sass
維護 Sass 的團隊會不斷的爲 Sass 添加新的功能，那麼如何確保自己已安裝的 Sass 也具有這些新的功能特性呢？不會是卸載了重新安裝吧（雖然安裝也就是一個命令的事情）？ 其實不需要這麼麻煩，只需要在命令終端執行：
gem update sass
這個時候你看到類似下面這樣的信息，表示你的 Sass 已更新到最新版本。
卸載刪除Sass
在常期使用的時候難免會碰到無法解決的問題，有時候可能需要卸載 Sass，然後再重新安裝 Sass。那麼怎麼卸載 Sass 呢？
其實他也就是一句命令的事情：
gem uninstall sass
這樣就卸載了 Sass ，但這行命令基本上是使用不上。
Sass 語法格式
這裏說的 Sass 語法是 Sass 的最初語法格式，他是通過 tab 鍵控制縮進的一種語法規則，而且這種縮進要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱爲 Sass 老版本，其文件名以“.sass”爲擴展名。來看一個 Sass 語法格式的簡單示例。假設我們有一段這樣的 CSS 代碼：
【sass】混合宏的不足
混合宏在實際編碼中給我們帶來很多方便之處，特別是對於複用重複代碼塊。但其最大的不足之處是會生成冗餘的代碼塊。比如在不同的地方調用一個相同的混合宏時。如：
@mixin border-radius{
-webkit-border-radius: 3px;
border-radius: 3px;
}
.box {
@include border-radius;
margin-bottom: 5px;
}
.btn {
@include border-radius;
}
示例在“.box”和“.btn”中都調用了定義好的“border-radius”混合宏。先來看編譯出來的 CSS：
.box {
-webkit-border-radius: 3px;
border-radius: 3px;
margin-bottom: 5px;
}
.btn {
-webkit-border-radius: 3px;
border-radius: 3px;
}
上例明顯可以看出，Sass 在調用相同的混合宏時，並不能智能的將相同的樣式代碼塊合併在一起。這也是 Sass 的混合宏最不足之處。
【sass】擴展/繼承
繼承對於瞭解 CSS 的同學來說一點都不陌生，先來看一張圖：
圖中代碼顯示“.col-sub .block li,.col-extra .block li” 繼承了 “.item-list ul li”選擇器的 “padding : 0;” 和 “ul li” 選擇器中的 “list-style : none outside none;”以及 * 選擇器中的 “box-sizing:inherit;”。
在 Sass 中也具有繼承一說，也是繼承類中的樣式代碼塊。在 Sass 中是通過關鍵詞 “@extend”來繼承已存在的類樣式塊，從而實現代碼的繼承。如下所示：
//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 功能是一個很強大，很實用的一個功能，這也是我非常喜歡的功能。他可以取代以前 CSS 中的基類造成的代碼冗餘的情形。因爲 %placeholder 聲明的代碼，如果不被 @extend 調用的話，不會產生任何代碼。來看一個演示：
%mt5 {
margin-top: 5px;
}
%pt5{
padding-top: 5px;
}
這段代碼沒有被 @extend 調用，他並沒有產生任何代碼塊，只是靜靜的躺在你的某個 SCSS 文件中。只有通過 @extend 調用纔會產生代碼：
//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 調用的佔位符，編譯出來的代碼會將相同的代碼合併在一起。這也是我們希望看到的效果，也讓你的代碼變得更爲乾淨。
【sass】混合宏 vs 繼承 vs 佔位符
初學者都常常糾結於這個問題“什麼時候用混合宏，什麼時候用繼承，什麼時候使用佔位符？”其實他們各有各的優點與缺點，先來看看他們使用效果：
a) Sass 中的混合宏使用
@mixin mt($var){
margin-top: $var;
}
.block{
@include mt(5px);
span{
display: block;
@include mt(5px);
}
}
.header{
color: orange;
@include mt(5px);
span{
display: block;
@include mt(5px);
}
}
編譯出來的 CSS 見右側結果窗口。
總結：編譯出來的 CSS 清晰告訴了大家，他不會自動合併相同的樣式代碼，如果在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗餘，這也是 CSSer 無法忍受的一件事情。不過他並不是一無事處，他可以傳參數。
個人建議：如果你的代碼塊中涉及到變量，建議使用混合宏來創建相同的代碼塊。
b) Sass 中繼承
同樣的，將上面代碼中的混合宏，使用類名來表示，然後通過繼承來調用：
.mt{
margin-top: 5px;
}
.block{
@extend .mt;
span{
display: block;
@extend .mt;
}
}
.header{
color: #orange;
@extend .mt;
span{
display: block;
@extend .mt;
}
}
總結：使用繼承後，編譯出來的 CSS 會將使用繼承的代碼塊合併到一起，通過組合選擇器的方式向大家展現，比如 .mt, .block, .block span, .header, .header span。這樣編譯出來的代碼相對於混合宏來說要乾淨的多，也是 CSSer 期望看到。但是他不能傳變量參數。
個人建議：如果你的代碼塊不需要專任何變量參數，而且有一個基類已在文件中存在，那麼建議使用 Sass 的繼承。
c) 佔位符
最後來看佔位符，將上面代碼中的基類 .mt 換成 Sass 的佔位符格式：
%mt{
margin-top: 5px;
}
%block{
display: block;
}
.block{
@extend %mt;
span{
@extend %block;
@extend %mt;
}
}
.header{
color: orange;
@extend %mt;
span{
@extend %block;
@extend %mt;
}
}
總結：編譯出來的 CSS 代碼和使用繼承基本上是相同，只是不會在代碼中生成佔位符 mt 的選擇器。那麼佔位符和繼承的主要區別的，“佔位符是獨立定義，不調用的時候是不會在 CSS 中產生任何代碼；繼承是首先有一個基類存在，不管調用與不調用，基類的樣式都將會出現在編譯出來的 CSS 代碼中。”
來看一個表格：
【sass】插值#{}
使用 CSS 預處理器語言的一個主要原因是想使用 Sass 獲得一個更好的結構體系。比如說你想寫更乾淨的、高效的和麪向對象的 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 插值中一個簡單的實例。當你想設置屬性值的時候你可以使用字符串插入進來。另一個有用的用法是構建一個選擇器。可以這樣使用：
@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; }
一旦你發現這一點，你就會想到超級酷的 mixins，用來生成代碼或者生成另一個 mixins。然而，這並不完全是可能的。第一個限制，這可能會很刪除用於 Sass 變量的插值。
$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
margin-top: $margin-#{$size};
}
.login-box {
@include set-value(big);
}
上面的 Sass 代碼編譯出來，你會得到下面的信息：
error style.scss (Line 5: Undefined variable: “$margin-".)
所以，#{}語法並不是隨處可用，你也不能在 mixin 中調用：
@mixin updated-status {
margin-top: 20px;
background: #F00;
}
$flag: "status";
.navigation {
@include updated-#{$flag};
}
上面的代碼在編譯成 CSS 時同樣會報錯：
error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")
幸運的是，可以使用 @extend 中使用插值。例如：
%updated-status {
margin-top: 20px;
background: #F00;
}
.selected-status {
font-weight: bold;
}
$flag: "status";
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
}
上面的 Sass 代碼是可以運行的，因爲他給了我們力量，可以動態的插入 .class 和 %placeholder。當然他們不能接受像 mixin 這樣的參數，上面的代碼編譯出來的 CSS:
.navigation {
margin-top: 20px;
background: #F00;
}
.selected-status, .navigation {
font-weight: bold;
}
在 Sass 的社區正在積極討論插值的侷限性，誰又知道呢，也許我們很快將能夠使用這些技術也說不定呢。
【sass】註釋
註釋對於一名程序員來說，是極其重要，良好的註釋能幫助自己或者別人閱讀源碼。在 Sass 中註釋有兩種方式，我暫且將其命名爲：
1、類似 CSS 的註釋方式，使用 ”/* ”開頭，結屬使用 ”*/ ”
2、類似 JavaScript 的註釋方式，使用“//”
兩者區別，前者會在編譯出來的 CSS 顯示，後者在編譯出來的 CSS 中不會顯示，來看一個示例：
//定義一個佔位符
%mt5 {
margin-top: 5px;
}
/*調用一個佔位符*/
.box {
@extend %mt5;
}
編譯出來的CSS
.box {
margin-top: 5px;
}
/*調用一個佔位符*/
【sass】數據類型
Sass 和 JavaScript 語言類似，也具有自己的數據類型，在 Sass 中包含以下幾種數據類型：
- 數字: 如，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 不會特殊對待這些屬性值，一律視爲無引號字符串 (unquotedstrings)。
【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!"; }
需要注意的是：當 deprecated = property syntax 時 （暫時不理解是怎樣的情況），所有的字符串都將被編譯爲無引號字符串，不論是否使用了引號。
【sass】值列表
所謂值列表 (lists) 是指 Sass 如何處理 CSS 中：
margin: 10px 15px 0 0
或者：
font-face: Helvetica, Arial, sans-serif
像上面這樣通過空格或者逗號分隔的一系列的值。
事實上，獨立的值也被視爲值列表——只包含一個值的值列表。
Sass列表函數（Sass list functions）賦予了值列表更多功能：
- nth函數（nth function） 可以直接訪問值列表中的某一項；
- join函數（join function） 可以將多個值列表連結在一起；
- append函數（append function） 可以在值列表中添加值；
- @each規則（@each rule） 則能夠給值列表中的每個項目添加樣式。
值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個值列表的值列表。如果內外兩層值列表使用相同的分隔方式，要用圓括號包裹內層，所以也可以寫成 (1px 2px) (5px 6px)。當值列表被編譯爲 CSS 時，Sass 不會添加任何圓括號，因爲 CSS 不允許這樣做。(1px 2px) (5px 6px)與 1px 2px 5px 6px 在編譯後的 CSS 文件中是一樣的，但是它們在 Sass 文件中卻有不同的意義，前者是包含兩個值列表的值列表，而後者是包含四個值的值列表。
可以用 () 表示空的列表，這樣不可以直接編譯成 CSS，比如編譯 font-family: ()時，Sass 將會報錯。如果值列表中包含空的值列表或空值，編譯時將清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。
sass運算
【sass運算】加法
程序中的運算是常見的一件事情，但在 CSS 中能做運算的，到目前爲止僅有 calc() 函數可行。但在 Sass 中，運算只是其基本特性之一。在 Sass 中可以做各種數學計算，在接下來的章節中，主要和大家一起探討有關於 Sass 中的數學運算。
加法運算是 Sass 中運算中的一種，在變量或屬性中都可以做加法運算。如：
.box {
width: 20px + 8in;
}
編譯出來的 CSS:
.box {
width: 788px;
}
但對於攜帶不同類型的單位時，在 Sass 中計算會報錯，如下例所示：
.box {
width: 20px + 1em;
}
編譯的時候，編譯器會報錯：“Incompatible units: 'em' and ‘px'.”
【sass運算】減法
Sass 的減法運算和加法運算類似，我們通過一個簡單的示例來做闡述：
$full-width: 960px;
$sidebar-width: 200px;
.content {
width: $full-width - $sidebar-width;
}
編譯出來的 CSS 如下：
.content {
width: 760px;
}
同樣的，運算時碰到不同類型的單位時，編譯也會報錯，如：
$full-width: 960px;
.content {
width: $full-width - 1em;
}
編譯的時候，編譯器報“Incompatible units: 'em' and ‘px’.”錯誤。
【sass運算】乘法
Sass 中的乘法運算和前面介紹的加法與減法運算還略有不同。雖然他也能夠支持多種單位（比如 em ,px , %），但當一個單位同時聲明兩個值時會有問題。比如下面的示例：
.box {
width:10px * 2px;
}
編譯的時候報“20px*px isn't a valid CSS value.”錯誤信息。
如果進行乘法運算時，兩個值單位相同時，只需要爲一個數值提供單位即可。上面的示例可以修改成：
.box {
width: 10px * 2;
}
編譯出來的 CSS:
.box {
width: 20px;
}
Sass 的乘法運算和加法、減法運算一樣，在運算中有不同類型的單位時，也將會報錯。如下面的示例：
.box {
width: 20px * 2em;
}
編譯時報“40em*px isn't a valid CSS value.”錯誤信息。
【sass運算】除法
Sass 的乘法運算規則也適用於除法運算。不過除法運算還有一個特殊之處。衆所周知“/”符號在 CSS 中已做爲一種符號使用。因此在 Sass 中做除法運算時，直接使用“/”符號做爲除號時，將不會生效，編譯時既得不到我們需要的效果，也不會報錯。一起先來看一個簡單的示例：
.box {
width: 100px / 2;
}
編譯出來的 CSS 如下：
.box {
width: 100px / 2;
}
這樣的結果對於大家來說沒有任何意義。要修正這個問題，只需要給運算的外面添加一個小括號( )即可：
.box {
width: (100px / 2);
}
編譯出來的 CSS 如下：
.box {
width: 50px;
}
除了上面情況帶有小括號，“/”符號會當作除法運算符之外，如果“/”符號在已有的數學表達式中時，也會被認作除法符號。如下面示例：
.box {
width: 100px / 2 + 2in;
}
編譯出來的CSS：
.box {
width: 242px;
}
另外，在 Sass 除法運算中，當用變量進行除法運算時，“/”符號也會自動被識別成除法，如下例所示：
$width: 1000px;
$nums: 10;
.item {
width: $width / 10;
}
.list {
width: $width / $nums;
}
編譯出來的CSS:
.item {
width: 100px;
}
.list {
width: 100px;
}
綜合上述，”/ ”符號被當作除法運算符時有以下幾種情況：
• 如果數值或它的任意部分是存儲在一個變量中或是函數的返回值。
• 如果數值被圓括號包圍。
• 如果數值是另一個數學表達式的一部分。
如下所示：
//SCSS
p {
font: 10px/8px; // 純 CSS，不是除法運算
$width: 1000px;
width: $width/2; // 使用了變量，是除法運算
width: round(1.5)/2; // 使用了函數，是除法運算
height: (500px/2); // 使用了圓括號，是除法運算
margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}
編譯出來的CSS
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
Sass 的除法運算還有一個情況。我們先回憶一下，在乘法運算時，如果兩個值帶有相同單位時，做乘法運算時，出來的結果並不是我們需要的結果。但在除法運算時，如果兩個值帶有相同的單位值時，除法運算之後會得到一個不帶單位的數值。如下所示：
.box {
width: (1000px / 100px);
}
編譯出來的CSS如下：
.box {
width: 10;
}
【sass運算】變量計算
在 Sass 中除了可以使用數值進行運算之外，還可以使用變量進行計算，其實在前面章節的示例中也或多或少的向大家展示了。在 Sass 中使用變量進行計算，這使得 Sass 的數學運算功能變得更加實用。一起來看一個簡單的示例：
$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container {
width: $content-width + $sidebar-width + $gutter;
margin: 0 auto;
}
編譯出來的CSS
.container {
width: 960px;
margin: 0 auto;
}
【sass運算】數字運算
在 Sass 運算中數字運算是較爲常見的，數字運算包括前面介紹的：加法、減法、乘法和除法等運算。而且還可以通過括號來修改他們的運算先後順序。和我們數學運算是一樣的，一起來看個示例。
.box {
width: ((220px + 720px) - 11 * 20 ) / 12 ;
}
編譯出來的 CSS:
.box {
width: 60px;
}
上面這個簡單示例是一個典型的計算 Grid 單列列寬的運算。
【sass運算】顏色運算
所有算數運算都支持顏色值，並且是分段運算的。也就是說，紅、綠和藍各顏色分段單獨進行運算。如：
p {
color: #010203 + #040506;
}
計算公式爲 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 並且被合成爲：
如此編譯出來的 CSS 爲：
p {
color: #050709;
}
算數運算也能將數字和顏色值 一起運算，同樣也是分段運算的。如：
p {
color: #010203 * 2;
}
計算公式爲 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 並且被合成爲：
p {
color: #020406;
}
【sass運算】字符運算
在 Sass 中可以通過加法符號“+”來對字符串進行連接。例如：
$content: "Hello" + "" + "Sass!";
.box:before {
content: " #{$content} ";
}
編譯出來的CSS：
.box:before {
content: " Hello Sass! ";
}
除了在變量中做字符連接運算之外，還可以直接通過 +，把字符連接在一起：
div {
cursor: e + -resize;
}
編譯出來的CSS:
div {
cursor: e-resize;
}
注意，如果有引號的字符串被添加了一個沒有引號的字符串 （也就是，帶引號的字符串在 + 符號左側）， 結果會是一個有引號的字符串。 同樣的，如果一個沒有引號的字符串被添加了一個有引號的字符串 （沒有引號的字符串在 + 符號左側）， 結果將是一個沒有引號的字符串。 例如：
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
編譯出來的 CSS：
p:before {
content: "Foo Bar";
font-family: sans-serif; }