CSS外掛：Sass 之運算（加、減、乘、除）

khs1994 發(fā)布于2019-08-30 12:53 / 2119人閱讀

摘要：例如被編譯為最后一個栗子字符運算運算符可以用來連接字符串被編譯為注意，如果有引號的字符串被添加了一個沒有引號的字符串也就是，帶引號的字符串在符號左側(cè)，結(jié)果會是一個有引號的字符串。

學(xué)習(xí)Sass無非就是想高效的、 面向?qū)ο缶帉慍SS，Sass中的Operations也是重要的一部分。
現(xiàn)在的前端各種工程化、模塊化、面向工資編程，哦...不對，是面向?qū)ο缶幊?。玩起來吧?/p>

1. 加減法

加減法不是重點，重點是在SassScript中用到的兩種單位之間的轉(zhuǎn)換；
絕對單位：px, pt, pc, in, mm, cm...絕對單位都能運算；
相對單位：ex, em, rem...相對當(dāng)前字體的都不能運算；

1.1 編譯報錯的栗子

SCSS：

$plus1: 100px + 20ex; //不能換算的編譯都會報錯;
$plus2: 100px + 20em;
$plus3: 100px + 20rem;
.plus{
    width: $plus1 + 10px; //在變量或?qū)傩灾芯勺黾訙p法運算;
}

編譯報錯：
Incompatible units: "ex" and "px".
Incompatible units: "em" and "px".
Incompatible units: "rem" and "px".

1.2 正常編譯的栗子

SCSS：

$minus1: 100px - 20; //第二個值可不帶單位；
$minus2: 100pt - 20px; //運算是從左到右，如第二個值的單位不同于第一個值的單位(pt)，
$minus3: 100px + 20cm; //將會對其進(jìn)行轉(zhuǎn)換(pt)后再運算；編譯出來的值的單位也是(pt);
$minus4: 100rem; //可以正常編譯輸出;
$minus5: 100rem + 10em; //報錯;--Incompatible units: "em" and "rem".);
.minus{
    width: $minus1;
    height: $minus1 + 30; //在屬性還可以繼續(xù)做運算；
    min-width: $minus2;
    min-height: $minus3;
    max-width: $minus4;
    max-height: $minus1 + $minus2;
}
//普遍情況下很少會搞兩個單位在那加加減減，閑得蛋疼，反正我不會，在這只是舉個栗子。

被編譯為：

.minus {
  width: 80px;
  height: 110px;
  min-width: 85pt;
  min-height: 855.90551px;
  max-width: 100rem;
  max-height: 193.33333px;
}

2. 乘法

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

SCSS：

.ride { width: 20px * 10px; }

編譯報錯：
20px*px isn"t a valid CSS value.

如果進(jìn)行乘法運算時，兩個值單位相同時，只需要為一個數(shù)值提供單位即可。改成：

SCSS：

.ride { width: 20px * 10; }

編譯輸出：

.ride { width: 200px; }

在乘法運算中如有不同類型的單位時，也將會報錯。

SCSS：

.ride { width: 20px * 10rem; }

編譯報錯：
200px*rem isn"t a valid CSS value.

2.1 結(jié)合#@for來個好玩的

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

SCSS：

$icon-list: down, up, file, hot;
@for $c from 1 through length($icon-list){
  .icon-#{nth($icon-list,$c)}{
      background-position: 0 -30px * $c;
  }
}

被編譯為：

.icon-down {
  background-position: 0 -30px;
}
.icon-up {
  background-position: 0 -60px;
}
.icon-file {
  background-position: 0 -90px;
}
.icon-hot {
  background-position: 0 -120px;
}

3. 除法

CSS 允許 / 出現(xiàn)在屬性值里，作為分隔數(shù)字的一種方法。 既然 SassScript 是 CSS 屬性語法的擴(kuò)展， 他就必須支持這種語法，同時也允許 / 用在除法運算上。 也就是說，默認(rèn)情況下，在 SassScript 里用 / 分隔的兩個數(shù)字， 都會在 CSS 中原封不動的輸出。

SCSS：

.main {
  font: 10px/8px;             // 純 CSS，不是除法運算
  $width: 100px;
  width: $width/2;            // 使用了變量，是除法運算
  width: round(1.5)/2;        // 使用了函數(shù)，是除法運算
  height: (500px/2);          // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算

  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height}; //純CSS中使用變量和 /， 可以用 #{} 包住變量；
}

