发表于 | 分类于

a) Sass 中的混合宏使用

清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。

个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”
image

发表于 | 分类于

ng事件中的this是 $scope ,而不是自己本身

ng-click=”shareGoods(,$event)” 传递一个$event对象
通过事件对象 ==$event.target== 获取事件源

发表于 | 分类于

之前在使用axios发现每次调用接口都会有两个请求，第一个请求时option请求，而且看不到请求参数，当时也没注意，只当做是做了一次预请求，判断接口是否通畅，但是最近发现并不是那么回事。

首先我们知道了额外的一次请求时option请求，那么这个是干嘛用的呢？

如果只是普通的 ajax 请求，也不会发起这个请求，==只有当 ajax 请求绑定了 upload 的事件并且跨域的时候==，就会自动发起这个请求。详细看http://www.tuicool.com/articles/3UBzIbb。

这样就明了了，就是我们有upload事件绑定（一般都是本地调试，所以会有跨域），我仔细看了下axios文档，发现config配置文件中有两个参数

1
2
3
4
5
6
7
8
// onUploadProgress: function(progressEvent) {
    //     // Do whatever you want with the native progress event
    // },


 // onDownloadProgress: function(progressEvent) {
 //     // Do whatever you want with the native progress event
 // },

分别处理上传和下载事件，也就是这里绑定了upload事件，所以每次请求都会有个option请求。

解决方案很简单，直接注释掉就好了，当然如果开发的工程上线使用跟请求的接口是同一个域名下自然不会两次请求。都看个人需求吧，关于axios的使用上一篇博文有介绍

解决办法-后端cors

1
2
3
4
5
6
7
8
header('Access-Control-Allow-Methods:OPTIONS, GET, POST');
header('Access-Control-Allow-Headers:x-requested-with');
header('Access-Control-Max-Age:86400');  
header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Credentials:true');
header('Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
header('Access-Control-Allow-Headers:Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With');

发表于 | 分类于

使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子：

1
2
3
4
5
6
7
8
9
$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

@each…in…语句会在《Sass进级篇》中 1-6 @each循环 中讲解。

它可以让变量和属性工作的很完美，上面的代码编译成 CSS：

1
2
3
4
.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

这是 Sass 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：

1
2
3
4
5
6
@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

编译出来的 CSS:

1
2
3
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

发表于 | 分类于

注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式，我暂且将其命名为：

1、类似 CSS 的注释方式，使用 ”/ ”开头，结属使用 ”/ ”
2、类似 JavaScript 的注释方式，使用“//”

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示

发表于 | 分类于

package.json中找到 scripts.dev，在后面加上host参数 –host 0.0.0.0

1
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

发表于 | 分类于

Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：

  • 数字: 如，1、 2、 13、 10px；
  • 字符串：有引号字符串或无引号字符串，如，”foo”、 ‘bar’、 baz；
  • 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
  • 布尔型：如，true、 false；
  • 空值：如，null；
  • 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。

字符串

SassScript 支持 CSS 的两种字符串类型：

  • 有引号字符串 (quoted strings)，如 “Lucida Grande” 、’http://sass-lang.com'；
  • 无引号字符串 (unquoted strings)，如 sans-serifbold。

在编译 CSS 文件时不会改变其类型。++只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串++，这样方便了在混合指令 (mixin) 中引用选择器名。

值列表

所谓值列表 (lists) 是指 Sass 如何处理 CSS 中： 

1
margin: 10px 15px 0 0

或者： 

1
font-face: Helvetica, Arial, sans-serif

像上面这样通过空格或者逗号分隔的一系列的值。

Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）：

  1. nth函数（nth function） 可以直接访问值列表中的某一项；
  2. join函数（join function） 可以将多个值列表连结在一起；
  3. append函数（append function） 可以在值列表中添加值；
  4. @each规则（@each rule）则能够给值列表中的每个项目添加样式。

值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。

如果内外两层值列表使用相同的分隔方式，要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时，Sass 不会添加任何圆括号，因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表。

可以用 () 表示空的列表，这样不可以直接编译成 CSS，比如编译 font-family: ()时，Sass 将会报错。如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。

发表于 | 分类于

程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算，在接下来的章节中，主要和大家一起探讨有关于 Sass 中的数学运算。

加法

加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：

1
2
3
.box {
  width: 20px + 8in;
}

编译出来的 CSS:

1
2
3
.box {
  width: 788px;
}

但对于携带==不同类型的单位==时，在 Sass 中计算会==报错==，如下例所示：

1
2
3
.box {
  width: 20px + 1em;
}

编译的时候，编译器会报错：

1
“Incompatible units: 'em' and ‘px'.”

减法

Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：

1
2
3
4
5
6
$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}

