PreCSS 语法说明

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