一、less(https://less.bootcss.com/)
优点
1、写法
.module {
.action {
a, a:hover {
//styles
}
}
}
2、结构清晰,便于扩展。对于模块很多的应用特别是单页 app,经常需要用 selector 来划分不同模块的 CSS 的 scope。应用less就简洁明了,可避免少写很多重复的选择器,而且结构非常清晰,相对于传统的css写法,可极大的避免选择器权重问题。
3、LESS是用JavaScript设计的,并且创建在 live 中使用,其编译速度比其他CSS预处理器更快。
4、完全兼容 CSS 代码,可以方便地应用到老项目中。
5、功能用法
1) 变量——用@定义变量,如:@color: blue
2) 扩展器——Extend是一个较少的伪类,它将放置的选择器与它所引用的选择器进行合并;
3) 样式的混入(mixin)
merge
需要在每个连接挂起声明上显式+
或+_
标记。
.mixin() { box-shadow+: inset 0 0 10px #555;}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
- 混入类选择器和id选择器
.a, #b { color: red;}
.mixin-class {
.a();
}
.mixin-id {
#b();
}
- 带多个参数
.mixin(@color) { color-1: @color;}
.mixin(@color; @padding: 2) { color-2: @color; padding-2: @padding;}
.mixin(@color; @padding; @margin: 2)
{ color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin;}
- arguments变量参数参数
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;}
.big-block { .box-shadow(2px; 5px);}
- 高级参数和
@rest
变量
- 从mixin返回变量或mixin
.mixin() {
@width: 100%;
@height: 200px;
}
.caller {
.mixin(); width:
@width; height: @height;
}
4)less插件引用及编写:使用@plugin
的规则类似于使用@import
您的.less
文件。如:
插件:
registerPlugin({
install: function(less, pluginManager, functions) {
functions.add('pi', function() {
return Math.PI; });
}
})
引用:@plugin "my-plugin";
.show-me-pi { value: pi();}
这样就能得到一个随机数 value
缺点
1、须要放在客户端编译
二、sass(https://www.sass.hk/)
功能:
1、写法:嵌套写法和less相似
2、变量:用$来定义 如:$color: blue
3、css语法规则:父选择器 &
;占位符选择器 %foo(通过@extend调用);
子组合选择器和同层组合选择器:>、+和~;基于Nicole Sullivan
面向对象的css
的理念,通过@extend来实现; @media
指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
4、导入文件使用:@import
规则并不需要指明被导入文件的全名。你可以省略.sass
或.scss
文件后缀,如(@import 'blue-theme') 或者 .theme { @import 'theme'}
5、混合宏 (在@include
混合器时给混合器传参)
- 不带参数
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
- 带参数
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
- 带参数且默认传参
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
6、数据类型 (Data Types)
- 数字,
1, 2, 13, 10px
- 字符串,有引号字符串与无引号字符串,
"foo", 'bar', baz
- 颜色,
blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型,
true, false
- 空值,
null
- 数组 (list),用空格或逗号作分隔符,
1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object,
(key1: value1, key2: value2)
缺点
1、须要放在服务端编译
三、stylus(https://less.bootcss.com/)
功能
1、书写方式:Stylus的空格有重要的意义,通常使用缩排和凹排代替花括号{
以及},如:
body
color white
2、选择器
- Stylus就跟CSS一样,允许使用逗号为多个选择器同时定义属性。
texarea, input
border 1px solid #eee
以上等同于
texarea,
input
border 1px solid #eee
- 样式混合
box-shadow() -webkit-box-shadow arguments -moz-box-shadow arguments box-shadow arguments html.ie8 &, html.ie7 &, html.ie6 & border 2px solid arguments[length(arguments) - 1] body #login box-shadow 1px 1px 3px #eee
- 传参
pad(n) padding (- n) body pad(5px)
3、变量(指定表达式为变量,然后在我们的样式中贯穿使用)
font-size = 14px body font font-size Arial, sans-seri
- 变量冒泡(属性会“向上冒泡”查找堆栈直到被发现,或者返回
null
)
body color: red ul li color: blue a background-color: @color
4、Stylus支持通过使用{}
字符包围表达式来插入值,其会变成标识符的一部分
table for row in 1 2 3 4 5 tr:nth-child({row}) height: 10px * row