18f-contrib-web-design-standards 中文文档教程

发布于 9年前 浏览 31 项目主页 更新于 3年前

这是 美国网页设计标准 库的基于 node-sass 的包装器。 没有对库进行任何修改。

Contents

Requirements

这个版本包括 bourbon 和 neat。

Installation

要作为开发依赖项安装,请运行:

npm install --save-dev 18f-contrib-web-desgin-standard

如果您在生产中需要它,请将 --save-dev 替换为 --save

Usage

Basic Usage

Stylesheet usage

设置 Grunt 或 gulp.js 后,像这样导入整个美国网页设计标准。

@import "all";

Grunt Usage

Using grunt-sass

grunt-sass 任务使用 节点-sass (LibSass) 在下面。

示例配置:

使用 compileTasks 注册任务。 确保 sass:dev 包含在 compileAssets 注册中(如果它尚未存在)。

module.exports = function (grunt) {
  grunt.registerTask('compileAssets', [
    'clean:dev',
    'jst:dev',
    'less:dev',
    'sass:dev',  // Add this line.
    'copy:dev',
    'coffee:dev'
  ]);
};

像这样配置 sass 任务:

module.exports = function(grunt) {

  grunt.config.set('sass', {
    options: {
      sourceMap: true,
      includePaths: require('18f-contrib-web-design-standards').includePaths
    },
    dev: {
      files: {
        '.tmp/public/styles/main.css': 'assets/styles/main.scss'
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
};

不使用 compileAssets 的示例配置:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        includePaths: require('18f-contrib-web-design-standards').includePaths
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
  }
});

node-sass Usage

直接将其与 node-sass 一起使用。

var sass    = require('node-sass')
var neat = require('node-neat');

sass.render({
  file: './application.scss',
  success: function(css){
    console.log(css);
  },
  error: function(error) {
    console.log(error);
  },
  // includePaths: neat.with('other/path', 'another/path'),
  // - or -
  includePaths: neat.includePaths,
  outputStyle: 'compressed'
});

Getting Help

欢迎在 GitHub 上开票

Testing

How do you know the setup is correct?

当您的 path/to/output.css 样式表充满 2,000 多行 .usa-* 类定义时,您就会知道管道设置正确。

Automated testing

这将类似于 node-neat 被充实。

Credits

美国网页设计标准由 18F 的优秀团队制定。

License

18f-contrib-web-design-standards 版权所有 © 2015 Brian DeRocher。 它是免费软件,可以根据许可证文件中指定的条款重新分发。

This is a node-sass based wrapper of the U.S. Web Design Standards library. There are no modifications made to the library.

Contents

Requirements

This version includes bourbon and neat in it.

Installation

To install as a development dependency, run:

npm install --save-dev 18f-contrib-web-desgin-standard

If you need it in production, replace --save-dev with --save.

Usage

Basic Usage

Stylesheet usage

After setting up Grunt or gulp.js, import the entire U.S. Web Design Standards like this.

@import "all";

Grunt Usage

Using grunt-sass

The grunt-sass task uses node-sass (LibSass) underneath.

Example config:

Using the compileTasks registered task. Make sure sass:dev is included in the compileAssets registration if it's not already there.

module.exports = function (grunt) {
  grunt.registerTask('compileAssets', [
    'clean:dev',
    'jst:dev',
    'less:dev',
    'sass:dev',  // Add this line.
    'copy:dev',
    'coffee:dev'
  ]);
};

Confiure the sass task like this:

module.exports = function(grunt) {

  grunt.config.set('sass', {
    options: {
      sourceMap: true,
      includePaths: require('18f-contrib-web-design-standards').includePaths
    },
    dev: {
      files: {
        '.tmp/public/styles/main.css': 'assets/styles/main.scss'
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
};

Example config wihtout using compileAssets:

grunt.initConfig({
  sass: {
    dist: {
      options: {
        includePaths: require('18f-contrib-web-design-standards').includePaths
      },
      files: {
        'path/to/output.css': 'path/to/input.scss'
      }
    }
  }
});

node-sass Usage

Using it directly with node-sass.

var sass    = require('node-sass')
var neat = require('node-neat');

sass.render({
  file: './application.scss',
  success: function(css){
    console.log(css);
  },
  error: function(error) {
    console.log(error);
  },
  // includePaths: neat.with('other/path', 'another/path'),
  // - or -
  includePaths: neat.includePaths,
  outputStyle: 'compressed'
});

Getting Help

Feel free to open a ticket on GitHub.

Testing

How do you know the setup is correct?

You'll know the pipeline is setup correctly when your path/to/output.css stylesheet is filled with 2,000+ lines of .usa-* class definitions.

Automated testing

This is to be fleshed out similar to node-neat.

Credits

The U.S. Web Design Standards is made by the fine team at 18F.

License

18f-contrib-web-design-standards is Copyright © 2015 Brian DeRocher. It is free software, and may be redistributed under the terms specified in the LICENSE file.

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文