CSS外挂：Sass 之运算（加、减、乘、除）

khs1994 发布于2019-08-30 12:53 / 2051人阅读

摘要：例如被编译为最后一个栗子字符运算运算符可以用来连接字符串被编译为注意，如果有引号的字符串被添加了一个没有引号的字符串也就是，带引号的字符串在符号左侧，结果会是一个有引号的字符串。

学习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十六进制加减运算加减运算日期加减操作字符加减算法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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