scss-算術運算符

　　由於scss具有編程語言的特點，那么運算符是必不可少的。

　　下面就通過代碼實例分別做一下介紹。

　　一.賦值運算符:

　　賦值運算符就是我們最為熟悉的冒號（:），用來給聲明的變量賦值。

　　代碼實例如下:

$highlight-color: #F90;

 

　　二.算數運算符:

　　在scss中，算數運算符包括加減乘程序和求余，分別用如下符號表示:

+、-、*、/和%

　　算數運算符只能夠用於相同單位的數值運算。

　　加法運算符的代碼實例:

div {
  /*單位不一致，編譯報錯*/
  font-size: 5px + 2em;
  /*7px，如果有一個操作數沒有單位，則默認使用另一個操作數的單位。*/
  font-size: 5px + 2;
}

　　乘法運算符的代碼實例:

div {
  font-size: 5px * 2;
  /*具有相同單位的數值相乘會報錯*/
  font-size: 5px * 2px;
}

　　除法運算符（/）需要特別注意一下，因為除法運算符本身也是css語法的一部分。

　　代碼實例如下:

font: 16px / 24px Arial sans-serif;

　　下面就來介紹一下在scss中，哪些情況會被認為是除法運算，哪些情況被認為是css原生語法。

　　代碼如下:

div {
  /*不執行除法操作，原樣輸出*/
  font-size: 16px / 24px; 
  /*使用插值語法之后，原樣輸出*/
  font-size: #{$base-size} / #{$line-height}; 
  /* 使用括號包裹之后，執行除法操作*/
  font-size: (16px / 24px); 
  /* 使用變量，執行除法操作*/
  font-size: $base-size / $line-height; 
  /* 調用函數，執行除法操作*/
  opacity: random(4) / 5; 
  /* 使用算術操作符，執行除法操作*/
  padding-right: 2px / 4px + 3px; 
}

　　scss中的算數運算符和普通算數運算符一樣，也具有優先級概念:

　　（1）.乘除法的優先級要高於加減法。

　　（2）.小括號中的運算具有最高優先級。