wecui
Version:
一款基于Vue2.x版本的移动端web组件
347 lines (257 loc) • 6.16 kB
Markdown
# PreCSS [![Build Status][ci-img]][ci]
<img align="right" width="150" height="150" src="https://i.imgur.com/zxxN3OX.png" alt="">
[PreCSS] is a tool that allows you to use Sass-like markup in your CSS files.
Enjoy a familiar syntax with variables, mixins, conditionals, and other goodies.
### Variables
```css
/* 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;
}
```
### Conditionals
```css
/* before */
.notice--clear {
@if 3 < 5 {
background: green;
}
@else {
background: blue;
}
}
/* after */
.notice--clear {
background: green;
}
```
### Loops
```css
/* 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
}
```
```css
/* before */
@each $icon in (foo, bar, baz) {
.icon-$(icon) {
background: url('icons/$(icon).png');
}
}
/* after */
.icon-foo {
background: url('icons/foo.png');
}
.icon-bar {
background: url('icons/bar.png');
}
.icon-baz {
background: url('icons/baz.png');
}
```
### Mixins
```css
/* 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/search.png);
}
```
### Extends
```css
/* before */
@define-extend bg-green {
background: green;
}
.notice--clear {
@extend bg-green;
}
/* after */
.notice--clear {
background: green;
}
```
### Imports
```css
/* Before */
@import "partials/base"; /* Contents of partials/_base.css: `body { background: black; }` */
/* After */
body { background: black; }
```
### Property Lookup
```css
/* Before */
.heading {
margin: 20px;
padding: @margin;
}
/* After */
.heading {
margin: 20px;
padding: 20px;
}
```
### Root
```css
/* Before */
.parent {
background: white;
@at-root{
.child {
background: black;
}
}
}
/* After */
.child {
background: black;
}
.parent {
background: white;
}
```
## Usage
Follow these simple steps to use [PreCSS].
Add [PreCSS] to your build tool:
```bash
npm install precss --save-dev
```
Add the [PostCSS SCSS] parser to your build tool:
```bash
npm install postcss-scss --save-dev
```
#### Node
```js
require('precss')({ /* options */ }).process(YOUR_CSS, { parser: require('postcss-scss') });
```
#### PostCSS
Add [PostCSS] to your build tool:
```bash
npm install postcss --save-dev
```
Load [PreCSS] as a PostCSS plugin:
```js
postcss([
require('precss')({ /* options */ })
]).process(YOUR_CSS, { parser: require('postcss-scss') }).then(function (result) {
// do something with result.css
});
```
#### Gulp
Add [Gulp PostCSS] to your build tool:
```bash
npm install gulp-postcss --save-dev
```
Enable [PreCSS] within your Gulpfile:
```js
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./css/src/*.css').pipe(
postcss([
require('precss')({ /* options */ })
])
).pipe(
gulp.dest('./css')
);
});
```
#### Grunt
Add [Grunt PostCSS] to your build tool:
```sh
npm install precss --save-dev
```
Enable [PreCSS] within your Gruntfile:
```js
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
parser: require('postcss-scss'),
processors: [
require('precss')({ /* options */ })
]
},
dist: {
src: 'css/*.css'
}
}
});
```
### Plugins
PreCSS blends Sass-like strength with W3C future-syntax superpower, powered by the following plugins (in this order):
- [postcss-partial-import]: W3C and Sass-like imports
- [postcss-mixins]: Sass-like mixins
- [postcss-advanced-variables]: Sass-like variables and methods
- [postcss-custom-selectors]: W3C custom selectors
- [postcss-custom-media]: W3C custom media queries
- [postcss-custom-properties]: W3C custom variables
- [postcss-media-minmax]: W3C `<` `<=` `>=` `>` media queries
- [postcss-color-function]: W3C color methods
- [postcss-nesting]: W3C nested selectors
- [postcss-nested]: Sass-like nested selectors
- [postcss-atroot]: place rules back up to the root
- [postcss-property-lookup]: reference other property values
- [postcss-extend]: W3C and Sass-like extend methods
- [postcss-selector-matches]: W3C multiple matches pseudo-classes
- [postcss-selector-not]: W3C multiple not pseudo-classes
[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
[PostCSS SCSS]: https://github.com/postcss/postcss-scss
[PostCSS]: https://github.com/postcss/postcss
[PreCSS]: https://github.com/jonathantneal/precss
[ci-img]: https://travis-ci.org/jonathantneal/precss.svg
[ci]: https://travis-ci.org/jonathantneal/precss
[postcss-advanced-variables]: https://github.com/jonathantneal/postcss-advanced-variables
[postcss-custom-properties]: https://github.com/postcss/postcss-custom-properties
[postcss-custom-selectors]: https://github.com/postcss/postcss-custom-selectors
[postcss-selector-matches]: https://github.com/postcss/postcss-selector-matches
[postcss-property-lookup]: https://github.com/simonsmith/postcss-property-lookup
[postcss-color-function]: https://github.com/postcss/postcss-color-function
[postcss-partial-import]: https://github.com/jonathantneal/postcss-partial-import
[postcss-custom-media]: https://github.com/postcss/postcss-custom-media
[postcss-media-minmax]: https://github.com/postcss/postcss-media-minmax
[postcss-selector-not]: https://github.com/postcss/postcss-selector-not
[postcss-nesting]: https://github.com/jonathantneal/postcss-nesting
[postcss-atroot]: https://github.com/OEvgeny/postcss-atroot
[postcss-extend]: https://github.com/travco/postcss-extend
[postcss-mixins]: https://github.com/postcss/postcss-mixins
[postcss-nested]: https://github.com/postcss/postcss-nested