PreCSS是PostCSS的一种插件，用来进行CSS预编译
- PreCSS中的嵌套可以使用
&符，把父选择器复制到子选择器中 - PreCSS使用
$符声明变量，比如$color: #ccc - PreCSS中用
@if和@else来控制循环 - PreCSS中用
@define-mixin mixin_name $arg1,$arg2{...}语法来声明混合宏 - PreCSS中用
@mixin mixin_name pass_arg1, pass_arg2;语法来调用混合宏 - PreCSS中用
@mixin-content保留传递内容 - PreCSS中使用
@define-extend extend_name{...}来声明可扩展的代码块 - PreCSS中使用
@extend extend_name语法来调用声明的代码扩展块 - PreCSS可以使用
@import中导入CSS文件
嵌套
PreCSS和其的预处理器一样，可以使用&符，把父选择器复制到子选择器中
.menu{
width: 100%;
a{
text-decoration: none;
}
&::before{
content: '';
}
}
嵌套后结果
.menu{
width: 100%;
}
.menu a{
text-decoration: none;
}
.menu:before{
content: '';
}
变量
使用$符声明变量，比如$color: #ccc
$text_color: #232323;
$border_comn: 1px solid red;
body{
color: $text_color;
border: $border_comn;
}
编译后结果
body{
color: #232323;
border: 1px solid red;
}
条件
条件判断语句，使用@if和@else
$column_layout: 2;
.column{
@if $column_layout == 2{
width: 50%;
float: left;
}@else{
width: 100%;
}
}
编译后结果
.column{
width: 50%;
float: left
}
循环
@for 循环：用一个计数器变量，来设置循环的周期
@each 循环：循环周期是一个列表，而不是数字
注意：当变量插入到一个字符串中时，需要用括号包裹变量名，例如 $(var）
@for $i from 1 to 3{
p:nth-of-type($i){
margin-left: calc(100% / $i);
}
}
编译后结果
p:nth-of-type(1){
margin-left: calc(100% / 1);
}
p:nth-of-type(2){
margin-left: calc(100% / 2);
}
p:nth-of-type(3){
margin-left: calc(100% / 3);
}
$social: twitter,facebook,youtube;
@each $icon in ($social){
.icon-$(icon){
background: url('img/$(icon).png');
}
}
编译后结果
.icon-twitter{
background: url('img/twitter.png');
}
.icon-facebook{
background: url('img/facebook.png');
}
.icon-youtube{
background: url('img/youtube.png');
}
混合宏 Mixins
通过 @define-mixin mixin_name $arg1, $arg2 {...} 来声明一个混合宏
使用 @mixin mixin_name pass_arg1, pass_arg2; 来调用混合宏
@define-mixin icon $network, $color{
.button .$(network){
background-image: url("img/$(network).png");
background-color: $color;
}
}
@mixin icon twitter, blue;
@mixin icon youtube, red;
编译后结果
.button .twitter{
background-image: url("img/twitter.png");
background-color: blue;
}
.button .youtube{
background-image: url("img/youtube.png");
background-color: red;
}
传递内容 @mixin-content
除了可以传递参数之外，还可以保留传递内容
@define-mixin icon $network,$color{
.button .$(network){
background-image: url('img/$(network).png');
background-color: $color;
@mixin-content;
}
}
@mixin icon twitter, blue{
width: 3rem;
}
编译后结果
.button .twitter{
background-image: url('img/twitter.png');
background-color: blue;
width: 48px;
width: 3rem;
}
扩展
创建一个多次复用的代码块
使用 @define-extend extend_name{...} 方式来声明扩展的代码块。
通过 @extend extend_name 来调用声明的代码块。
合并重复的样式
@define-extend rounded_button{
border-radius: 0.5rem;
padding: 1rem;
border-width: 0.0625rem;
border-style: solid;
}
.blue_button{
@extend rounded_button;
border-color: rgba(0,0,0,0.2);
background-color: #333;
}
.red_button{
@extend rounded_button;
border-color: rgba(255,255,255,0.2);
background-color: #666;
}
编译后结果
.blue_button, .red_button{
border-radius: 0.5rem;
padding: 16px;
padding: 1rem;
border-width: 1px;
border-width: 0.0625rem;
border-style: solid;
}
.blue_button{
border-color: #000000;
border-color: rgba(0,0,0,0.2);
background-color: #333;
}
.red_button{
border-color: #ffffff;
border-color: rgba(255,255,255,0.2);
background-color: #666;
}
源码下载：https://github.com/NalvyBoo/PostCSS-Comn/tree/master/precss
