css-扩展

sass:

为什么要使用sass((css预处理器): scss是和css语法完全兼容的。

1. 可以使用变量，类似于编程。

2. 可以自动转换RGBA颜色值。

3. 嵌套规则。

4. media query更简单。

5. 自动压缩css.

用法：变量：

$blue:#3bbfce;

$margin:16px; 

.container{ border-color:$blue; color:darken($blue,9%); } 

.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; }

 

 

less:

变量： @var     

作为属性名和选择器使用：.@{} 例如：@len: width; .@{len}{@{len}: 100px}，及时选择器又是属性名

作为url使用：用“”包裹起来，同样将变量以@{}的形式用。例如：@imgurl: 'ww...';  .imgr{ background: url("@{imgurl}")

延迟加载：不一定要先定义变量名，才能使用，也可以先使用，后定义变量名

定义多个相同名称的变量名：会在当前作用域下向上寻找

混合：mixin(代码片段)： 例如：.cls {} ，.sub: {  font-size:12px;}，这种是带有输出类.cls的。如果不需要输出则需要在混入类后面加()即可。例如：.cls() {}

带有选择器的混合：&代表父级，注意： 如果放在选择器之后，会将当前元素插入到所有父选择器之前。

带有参数的混合,可以有默认值：.border(@color = red) { color: @color;}，带有多个参数用;号分割，尽量不要用,，可以解释为css列表分隔符和Mixins参数分割符；

混合带有返回值：例如：.arg(@val1,@val2){ @arg1:(@val+@val2)} 调用：div{.arg(1px,2px);padding:@arg1;}

嵌套规则：和posscss一致，但要注意& 

运算：优先级使用()区分，less在运算过程中先转化为rgb计算，完成计算后再转化为16进制返回。颜色计算过程中不能直接使用颜色名称，应该用rgb或16进制。

函数： 

命名空间： 提取代码

引入：@import '文件名'  注意：1.可以不要后缀 2. 引入的css会原样输出，不能混合使用，less是可以的（参数：@import () '.less'，reference(使用但不输出),inline（输出包含的原文件，但不操作），less(可以将css转为less使用），multiple（允许引入多次，但也会执行多次)）。

important: 再调用的混合集后追加!important关键字，可以使混合集里面的所有属性都继承important。

合并属性：+是以，分割，+_是以空格分割