postcss-nesting, 嵌套样式规则互相 inside,遵循CSS嵌套规范

分享于 

3分钟阅读

GitHub

  繁體 雙語
Add the ability to nest one style rule inside another
  • 源代码名称:postcss-nesting
  • 源代码网址:http://www.github.com/jonathantneal/postcss-nesting
  • postcss-nesting源代码文档
  • postcss-nesting源代码下载
  • Git URL:
    git://www.github.com/jonathantneal/postcss-nesting.git
    Git Clone代码到本地:
    git clone http://www.github.com/jonathantneal/postcss-nesting
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jonathantneal/postcss-nesting
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    PostCSS嵌套 PostCSS Logo

    CSS Standard StatusNPM VersionBuild StatusLicensingGitter Chat

    使用 PostCSS嵌套插件,你可以按照CSS嵌套插件规范,将样式规则设置为。

    
    
    
    
    a, b {
    
    
     color: red;
    
    
    
     & c, & d {
    
    
     color: white;
    
    
     }
    
    
    }
    
    
    
    /* after postcss-nesting */
    
    
    
    a, b {
    
    
     color: red;
    
    
    }
    
    
    
    a c, a d, b c, b d {
    
    
     color: white;
    
    
    }
    
    
    
    

    用法

    PostCSS嵌套插件添加到生成工具中:

    
    
    
    
    npm install postcss-nesting --save-dev
    
    
    
    
    node

    使用 PostCSS嵌套插件处理你的CSS:

    
    
    
    
    require('postcss-nesting').process(YOUR_CSS, { /* options */ });
    
    
    
    
    PostCSS

    PostCSS插件添加到生成工具中:

    
    
    
    
    npm install postcss --save-dev
    
    
    
    

    使用 PostCSS嵌套插件作为插件:

    
    
    
    
    postcss([
    
    
     require('postcss-nesting')({ /* options */ })
    
    
    ]).process(YOUR_CSS, /* options */);
    
    
    
    

    Gulp PostCSS 添加到生成工具中:

    
    
    
    
    npm install gulp-postcss --save-dev
    
    
    
    

    在你的Gulpfile中使用 PostCSS嵌套:

    
    
    
    
    var postcss = require('gulp-postcss');
    
    
    
    gulp.task('css', function () {
    
    
     return gulp.src('./src/*.css').pipe(
    
    
     postcss([
    
    
     require('postcss-nesting')({ /* options */ })
    
    
     ])
    
    
     ).pipe(
    
    
     gulp.dest('.')
    
    
     );
    
    
    });
    
    
    
    
    Grunt

    Grunt PostCSS 添加到生成工具中:

    
    
    
    
    npm install grunt-postcss --save-dev
    
    
    
    

    在你的Gruntfile中使用 PostCSS嵌套:

    
    
    
    
    grunt.loadNpmTasks('grunt-postcss');
    
    
    
    grunt.initConfig({
    
    
     postcss: {
    
    
     options: {
    
    
     use: [
    
    
     require('postcss-nesting')({ /* options */ })
    
    
     ]
    
    
     },
    
    
     dist: {
    
    
     src: '*.css'
    
    
     }
    
    
     }
    
    
    });
    
    
    
    

    style  spec  NEST  RULE  specification  规则