CSS之運算，Sass 之運算（加 減 乘 除）

加減法不是重點，重點是在sassscript中用到的兩種單位之間的轉換；

絕對單位：px, pt, pc, in, mm, cm...絕對單位都能運算；

相對單位：ex, em, rem...相對當前字型的都不能運算；

scss：

1 $plus1: 100px + 20ex; //

不能換算的編譯都會報錯;
2 $plus2: 100px +20em;
3 $plus3: 100px +20rem;
4.plus
7編譯報錯：
8 incompatible units: '
ex' and 'px'
.9 incompatible units: '
em' and 'px'
.10 incompatible units: '
rem' and '
px'.

1.2 正常編譯的栗子

scss：

1 $minus1: 100px - 20; //

第二個值可不帶單位；
2 $minus2: 100pt - 20px; //
運算是從左到右，如第二個值的單位不同於第乙個值的單位(pt)，
3 $minus3: 100px + 20cm; //
將會對其進行轉換(pt)後再運算；編譯出來的值的單位也是(pt);
4 $minus4: 100rem; //
可以正常編譯輸出;
5 $minus5: 100rem + 10em; //
報錯;--incompatible units: 'em' and 'rem'.);
6.minus

//普遍情況下很少會搞兩個單位在那加加減減，閒得蛋疼，反正我不會，在這只是舉個栗子。

1

.minus

sassscript中的乘法運算和加減法運算還略有不同。雖然他也能夠支援多種單位（比如 em ,px , %），但當乙個單位同時宣告兩個值時會有問題。比如下面的示例：

scss：

1 .ride

1 20px*px isn'

t a valid css value.

如果進行乘法運算時，兩個值單位相同時，只需要為乙個數值提供單位即可。改成：

scss：

1 .ride

編譯輸出：

1 .ride

scss：

1 .ride

1 200px*rem isn'

t a valid css value.

雪碧圖一般都用compass的@import "compass/utilities/sprites";來玩

1 $icon-list: down, up, file, hot;

2 @for $c from
1 through length($icon-list)
6 }

被編譯為：

1 .icon-down 

4 .icon-up 
7 .icon-file 
10 .icon-hot

css 允許 / 出現在屬性值裡，作為分隔數字的一種方法。 既然 sassscript 是 css 屬性語法的擴充套件， 他就必須支援這種語法，同時也允許 / 用在除法運算上。 也就是說，預設情況下，在 sassscript 裡用 / 分隔的兩個數字， 都會在 css 中原封不動的輸出。

1

.main /#; //
純css中使用變數和 /， 可以用 #{} 包住變數；
12 }

被編譯為：

1

.main

所有算數運算都支援顏色值， 並且是分段運算的。 也就是說，紅、綠、藍各顏色分量會單獨進行運算。例如：

1 .main-col

2 計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09，3
被編譯為：
45 .main-col

算數運算也能將數字和顏色值一起運算，同樣也是分段運算的。 例如：

1 p 

2 計算公式為 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06，3
被編譯為：
45 p

ie 濾鏡需要每個顏色都包含 alpha 層， 並且得用#aabbccdd這樣嚴格的格式。你可以輕鬆的利用函式對其做轉換。 例如：

1 $translucent-red: rgba(255, 0, 0, 0.5);2

$green: #00ff00;
3div ',
7         endcolorstr='#'
8);9}
10被編譯為：
1112
div

1 +運算子可以用來連線字串：

23 p 
4被編譯為：
56 p 
7 注意，如果有引號的字串被新增了乙個沒有引號的字串 （也就是，帶引號的字串在 + 符號左側）， 結果會是乙個有引號的字串。 同樣的，如果乙個沒有引號的字串被新增了乙個有引號的字串 （沒有引號的字串在 +符號左側）， 結果將是乙個沒有引號的字串。 例如：
89 $c: "
hello
" + "
" + "
sass!";
10.box:before  ";
12}13被編譯為：
1415
.box:before

加減運算 數學啟蒙之加減運算（1）

前 期 鋪 墊關於數學的啟蒙，我一直堅持生活 遊戲中完成。皓皓在前幾個月的時候 5歲3個月 能夠口算完成三位數以內的加法。減法滲透得晚，不是很熟練。我沒有給他講過位數，更沒有講過進製這種專業的詞彙。他自己就明白了進製，悟出來了個位加個位，百位加百位，千位加千位。這離不開前期的鋪墊。理解 加 減 的含...

大數運算之加減乘除

我們都知道計算機能夠儲存的各種型別數的大小是有限的，比如int型在32位的情況下範圍是從 2 31 2 31 1，那麼如果我們要計算的數非常的大，我們該如何做呢？那樣便需要運用到大數運算。大數運算本質上來說是模仿人們進行筆算時的操作，將人們筆算時的操作通過 來實現，從而達到實現大數執行的結果。c 如...

Sass字元運算

在 sass 中可以通過加法符號 來對字串進行連線。例如 content hello sass box before 編譯出來的css box before 除了在變數中做字元連線運算之外，還可以直接通過 把字元連線在一起 div 編譯出來的css div 注意，如果有引號的字串被新增了乙個沒有引號...