As surprising as it might sound, writing working code is actually the easy part when developing a website, application or any piece of software. Making the whole thing scalable, tested, properly documented and easy to contribute to is the hard part.
听起来可能令人惊讶，但是在开发网站，应用程序或任何软件时，编写工作代码实际上是最容易的部分。 使整个事情具有可扩展性，经过测试，正确记录并易于做出贡献是困难的部分。
One part is having a code base which is both clean and consistent. Clean, because maintaining ugly 'weird' code is definitely not a pleasure and consistent because it makes maintaining the code base easier and faster. If code looks the same everywhere in the software, then it should be quite fast to get used to the way it's written.
一方面是拥有既干净又一致的代码库。 干净，因为维护丑陋的“怪异”代码绝对不是一件令人愉快且始终如一的事情，因为它使维护代码库更加轻松快捷。 如果代码在软件中的每个地方看起来都一样，那么对它的编写方式来说应该很快。
When it comes to Sass, there are a couple of things you can do to make your code clean and consistent. The first one would be to respect some coding guidelines, such as CSS Guidelines and Sass Guidelines. The other thing is to lint your codebase.
当涉及到Sass时，您可以做一些事情来使您的代码干净且一致。 第一个是尊重一些编码准则，例如CSS准则和Sass准则 。 另一件事是整理您的代码库。
If you are not familiar with the word lint, here is what Wikipedia says:
如果您不熟悉lint这个词，这是Wikipedia所说的：
In computer programming, lint was the name originally given to a particular program that flagged some suspicious and non-portable constructs (likely to be bugs) in C language source code. The term is now applied generically to tools that flag suspicious usage in software written in any computer language.
在计算机编程中，lint是最初为特定程序指定的名称，该程序在C语言源代码中标记了一些可疑且不可移植的结构(可能是错误)。 现在，该术语通常用于标记以任何计算机语言编写的软件中可疑使用的工具。
What would be a suspicious usage in Sass? It depends on how you define suspicious but, more broadly speaking, it could simply be a matter of making sure the stylesheet remains easily readable and not complex. One example would be to limit the usage of selector nesting to a single level for instance.
在Sass中有什么可疑用法？ 这取决于您如何定义可疑对象，但是，更广泛地说，这仅是确保样式表易于阅读且不复杂的问题。 一个示例是将选择器嵌套的用法限制为单个级别。
To lint our Sass code base, there is one hell of a tool called SCSS-lint. Now let's start with the bad news: SCSS-lint is a Ruby gem and no matter how you run it (CLI, Grunt, Gulp…), you will need to install this gem beforehand. On the bright side, some lovely folks are currently developing a port of SCSS-lint as a npm package, so we might get rid of this tedious extra step sooner or later. Right. Let's get this over with:
为了使我们的Sass代码库更加整洁，有一个名为SCSS-lint的工具。 现在让我们从坏消息开始：SCSS-lint是Ruby gem，无论您如何运行它(CLI，Grunt，Gulp…)，您都需要事先安装此gem。 好的一面是，一些可爱的人目前正在开发一个SCSS-lint港口作为npm软件包，因此我们迟早会摆脱这一繁琐的额外步骤。 对。 让我们克服这个问题：
$ gem install scss_lintNote: the gem is called scss_lint for naming reason but the command line tool actually is scss-lint. And the library is called SCSS-lint. Because it was not complex enough… :)
注意：出于命名原因，该gem称为scss_lint ，但命令行工具实际上是scss-lint 。 该库称为SCSS-lint。 因为它还不够复杂……:)
SCSS-lint comes with a lot of options. Actually, so many that it might be a little overwhelming at first. Fortunately, there are actually not so many of those that we'll use frequently, so let's have a look at these.
SCSS-lint带有很多选项。 实际上，如此之多以至于乍一看可能有些让人不知所措。 幸运的是，实际上我们不会经常使用这些工具，因此让我们来看一下。
Through the -c or --config option, you can pass the path to a configuration file that will be helpful to define which rules you want to apply to your codebase. For example:
通过-c或--config选项，您可以将路径传递到配置文件，这将有助于定义要应用于代码库的规则。 例如：
$ scss-lint . --config .scss-lint.ymlDepending on your project, you might want to use the -e or --exclude option to exclude some files or folders from the linting process. For instance, you might not want to lint your third-party libraries or your node modules. For example
根据您的项目，您可能需要使用-e或--exclude选项从插入过程中排除某些文件或文件夹。 例如，您可能不希望隐藏第三方库或节点模块。 例如
$ scss-lint . --exclude ./node_modules/**/*For more complex usage of --exclude, you can define it in the configuration file passed through --config.
对于--exclude更复杂的用法，您可以在通过--config传递的配置文件中对其进行定义。
There are other options but I feel like this is more than enough to get started.
还有其他选择，但是我觉得这已经足够开始使用。
The first argument passed to scss-lint is the folder to run on. If omitted, it will default to ., the current folder. If you want to specify a specific folder, you can:
传递给scss-lint的第一个参数是要运行的文件夹。 如果省略，它将默认为. ，当前文件夹。 如果要指定特定的文件夹，则可以：
scss-lint ./assets/stylesheetsNow that we are ready to lint our Sass code base, we need to define which rules we should stick to. SCSS-lint has a load of linters, as they are called, so much that listing them all here would be too long. I recommend you go through the linters documentation.
现在我们已经准备好整理我们的Sass代码库，我们需要定义应该遵循的规则。 SCSS-lint包含大量的linter ，它们太多了，以至于将它们全部列出在这里太长了。 我建议您仔细阅读linters文档 。
The idea is that you create a YAML file at the root of your project, containing all your linting configuration. As a default, SCSS-lint will try to look for a .scss-lint.yml file in the current folder so I recommend you name your file like this. However if you prefer another name, you can; be sure to pass it with the --config option, that's all.
这个想法是您在项目的根目录下创建一个YAML文件，其中包含所有的Linting配置。 默认情况下，SCSS-lint会尝试在当前文件夹中查找.scss-lint.yml文件，因此，我建议您这样命名文件。 但是，如果您更喜欢其他名称，则可以； 确保通过--config选项传递它，仅此而已。
Sass Guidelines has a configuration file ready for you to grab and use in your project. Be sure to have a more in-depth look if you want to customise things, but all in all it should do the trick.
Sass Guidelines已准备好一个配置文件供您抓取并在项目中使用。 如果要自定义内容，请确保具有更深入的了解，但总的来说，它应该可以解决问题。
One neat thing to do is to make sure the code is clean (linted) when committing with the help of a pre-commit hook. I played a bit with Sass testing and pre-commit hooks in a previous article here at SitePoint entitled testing a Sass library.
要做的一件整洁的事情是，在使用预提交钩子进行提交时，确保代码是干净的(不掉毛 )。 我在SitePoint上的上一篇文章“ 测试Sass库 ”中对 Sass测试和预提交挂钩进行了一些测试 。
In case you are not sure what a pre-commit hook is, basically it is a mechanism aiming at running some operations before a commit being applied. If any of the operations performed raises an error, then the commit gets aborted.
如果您不确定什么是预提交钩子，则基本上是一种旨在在应用提交之前运行某些操作的机制。 如果执行的任何操作引发错误，则提交将中止。
Making sure the code is linted before committing to the remote repository is the perfect use case for a Git hook. In this section, we'll see how we can set this up in a very easy way.
确保代码在提交到远程存储库之前是完整的，这是Git挂钩的完美用例。 在本节中，我们将看到如何以一种非常简单的方式进行设置。
To do so, we are going to use a very lightweight npm package providing support for Git hooks through the package.json file direction. There are a lot of libraries to do so, but I personally opted for pre-commit. Here is what it looks like:
为此，我们将使用一个非常轻便的npm软件包，该软件包通过package.json文件方向为Git钩子提供支持。 有很多这样做的库，但是我个人选择了pre-commit 。 看起来是这样的：
{ "scripts": { "lint": "scss-lint ." }, "pre-commit": [ "lint" ] }When committing, the pre-commit hook fires and runs the lint npm script (exactly like npm run lint). The lint npm script, as you can see from the code, runs the scss-lint . command. If SCSS-lint returns an error, the commit is aborted and the code needs to be fixed for the commit to pass.
提交时，预提交钩子将触发并运行lint npm脚本(与npm run lint完全一样)。 从代码中可以看到， lint npm脚本运行scss-lint . 命令。 如果SCSS-lint返回错误，则提交将中止，并且需要固定代码以使提交能够通过。
If you run SCSS-lint through Gulp, Grunt or whatever else, you can run a task in the lint npm script instead of using the scss-lint binary directly. Along the same lines, you can pass options like --config or --exclude.
如果通过Gulp，Grunt或其他方式运行SCSS-lint，则可以在lint npm脚本中运行任务，而不是直接使用scss-lint二进制文件。 同样，您可以传递--config或--exclude类的选项。
We can always go further, but I think this is a good introduction to SCSS-lint, and we can actually use it on existing and new projects in a simple yet powerful way.
我们总是可以走得更远，但是我认为这是对SCSS-lint的很好的介绍，我们实际上可以以简单而有效的方式在现有项目和新项目中使用它。
No reason to keep committing dirty code anymore folks, lint it before pushing it!
没理由再继续提交肮脏的代码了，在推送之前先将其抹平！
翻译自: https://www.sitepoint.com/getting-started-with-scss-lint/
