$ npm install postcss-custom-selectors
// dependencies
var fs = require('fs')
var postcss = require('postcss')
var selector = require('postcss-custom-selectors')
// css to be processed
var css = fs.readFileSync('input.css', 'utf8')
// process css using postcss-custom-selectors
var output = postcss()
.use(selector())
.process(css)
.css
console.log('\n\n ====>Output CSS:\n',output) 或者：
var output = postcss(selector())
.process(css)
.cssinput.css：
@custom-selector --heading h1, h2, h3, h4, h5, h6;
article --heading + p{
margin-top: 0;
}你将得到：
article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p{
margin-top: 0;
}A custom selector is defined with the @custom-selector rule:
@custom-selector = @custom-selector <extension-name> <selector>;
This defines a custom selector which is written as a pseudo-class with the given <extension-name>, and represents a :matches() selector using the provided <selector> as its argument.
For example, if an author wanted to easily refer to all heading elements in their HTML document, they could create an alias:
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading { /* styles for all headings */ }
:--heading + p { /* more styles */ }
/* etc */你可以使用
:自定义一个伪类。::自定义一个伪元素。
例如，模拟一个 :any-link 选择器：
input.css:
@custom-selector :--any-link :link, :visited;
a:--any-link {
color: blue;
}output:
a:link, a:visited {
color: blue;
}@custom-selector 类似 CSS :matches() 选择器，但是目前不支持在同一个选择器中调用多个自定义选择器，例如：
@custom-selector --heading h1, h2, h3, h4, h5, h6;
@custom-selector :--any-link :link, :visited;
.demo --heading, a:--any-link {
font-size: 32px;
}将会输出错误的 CSS 代码。
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
postcss: {
options: {
processors: [
require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin
require('postcss-custom-selector')(),
]
},
dist: {
src: ['src/*.css'],
dest: 'build/grunt.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default', ['postcss']);
}var gulp = require('gulp');
var rename = require('gulp-rename');
var postcss = require('gulp-postcss');
var selector = require('postcss-custom-selector')
var autoprefixer = require('autoprefixer-core')
gulp.task('default', function () {
var processors = [
autoprefixer({ browsers: ['> 0%'] }), //Other plugin
selector()
];
gulp.src('src/*.css')
.pipe(postcss(processors))
.pipe(rename('gulp.css'))
.pipe(gulp.dest('build'))
});
gulp.watch('src/*.css', ['default']);extensions (默认: {})
该选项允许你自定义一个对象来设置 <extension-name>（选择器别名）和 <selector>，这些定义将覆盖 CSS 中相同别名的 @custom-selector。
var options = {
extensions: {
':--any' : 'section, article, aside, nav'
}
}
var output = postcss(selector(options))
.process(css)
.css;input.css
@custom-selector :--any .foo, .bar; /* 不会生效 */
:--any h1 {
margin-top: 16px;
}output:
section h1, article h1, aside h1, nav h1 {
margin-top: 16px;
}- 安装相关依赖模块
- 尊重编码风格（安装 EditorConfig）
- 运行测试
$ git clone https://github.com/postcss/postcss-custom-selectors.git
$ git checkout -b patch
$ npm install
$ npm test