Precss
Precss 可以在 CSS 文件中使用 Sass 类型的 Markup。
变量
/* before */
$blue: #056ef0;
$column: 200px;
.menu {
width: calc(4 * $column);
}
.menu_link {
background: $blue;
width: $column;
}
/* after */
.menu {
width: calc(4 * 200px);
}
.menu_link {
background: #056ef0;
width: 200px;
}
条件
/* before */
.notice--clear {
@if 3 < 5 {
background: green;
}
@else {
background: blue;
}
}
/* after */
.notice--clear {
background: green;
}
循环
/* before */
@for $i from 1 to 3 {
.b-$i { width: $(i)px; }
}
/* after */
.b-1 {
width: 1px
}
.b-2 {
width: 2px
}
.b-3 {
width: 3px
}
混入
/* before */
@define-mixin icon $name {
padding-left: 16px;
&::after {
content: "";
background-url: url(/icons/$(name).png);
}
}
.search {
@mixin icon search;
}
/* after */
.search {
padding-left: 16px;
}
.search::after {
content: "";
background-url: url(/icons/$(name).png);
}
扩展
/* before */
@define-extend bg-green {
background: green;
}
.notice--clear {
@extend bg-green;
}
/* after */
.notice--clear {
background: green;
}
导入
/* Before */
@import "partials/_base.css"; /* Contents of _base: `body { background: black; }` */
/* After */
body { background: black; }-
模块precss：可以通过他管理文件系统，文件的写入，删除等操作 模块autoprefixer： autoprefixer可以对sass处理过后的css再处理，解析CSS文件并且添加浏览器前缀到CSS规则里 API样例： module.exports = { ...... module:{ loaders: [ { t
-
软件简介 Precss 可以在 CSS 文件中使用 Sass 类型的 Markup。 变量 /* before */ $blue: #056ef0; $column: 200px; .menu { width: calc(4 * $column); } .menu_link { background: $blue; width: $column; } /* after */ .menu { wid
-
PreCSS是PostCSS的一种插件，用来进行CSS预编译 PreCSS中的嵌套可以使用 & 符，把父选择器复制到子选择器中 PreCSS使用 $ 符声明变量，比如 $color: #ccc PreCSS中用 @if 和 @else 来控制循环 PreCSS中用 @define-mixin mixin_name $arg1,$arg2{...} 语法来声明混合宏 PreCSS中用 @mixin
-
precss是一个预处理css的插件包，集成了很多postcss插件的功能，比如嵌套，变量，继承，混合，循环，判断。下面来介绍如何在webpack中使用precss。 一、新建项目 1、新建package.json #自动生成package.json文件 npm init 2、新建webpack.config.js module.exports = { entry: "./main.js",