编译出来的 CSS 如下：

1
2
3
.content {
  width: 760px;
}

同样的，运算时碰到不同类型的单位时，编译也会报错，如：

1
2
3
4
5
$full-width: 960px;

.content {
  width: $full-width -  1em;
}

编译的时候，编译器报“Incompatible units: ‘em’ and ‘px’.”错误。

乘法

Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：

1
2
3
.box {
  width:10px * 2px;  
}

编译的时候报“20px*px isn’t a valid CSS value.”错误信息。

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：

1
2
3
.box {
  width: 10px * 2;
}

编译出来的 CSS:

1
2
3
.box {
  width: 20px;
}

Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。如下面的示例：

1
2
3
.box {
  width: 20px * 2em;
}

编译时报“40em*px isn’t a valid CSS value.”错误信息。

除法

添加一个小括号( )

1
2
3
.box {
  width: (100px / 2);  
}

编译出来的 CSS 如下：

1
2
3
.box {
  width: 50px;
}

除了上面情况带有小括号，“/”符号会当作除法运算符之外，如果“/”符号在已有的数学表达式中时，也会被认作除法符号。
如下面示例：

1
2
3
.box {
  width: 100px / 2 + 2in;  
}

编译出来的CSS：

1
2
3
.box {
  width: 242px;
}

另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示：

1
2
3
4
5
6
7
8
9
10
$width: 1000px;
$nums: 10;

.item {
  width: $width / 10;  
}

.list {
  width: $width / $nums;
}

编译出来的CSS:

1
2
3
4
5
6
7
.item {
  width: 100px;
}

.list {
  width: 100px;
}

综合上述，”/ ”符号被当作除法运算符时有以下几种情况：

  • 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
  • 如果数值被圆括号包围。
  • 如果数值是另一个数学表达式的一部分。

Sass 的除法运算还有一个情况。我们先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：

1
2
3
.box {
  width: (1000px / 100px);
}

编译出来的CSS如下：

1
2
3
.box {
  width: 10;
}

变量计算

在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算，其实在前面章节的示例中也或多或少的向大家展示了。在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。一起来看一个简单的示例：

1
2
3
4
5
6
7
8
$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container {
  width: $content-width + $sidebar-width + $gutter;
  margin: 0 auto;
}

编译出来的CSS

1
2
3
4
.container {
  width: 960px;
  margin: 0 auto;
}

数字运算

在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，一起来看个示例。

