CSS预处理器典型代表：SASS、Less、Stylus。CSS后处理器典型代表：cssnext(基于 PostCSS) 、myth(基于 Rework)
SASS、Less、Stylus
变量
//Less
@linkcolor: #61c;
//Scss
$linkcolor: #61c;
//Stylus
$linkcolor = #61c;mixin
//Less
.transition(value) {
-webkit-transition: value;
-moz-transition: value;
-o-transition: value; transition: value;
}
.foo { .transition(width .3s);
}//Scss
@mixin transition($value) {
-webkit-transition: $value;
-moz-transition: $value;
-o-transition: $value;
transition: $value;
}
.foo {
@include transition(width .3s);
}//Stylus
transition(value) {
-webkit-transition: value;
-moz-transition: value;
-o-transition: value;
transition: value;
}
.foo {
transition(width .3s);
}嵌套
a {
color: #333;
&:hover{
text-decoration: underline;
}
}
//输出：
a {
color: #333;
}
a:hover{
text-decoration: underline;
}后处理器怎么做
.foo { transition: width .3s; }.foo {
-webkit-transition: width .3s;
-moz-transition: width .3s;
-o-transition: width .3s;
transition: width .3s;
}/* 变量 */
:root {
--fontSize: 14px;
--mainColor: #333;
--highlightColor: hwb(190, 35%, 20%);
}
/* 自定义 media queries */
@custom-media --viewport-medium (min-width: 760px) and (max-width: 990px);
/* 变量引用 以及使用 calc() 运算*/
body {
color: var(--mainColor);
font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}
/* 颜色处理函数 */
a {
color: color(var(--highlightColor) blackness(+20%));
background: color(red a(80%))
}
/* 使用自定义 media queries */
@media (--viewport-medium) {
.foo {
display: flex;
font-size: calc(var(--fontSize) * 2 + 6px);
}
}/* 变量 */
/* 自定义 media queries */
/* 变量引用 以及使用 calc() 运算*/
body {
color: #333;
font-size: 14px;
line-height: 21px;
padding: 8px;
}
/* 颜色处理函数 */
a {
color: rgb(89, 142, 153);
background: rgba(255, 0, 0, 0.8)
}
/* 使用自定义 media queries */
@media (min-width: 760px) and (max-width: 990px) {
.foo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
font-size: 34px;
}
}