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

khs1994 發布于2019-08-30 12:53 / 2076人閱讀

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

學習Sass無非就是想高效的、面向對象編寫CSS，Sass中的Operations也是重要的一部分。
現在的前端各種工程化、模塊化、面向工資編程，哦...不對，是面向對象編程。玩起來吧！

1. 加減法

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

1.1 編譯報錯的栗子

SCSS：

$plus1: 100px + 20ex; //不能換算的編譯都會報錯;
$plus2: 100px + 20em;
$plus3: 100px + 20rem;
.plus{
    width: $plus1 + 10px; //在變量或屬性中均可做加減法運算;
}

編譯報錯：
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; //將會對其進行轉換(pt)后再運算；編譯出來的值的單位也是(pt);
$minus4: 100rem; //可以正常編譯輸出;
$minus5: 100rem + 10em; //報錯;--Incompatible units: "em" and "rem".);
.minus{
    width: $minus1;
    height: $minus1 + 30; //在屬性還可以繼續做運算；
    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 , %），但當一個單位同時聲明兩個值時會有問題。比如下面的示例：

SCSS：

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

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

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

SCSS：

.ride { width: 20px * 10; }

編譯輸出：

.ride { width: 200px; }

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

SCSS：

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

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

2.1 結合#@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 允許 / 出現在屬性值里，作為分隔數字的一種方法。既然 SassScript 是 CSS 屬性語法的擴展，他就必須支持這種語法，同時也允許 / 用在除法運算上。也就是說，默認情況下，在 SassScript 里用 / 分隔的兩個數字，都會在 CSS 中原封不動的輸出。

SCSS：

.main {
  font: 10px/8px;             // 純 CSS，不是除法運算
  $width: 100px;
  width: $width/2;            // 使用了變量，是除法運算
  width: round(1.5)/2;        // 使用了函數，是除法運算
  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. 來個栗子試試——顏色運算

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

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

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

.main-col { color: #129233; }

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

p { color: #010203 * 2; }

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

p { color: #020406; }

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

$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: "Hello" + " " + "Sass!";
.box:before {
    content: " #{$c} ";
}

被編譯為：

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

5. Reference API

SASS_REFERENCE — Sass Documentation #Operations

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

云服務器 GPU云服務器 js十六進制加減運算加減運算日期加減操作字符加減算法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115144.html

《JavaScript 闖關記》之表達式和運算符

摘要：函數定義表達式。對象創建表達式。也就是說，空字符串將被當作，布爾值將被當作。如果有一個操作數是對象數值或布爾值，則調用它們的方法取得相應的字符串值，然后再應用前面關于字符串的規則。對于和，則分別調用函數并取得字符串和。表達式表達式是由數字、運算符、數字分組符號（如括號）、自由變量和約束變量等以能求得數值的有意義排列方法所得的組合。JavaScript 表達式主要有以下幾種形式： ...

Render 2019-08-20 10:26 評論0 收藏0
前端入門23-CSS預處理器（Less&Sass）

摘要：聲明聲明本篇內容梳理自以下幾個來源網站的文檔中文網感謝大佬們的分享。這個時候，預處理器就出現了，其實應該是說和這類語言出現了。聲明本篇內容梳理自以下幾個來源： Github:smyhvae/web Bootstrap網站的 less 文檔 Sass中文網感謝大佬們的分享。正文-CSS預處理（less&Sass） CSS預處理什么是 CSS 預處理？為什么要有 CSS 預處理？這...

freecode 2019-04-23 13:07 評論0 收藏0
JS基礎學習03「表達式和運算符」

摘要：函數定義表達式。對象創建表達式。需要注意的是，大多數運算符都是由標點符號表示的，比如和。也就是說，空字符串將被當作，布爾值將被當作。對于和，則分別調用函數并取得字符串和。表達式表達式是由數字、運算符、數字分組符號（如括號）、自由變量和約束變量等以能求得數值的有意義排列方法所得的組合。JavaScript 表達式主要有以下幾種形式：原始表達式：常量、變量、保留字。對象、數組初始...

dcr309duan 2019-08-26 10:59 評論0 收藏0
使用BigDecimal進行精確運算

摘要：浮點數沒有辦法是用二進制進行精確表示。我們的表示浮點數由兩個部分組成指數和尾數，這樣的表示方法一般都會失去一定的精確度，有些浮點數運算也會產生一定的誤差。浮點數的值實際上是由一個特定的數學公式計算得到的。首先我們先來看如下代碼示例： public class Test_1 { public static void main(String[] args) { S...

AlphaGooo 2019-08-19 10:12 評論0 收藏0
拯救你丟失的精度——BigInteger和BigDecimal類(入門)

摘要：返回的是是一個整數的最小值。筆記這個構造函數的結果可能有些不可預測。這是因為不能像或者作為任何有限長度的二進制分數精確地表示。當必須用作源為，注意，此構造提供了一個精確的轉換它不會將轉換為使用方法，然后使用構造函數相同的結果。第三階段 JAVA常見對象的學習 BigInteger和BigDecimal類 BigInteger類 (一) 構造方法： //針對超過整數范圍的運算(整數最大...

TerryCai 2019-08-19 11:45 評論0 收藏0