1
2
3
.box {
  width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

编译出来的 CSS:

1
2
3
.box {
  width: 60px;
}

上面这个简单示例是一个典型的计算 Grid 单列列宽的运算。

颜色运算

所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：

1
2
3
p {
  color: #010203 + #040506;
}

如此编译出来的 CSS 为：

1
2
3
p {
  color: #050709;
}

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

1
2
3
p {
  color: #010203 * 2;
}

计算公式为 01 2 = 02、02 2 = 04 和 03 * 2 = 06， 并且被合成为：

1
2
3
p {
  color: #020406;
}

字符运算

==在 Sass 中可以通过加法符号“+”来对字符串进行连接==。例如：

1
2
3
4
$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

编译出来的CSS：

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

除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：

1
2
3
div {
  cursor: e + -resize;
}

编译出来的CSS:

1
2
3
div {
  cursor: e-resize;
}

注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：

1
2
3
4
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译出来的 CSS：

1
2
3
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

发表于 | 分类于

@if 指令

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else… 来判断传进参数的值来控制 display 的值。如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

编译出来的CSS:

1
2
3
4
5
6
7
.block {
  display: block;
}

.hidden {
  display: none;
}

for循环

在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：

1
2
@for $i from <start> through <end>
@for $i from <start> to <end>
  • $i 表示变量
  • start 表示起始值
  • end 表示结束值

这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

while循环

@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。

这里有一个 @while 指令的简单用例：

1
2
3
4
5
6
7
8
9
10
//SCSS
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

编译出来的 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.while-4 {
  width: 24px;
}

.while-3 {
  width: 23px;
}

.while-2 {
  width: 22px;
}

.while-1 {
  width: 21px;
}

@each循环

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。

@each 循环指令的形式：

1
@each $var in <list>

如果你没有接触过列表，也不要紧，他也非常简单。

在下面的例子中你可以看到，$var 就是一个变量名， 是一个 SassScript 表达式，他将返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。

1
2
3
4
5
6
7
8
9
10
11
12
13
$list: adam john wynn mason kuroir;//$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

编译出 CSS:

1
2
3
4
5
6
7
8
9
10
.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

发表于 | 分类于

Sass的函数简介

在 Sass 中除了可以定义变量，具有 @extend、%placeholder 和 mixins 等特性之外，还自备了一系列的函数功能。其主要包括：

  • 字符串函数
  • 数字函数
  • 列表函数
  • 颜色函数
  • Introspection 函数
  • 三元函数等

当然除了自备的函数功能之外，我们还可以根据自己的需求定义函数功能，常常称之为自定义函数。

下面将给大家详细介绍前 4 种最常用的函数。

字符串函数-unquote()函数

字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：

  • unquote($string)：删除字符串中的引号；
  • quote($string)：给字符串添加引号。

1、unquote()函数

unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//SCSS
.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

编译后的 css 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//CSS
.test1 {
  content: Hello Sass!; }

.test2 {
  content: 'Hello Sass!; }

.test3 {
  content: I'm Web Designer; }

.test4 {
  content: 'Hello Sass!'; }

.test5 {
  content: "Hello Sass!"; }

.test6 {
  content: Hello Sass; }

注意：从测试的效果中可以看出，unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。

字符串函数-quote()函数

quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 “”。如：

1
2
3
4
5
6
7
8
9
10
11
12
13
//SCSS
.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}

编译出来的 css 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
//CSS
.test1 {
  content: "Hello Sass!";
}
.test2 {
  content: "Hello Sass!";
}
.test3 {
  content: "ImWebDesigner";
}
.test4 {
  content: "";
}

使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

1
2
3
.test1 {
    content:  quote(Hello Sass);
}

这样使用，编译器马上会报错：

1
error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')

解决方案就是去掉空格，或者加上引号：

1
2
3
4
5
6
.test1 {
    content:  quote(HelloSass);
}
.test1 {
    content:  quote("Hello Sass");
}

同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：

1
2
error style.scss (Line 13: Invalid CSS after "...quote(HelloSass": expected ")", was "!);")
error style.scss (Line 16: Invalid CSS after "...t:  quote(Hello": expected ")", was “?);")

字符串函数-To-upper-case()、To-lower-case()

1、To-upper-case()

To-upper-case() 函数将字符串小写字母转换成大写字母。如：

1
2
3
4
5
//SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}

编译出来的 css 代码：

1
2
3
4
5
//CSS
.test {
  text: AAAAA;
  text: AA-AAAA-AAA;
}

2、To-lower-case()

To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母：

1
2
3
4
5
//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

编译出来的 css 代码：

1
2
3
4
5
//CSS
.test {
  text: aaaaa;
  text: aa-aaaa-aaa;
}

数字函数简介

Sass 中的数字函数提要针对数字方面提供一系列的函数功能：

  • percentage($value)：将一个不带单位的数转换成百分比值；
  • round($value)：将数值四舍五入，转换成一个最接近的整数；
  • ceil($value)：将大于自己的小数转换成下一位整数；
  • floor($value)：将一个数去除他的小数部分；
  • abs($value)：返回一个数的绝对值；
  • min($numbers…)：找出几个数值之间的最小值；
  • max($numbers…)：找出几个数值之间的最大值；
  • random(): 获取随机数

看到上面函数的简介，对于熟悉Javascript 同学而言并不会感觉陌生。因为他们有很多功能都非常类似，接下来对每个函数进行一些简单的测试 。

数字函数-percentage()

percentage()函数主要是将一个不带单位的数字转换成百分比形式：

1
2
3
4
5
6
7
>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%
>>
1
2
3
.footer{
    width : percentage(.2)
}

编译后的 css 代码：

1
2
3
.footer{
    width : 20%
}

如果您转换的值是一个带有单位的值，那么在编译的时候会报错误信息：

1
2
>> percentage(2px / 10em)
SyntaxError: $value: 0.2px/em is not a unitless number for `percentage'

数字函数-round()函数

round() 函数可以将一个数四舍五入为一个最接近的整数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
>> round(12.3)
12
>> round(12.5)
13
>> round(1.49999)
1
>> round(2.0)
2
>> round(20%)
20%
>> round(2.2%)
2%
>> round(3.9em)
4em
>> round(2.3px)
2px
>> round(2px / 3px)
1
>> round(1px / 3px)
0
>> round(3px / 2em)
2px/em
1
2
3
.footer {
   width:round(12.3px)
}

编译后的 css 代码：

1
2
3
.footer {
  width: 12px;
}

在round() 函数中可以携带单位的任何数值。

数字函数-ceil()函数

ceil() 函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身 1 的整数。也就是只做入，不做舍的计算：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
>> ceil(2.0)
2
>> ceil(2.1)
3
>> ceil(2.6)
3
>> ceil(2.3%)
3%
>> ceil(2.3px)
3px
>> ceil(2.5px)
3px
>> ceil(2px / 3px)
1
>> ceil(2% / 3px)
1%/px
>> ceil(1em / 5px)
1em/px
1
2
3
.footer {
   width:ceil(12.3px);
}

编译后的 css 代码：

1
2
3
.footer {
  width: 13px;
}

数字函数-floor()函数

1
2
3
.footer {
   width:floor(12.3px);
}

编译后的 css 代码：

1
2
3
.footer {
  width: 12px;
}

数字函数-abs()函数

1
2
3
.footer {
   width:abs(-12.3px);
}

编译后的 css 代码：

1
2
3
.footer {
  width: 12.3px;
}

数字函数-min()函数、max()函数

min()函数

min() 函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数：

1
2
3
4
5
6
>> min(1,2,1%,3,300%)
1%
>> min(1px,2,3px)
1px
>> min(1em,2em,6em)
1em

不过在 min() 函数中同时出现两种不同类型的单位，将会报错误信息：

1
2
>> min(1px,1em)
SyntaxError: Incompatible units: 'em' and 'px'.

max()函数

max() 函数和 min() 函数一样，不同的是，max() 函数用来获取一系列数中的最大那个值：

1
2
3
4
>> max(1,5)
5
>> max(1px,5px)
5px

同样的，如果在 max() 函数中有不同单位，将会报错：

1
2
>> max(1,3px,5%,6)
SyntaxError: Incompatible units: '%' and ‘px'.

数字函数-random()函数

random() 函数是用来获取一个随机数：

1
2
3
4
5
6
7
8
9
10
>> random()
0.03886
>> random()
0.66527
>> random()
0.8125
>> random()
0.26839
>> random()
0.85063