UNPKG

wecui

Version:

一款基于Vue2.x版本的移动端web组件

347 lines (257 loc) 6.16 kB
# 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