CSS预处理器框架与CSS后后处理器框架

文章目录

CSS预处理器典型代表:SASS、LessStylusCSS后处理器典型代表: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;
}
}

在线演示

在线演示

原创文章:CSS预处理器框架与CSS后后处理器框架 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css-post-processor.html)
评论已关闭。

“CSS预处理器框架与CSS后后处理器框架”有1个评论

  1. CLAMP

    恩,学习了!谢谢站长大人~

    登录回复