被編譯為：

.main {
  font: 10px/8px;
  width: 50px;
  width: 1;
  height: 250px;
  margin-left: 9px;
  font: 12px/30px;
}

4. 來個栗子試試——顏色運算

所有算數(shù)運算都支持顏色值，并且是分段運算的。也就是說，紅、綠、藍(lán)各顏色分量會多帶帶進(jìn)行運算。例如：

.main-col{ color: #106021 + #023212; }

計算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09，
被編譯為：

.main-col { color: #129233; }

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

p { color: #010203 * 2; }

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

p { color: #020406; }

IE 濾鏡需要每個顏色都包含 alpha 層，并且得用 #AABBCCDD 這樣嚴(yán)格的格式。你可以輕松的利用 {Sass::Script::Functions#ie_hex_str ie_hex_str} 函數(shù)對其做轉(zhuǎn)換。例如：

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(
        enabled="false",
        startColorstr="#{ie-hex-str($green)}",
        endColorstr="#{ie-hex-str($translucent-red)}"
    );
}

被編譯為：

div {
  filter: progid:DXImageTransform.Microsoft.gradient(
    enabled="false",
    startColorstr=#FF00FF00,
    endColorstr=#80FF0000
    );
}

4. 最后一個栗子——字符運算

+ 運算符可以用來連接字符串：

p { cursor: e + -resize; }

被編譯為：

p { cursor: e-resize; }

注意，如果有引號的字符串被添加了一個沒有引號的字符串（也就是，帶引號的字符串在 + 符號左側(cè)），結(jié)果會是一個有引號的字符串。同樣的，如果一個沒有引號的字符串被添加了一個有引號的字符串（沒有引號的字符串在 + 符號左側(cè)），結(jié)果將是一個沒有引號的字符串。例如：

$c: "Hello" + " " + "Sass!";
.box:before {
    content: " #{$c} ";
}

被編譯為：

.box:before {
  content: " Hello Sass! ";
}

5. Reference API

SASS_REFERENCE — Sass Documentation #Operations

如有不正之處，歡迎指正。
學(xué)完整理整理，方便查閱。
更高級的用法還在后面...

云服務(wù)器 GPU云服務(wù)器 js十六進(jìn)制加減運算加減運算日期加減操作字符加減算法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115144.html

發(fā)表評論

登陸后可評論

0條評論

khs1994

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow下載安裝

閱讀 1322·2023-04-25 19:10
CK-GL16-AB傳感器|讀卡器在工業(yè)自動化AGV小車磁導(dǎo)航RFID定位領(lǐng)域應(yīng)用與解決方案

閱讀 1175·2021-09-10 10:50
程序員，職場上請遠(yuǎn)離這種人！

閱讀 3058·2021-09-02 15:21
CSS固定定位陷阱

閱讀 1417·2019-08-30 15:52
rem / Vender Prefix / CSS extensions

閱讀 1712·2019-08-30 13:56
CSS外掛：Sass 之運算（加、減、乘、除）

閱讀 2120·2019-08-30 12:53
前端webpack workflow（一）——Webpack入門

閱讀 1908·2019-08-28 18:22
javascript系列--正則表達(dá)式學(xué)習(xí)（二）位置匹配

閱讀 2155·2019-08-26 13:47

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

CSS外掛：Sass 之運算（加、減、乘、除）

相關(guān)文章

《JavaScript 闖關(guān)記》之表達(dá)式和運算符

**前端入門23-CSS預(yù)處理器（Less&Sass）**

JS基礎(chǔ)學(xué)習(xí)03「表達(dá)式和運算符」

使用BigDecimal進(jìn)行精確運算

拯救你丟失的精度——BigInteger和BigDecimal類(入門)

發(fā)表評論

0條評論

khs1994

男|高級講師

TA的文章

tensorflow下載安裝

CK-GL16-AB傳感器|讀卡器在工業(yè)自動化AGV小車磁導(dǎo)航RFID定位領(lǐng)域應(yīng)用與解決方案

程序員，職場上請遠(yuǎn)離這種人！

CSS固定定位陷阱

rem / Vender Prefix / CSS extensions