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 - ; //第二个值可不带单位;
$minus2: 100pt - 20px; //运算是从左到右,如第二个值的单位不同于第一个值的单位(pt),
$minus3: 100px + 20cm; //将会对其进行转换(pt)后再运算;编译出来的值的单位也是(pt);
$minus4: 100rem; //可以正常编译输出;
$minus5: 100rem + 10em; //报错;--Incompatible units: 'em' and 'rem'.);
.minus{
width: $minus1;
height: $minus1 + ; //在属性还可以继续做运算;
min-width: $minus2;
min-height: $minus3;
max-width: $minus4;
max-height: $minus1 + $minus2;
}

//普遍情况下很少会搞两个单位在那加加减减,闲得蛋疼,反正我不会,在这只是举个栗子。

被编译为:

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

2. 乘法

SassScript中的乘法运算和加减法运算还略有不同。虽然他也能够支持多种单位(比如 em ,px , %),但当一个单位同时声明两个值时会有问题。比如下面的示例:

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

编译报错:

 20px*px isn't a valid CSS value.

如果进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可。改成:

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


编译输出:
 .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 through length($icon-list){
.icon-#{nth($icon-list,$c)}{
background-position: -30px * $c;
}
}

被编译为:

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

3. 除法

CSS 允许 / 出现在属性值里,作为分隔数字的一种方法。 既然 SassScript 是 CSS 属性语法的扩展, 他就必须支持这种语法,同时也允许 / 用在除法运算上。 也就是说,默认情况下,在 SassScript 里用 / 分隔的两个数字, 都会在 CSS 中原封不动的输出。

SCSS:

 .main {
font: 10px/8px; // 纯 CSS,不是除法运算
$width: 100px;
width: $width/; // 使用了变量,是除法运算
width: round(1.5)/; // 使用了函数,是除法运算
height: (500px/); // 使用了圆括号,是除法运算
margin-left: 5px + 8px/2px; // 使用了加(+)号,是除法运算 $font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height}; //纯CSS中使用变量和 /, 可以用 #{} 包住变量;
}

被编译为:

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

4. 来个栗子试试——颜色运算

所有算数运算都支持颜色值, 并且是分段运算的。 也就是说,红、绿、蓝各颜色分量会单独进行运算。例如:

 .main-col{ color: # + #; }
计算公式为 + = 、 + = 和 + = ,
被编译为: .main-col { color: #; }

算数运算也能将数字和颜色值一起运算,同样也是分段运算的。 例如:

 p { color: # * ; }
计算公式为 * = 、 * = 和 * = ,
被编译为: p { color: #; }

IE 滤镜需要每个颜色都包含 alpha 层, 并且得用 #AABBCCDD 这样严格的格式。你可以轻松的利用 {Sass::Script::Functions#ie_hex_str ie_hex_str} 函数对其做转换。 例如:

 $translucent-red: rgba(, , , 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! ";
}

CSS之运算,Sass 之运算(加、减、乘、除)的更多相关文章

  1. js实现文本框支持加减运算的方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/T ...

  2. velocity加减运算注意格式 ,加减号的左右都要有空格

    velocity加减运算注意格式 ,加减号的左右都要有空格 #set( $left= $!biz.value - $vMUtils.getReturnMoney($!biz.billBuy) )

  3. [Swift]LeetCode592. 分数加减运算 | Fraction Addition and Subtraction

    Given a string representing an expression of fraction addition and subtraction, you need to return t ...

  4. C语言中指针变量的加减运算

    1.指针变量中存放的是地址值,也就是一个数字地址,例如某指针变量中的值是0x20000000,表示表示此指针变量存放的是内存中位于0x20000000地方的内存地址.指针变量可以加减,但是只能与整型数 ...

  5. 大整数加减运算的C语言实现

    目录 大整数加减运算的C语言实现 一. 问题提出 二. 代码实现 三. 效果验证 大整数加减运算的C语言实现 标签: 大整数加减 C 一. 问题提出 培训老师给出一个题目:用C语言实现一个大整数计算器 ...

  6. Linux中日期的加减运算

    Linux中日期的加减运算 目录 在显示方面 在设定时间方面 时间的加减 正文 date命令本身提供了日期的加减运算. date 可以用来显示或设定系统的日期与时间. 回到顶部 在显示方面 使用者可以 ...

  7. void *指针的加减运算

    1.手工写了一个程序验证void *指针加减运算移动几个字节: //本程序验证空类型指针减1移动几个字节 #include <stdio.h> int main(int argc, cha ...

  8. Oracle 日期加减运算

    -- Start 我们都知道数字可以进行加.减.乘.除等运算.那么,日期可不可以呢?答案是,日期只能进行加.减运算. 在开始操作日期之前,我们先了解一下 Oracle 支持哪些日期数据类型,如下所示: ...

  9. Leetcode 592.分数加减运算

    分数加减运算 给定一个表示分数加减运算表达式的字符串,你需要返回一个字符串形式的计算结果. 这个结果应该是不可约分的分数,即最简分数. 如果最终结果是一个整数,例如 2,你需要将它转换成分数形式,其分 ...

随机推荐

  1. LeetCode-求最长回文子序列

    题目:给定一个字符串,求它的最长回文子串 /*求最长回文子串,以当前字符为中心,向两边同时拓展*/ string longestPalindrome(string s) { int len = s.l ...

  2. Eclipse 新建.jsp页面后,页面头部标签报错的解决方法

    Eclipse 新建.jsp页面后,页面头部标签报错的解决方法 1.报错地方: 2.解决方法: .jsp页面右键==>BUild Path ==>Configure Build Path. ...

  3. HYSBZ 1797 Mincut 最小割

    Descrption A,B两个国家正在交战,其中A国的物资运输网中有N个中转站,M条单向道路.设其中第i (1≤i≤M)条道路连接了vi,ui两个中转站,那么中转站vi可以通过该道路到达ui中转站, ...

  4. nigx下配置tp5.1路由

    打开宝塔面板,找到你要配置路由的网站并找到配置文件(如图1) (图1) 2.在配置文件里添加一下代码 set $root = /www/wwwroot/www.blogs.test/public; # ...

  5. 小白基础Python重要的字符串详解String的内置方法

    String的内置方法: st='hello world  {name} is {age}'  {}  特殊内容需要识别format print(st.count('1')) 统计元素个数 print ...

  6. 引入DDT

    一.大致介绍: DDT-Data Driven Test 是Python的第三方库,提供了创建数据驱动的测试,在线安装为:pip install ddt @data 表示元祖的列表数据 @unpack ...

  7. 使用Jsoup爬取网站图片

    package com.test.pic.crawler; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  8. Js中toFixed()方法保留小数不精准的问题

    toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 问题:部分特殊数值使用toFixed() 方法会出现转换不正确的情况,举个例子: (3329.225).toFixed(2) ...

  9. 07-django项目连接远程mysql数据库

    比如电脑a(ip地址为192.168.0.aaa)想要连接访问电脑b(ip地址为192.168.0.bbb)的数据库: 对电脑a(ip地址为192.168.0.aaa): 在项目settings.py ...

  10. ECharts模拟百度迁徙实例

    本实例原始信息: 作者:anix 演示地址:Echarts模拟迁徙 源码地址:GitHub-ananix-qianxi 前言 "百度地图春节人口迁徙大数据"(简称"百度迁 ...