@4alldigital/scut 中文文档教程

Question

Scut

updated/patched forked version from https://www.npmjs.com/package/scut.

— 一组 Sass 实用程序，用于简化和改进我们对常见样式代码模式的实现。

要详细了解 Scut，阅读关于 CSS 技巧的“介绍 Scut”。

如果您对 Sass 有任何疑问，可以在 Sass 的精美文档 中找到答案。

Installing and Using

请访问此处的完整文档：
http://davidtheclark.github.io/scut/

应该在那里解释用法，就像安装一样。 但为了您的方便，我也会在这里解释安装。 您可以通过以下方式安装 Scut：

• Using Bower: bower install scut --save-dev.
• Downloading the file from the latest release.
• Using Scut as a Compass extension by installing the RubyGem (gem install scut) and then performing the usual Compass require and @import business.
• Using node-sass and eyeglass:
• npm install --save-dev scut
• setup render per eyeglass instructions
• in sass files: @import 'scut'

Contributing

请执行！ Scut 很简单； 贡献应该很容易。 所以试一试吧。

如果您有任何疑问，如果关于本文档的任何内容不清楚或不准确，如果您不知道该怎么做，请提交问题或联系我。

Approach

Scut 实用程序应该帮助用户避免重复、组织代码和重用代码。

Scut 实用程序应该解决遭受以下一个或多个问题的模式：

1. The pattern is non-intuitive.
2. The pattern deserves a shorthand.
3. The pattern involves some important best practices.
4. The pattern is extremely common and (at least) a little annoying.

该实用程序的目标是以最大限度地提高可重用性 的方式解决这些问题。 这里有一些要记住的原则，以最大限度地提高可重用性：

• Include sufficient detail to implement the pattern, but no more.
• Use arguments to allow for typical variations on the theme.
• Arrange those arguments according to the likelihood that users will want to change them.
• Namespace (notice the scut- prefix everwhere).
• Document thoroughly.

我在 那篇 CSS 技巧文章。

Development Requirements

• Node and npm
• Grunt-cli
• Gulp
• Bower
• Sass-cli

Writing Scut Utilities

实用程序位于 src/ 中，按类别组织。 src/ 中的 SCSS 样式表最终连接到 dist/_scut.scss< /code>，这是用户 @import 到他们自己的 Sass 中的内容。

Scut's SCSS Styleguide

请查看 src/ 中现有的 SCSS 文件并尝试匹配它们的样式。

（或者，如果您认为有更好的方法，请提交问题.)

这里有一些指导方针来解释我是如何写作的：

• Head the file with a multi-line comment (each line an inline // comment, not a block comment) naming the utility and listing any dependencies. Limit dependencies please. In the end, that top comment should also contain the URL of the utility's documentation. For example:

// SCUT PIXELS TO EMS
// http://davidtheclark.github.io/scut/#pixels-to-ems

// Depends on `scut-strip-unit`.

• Indent with two spaces.
• List arguments on separate lines, so they are easy to scan. For example:

@mixin scut-color-swap (
  $inactive,
  $active,
  $duration: 0,
  $bg: false
) {
  // mixin content
}

• Space liberally. A space at the beginning and end of mixins and functions helps distinguish the arguments from the inner workings. Spacing can also help delineate different "sections" of the code by grouping rules that work together and separating those with different roles.

Experimenting and Testing

我推荐的实验和测试方法是使用 Codepen从头开始自己的笔或分叉 Scut Playground（导入最新版本的 Scut）。

（我已经从存储库中删除了“测试”目录和任务，转而依赖 Codepen。）

Documenting

文档是使用 Assemble 编译的。 源文件位于 docs/content 和 docs/dev 中。 您需要 bower install 才能获得 Normalize。