发表于

ES6: ECMAScript6
什么是ECMA?
ECMA是标准,js是实现
类似 HTML5是标准, IE10, chrome, FF都是实现
换句话说, 将来也有可能其他 xxxScript来实现ECMA

阅读全文 »

发表于

什么是sass

sass 与 css

css并不能算是一门真正意义上的”编程语言”,无法完成嵌套、继承、设置变量等工作.解决css的不足,开发者想到了填写一种对css进行预处理的”中间语言”.

sass 与 .scss

什么是Compass

Sass 与 Compass

Sass 与 Compass 能做什么
Sass 与 Compass 的安装

发表于

字符串函数

escape()函数: 将输入字符串中的url特殊字符进行编码处理

e()函数: css转义,用~符号代替.

%()函数: 函数 %(string,argument…) 格式化一个字符串.

replace()函数: 用另一个字符串替换文本

长度函数

数学函数

ceil():向上取整

floor():向下取整

percentage():将浮点数转换为百分比

round():取整和四舍五入

abs()

发表于

less循环

在less中,混合可以调用自身,这样,当一个混合递归调用自己,再结合Guard表达式和模式匹配这两个特性,就可以写出循环结构.

发表于

less条件表达

带条件的混合

比较运算符: > , >= , = , =< , true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- less -->
.mixin (@a) when (lightness(@a) >= 50%) {   //255/2=127.5
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.class1 { .mixin(#7e7e7e) }  //221  > 127.5  >50%  background-color: black;  7e7
.class2 { .mixin(#808080) }  //85 <127.5  <50%   background-color: white;  80808
<!-- css -->
.class1 {
  background-color: white;
  color: #7e7e7e;
}
.class2 {
  background-color: black;
  color: #808080;
}

类型检查函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- less -->
//iscolor,isnumber.....判断值得类型
.mixin (@a) when (iscolor(@a)) {   //255/2=127.5
  background-color: black;
}
.mixin (@a) when (isnumber(@a) ) {
  background-color: white;
  shuzi:shuzi;
}
.mixin (@a) {
  color: @a;
}
.class1 { .mixin(#7e7e7e) }  //background-color: black;
.class2 { .mixin(123) }  //background-color: white;
<!-- css -->
.class1 {
  background-color: black;
  color: #7e7e7e;
}
.class2 {
  background-color: white;
  shuzi: shuzi;
  color: 123;
}

单位检查函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- less -->
//ispixel,ispercentage.....单位检查函数
.mixin (@a) when (ispixel(@a)) {
  background-color: black;
}
.mixin (@a) when (ispercentage(@a) ) {
  background-color: white;
}
.mixin (@a) {
  width: @a;
}
.class1 { .mixin(960px) }  //background-color: black; width:960px
.class2 { .mixin(95%) }    //background-color: white;width:95%
<!-- css -->
.class1 {
  background-color: black;
  width: 960px;
}
.class2 {
  background-color: white;
  width: 95%;
}