Getting Started With SCSS-Lint

SCSS-Lint: A weapon to keep Sass code tidy and consistent

This article will introduce how to use SCSS-Lint, a powerful Ruby gem tool, to maintain the neatness and consistency of the Sass code base. It does this by tagging suspicious usage and ensuring the stylesheet is easy to read.

Core points:

• SCSS-Lint is a powerful Ruby gem tool that helps maintain neatness and consistency of the Sass code base by marking suspicious usage and ensuring stylesheets are easy to read. You need to install it before use, and the command line tool is named scss-lint.
• The configuration of SCSS-Lint involves defining the rules to be followed through the YAML file in the project root directory. This file is usually named .scss-lint.yml and contains all code style check configurations. You can pass options such as --config or --exclude to SCSS-Lint to customize the code style checking process.
• It is recommended to use a pre-commit hook to check the code before committing to the remote repository to keep the code tidy. This can be set up with a lightweight npm package that provides support for Git hooks via package.json files. If SCSS-Lint returns an error during this process, the commit will abort and the code needs to be fixed to pass the commit.

Writing runnable code is the easiest part of a website, an application, or any software development. Making the entire project scalable, tested, properly documented and easy to contribute is the difficult part.

Part of this is to have a clean and consistent code base. Clean, because maintaining ugly "strange" code is definitely not a pleasant thing; consistent, because it makes maintaining the code base easier and faster. If the code looks the same everywhere in the software, you will soon get used to how it is written.

With the Sass side, there are some things you can do to make the code tidy and consistent. The first is to follow some coding guides, such as the CSS guide and the Sass guide. Another thing is to check for your code base.

If you are not familiar with the word

Check, here is the explanation from Wikipedia:

In computer programming, "check" initially refers to a specific program that marks some suspicious and unportable structures (possibly errors) in the C source code. Now, this term is often used to refer to tools that mark suspicious usage in software written in any computer language.

What is the suspicious usage in Sass? It depends on how you define "suspicious", but more broadly, it may just be a matter of ensuring that the stylesheet is easy to read and not complicated. For example, limit the usage of selector nesting to a single level.

To check our Sass code base, there is a great tool called SCSS-Lint. Now let's talk about the bad news: SCSS-Lint is a Ruby gem, and you need to preinstall this gem no matter how you run it (CLI, Grunt, Gulp...). The good news is that some lovely people are currently developing npm package versions of SCSS-Lint, so sooner or later we may get rid of this tedious extra step. OK, let's start:

<code class="language-bash">$ gem install scss_lint</code>

Note: Due to naming reasons, the gem is named scss_lint, but the command line tool is actually scss-lint. The library is named SCSS-Lint. Because it's not complicated enough…:)

Getting started with CLI tools

SCSS-Lint has many options. In fact, so much that it may be a little overwhelmed at first. Fortunately, we don’t use many options often, so let’s take a look at these options.

With the -c or --config options, you can pass the path to the configuration file, which will help define the rules to apply to the code base. For example:

<code class="language-bash">$ scss-lint . --config .scss-lint.yml</code>

Depending on your project, you may want to use the -e or --exclude options to exclude certain files or folders from the code style checking process. For example, you may not want to check your third-party library or your node module. For example:

<code class="language-bash">$ scss-lint . --exclude ./node_modules/**/*</code>

For more complex usage of --exclude, you can define it in the configuration file passed through --config.

There are other options, but I feel like this is enough to get started.

The first parameter passed to

is the folder to run. If omitted, the default is scss-lint, that is, the current folder. If you want to specify a specific folder, you can: .

<code class="language-bash">scss-lint ./assets/stylesheets</code>

Configure Code Style Checker

Now that we are ready to check our Sass code base, we need to define what rules should be followed. SCSS-Lint has many

code style inspectors (they are called), so many that all inspectors listed here are too long. I suggest you read the documentation for the Code Style Checker.

The idea is that you create a YAML file in the project root directory with all the code style check configurations. By default, SCSS-Lint will try to find the

file in the current folder, so I suggest you name the file like this. However, if you prefer a different name, you can do this; just make sure to pass it with the .scss-lint.yml option. --config

Sass Guide provides you with a ready-made configuration file for you to use in your project. If you want to customize something, be sure to take a closer look, but overall it should fix the problem.

Check the code style when submitting

A very nice thing is to use a pre-commit hook when committing to make sure the code is clean (

checked). I covered Sass testing and pre-commit hooks in my previous SitePoint article.

If you're not sure what a pre-commit hook is, it's basically a mechanism designed to run some operations before applying the commit. If any action performed throws an error, the commit will be aborted.

Make sure to check the code before committing to the remote repository, this is the perfect use case for Git hooks. In this section, we will see how to set it up in a very simple way.

To do this, we will use a very lightweight npm package that provides support for Git hooks directly via package.json files. There are many libraries that can do this, but I personally chose pre-commit. As shown below:

<code class="language-bash">$ gem install scss_lint</code>

When submitting, the pre-commit hook triggers and runs the lint npm script (exactly the same as

). As you can see from the code, the lint npm script runs the npm run lint command. If SCSS-Lint returns an error, the commit will abort and the code needs to be fixed to pass the commit. scss-lint .

If you run SCSS-Lint through Gulp, Grunt, or any other tool, you can run the task in the lint npm script instead of using the

binary directly. Similarly, you can pass options like scss-lint or --config. --exclude

Final Thoughts

We can always do better, but I think this is a great introduction to SCSS-Lint, and we can actually use it for both existing and new projects in a simple and powerful way.

Guys, there is no reason to continue submitting dirty codes, check it out before pushing!

(The FAQ part in the original text is retained here because its content is related to the topic of the article and information will be lost after rewriting)

What is the main purpose of SCSS Lint?

SCSS Lint is a tool that helps developers maintain a consistent coding style in their SCSS files. It analyzes your SCSS code and flags any designs from the defined coding standards. This tool is particularly useful in large projects where multiple developers are working on the same codebase. By enforcing a consistent coding style, SCSS Lint makes the code easier to read, understand, and maintain.

How do I install SCSS Lint?

SCSS Lint is a Ruby gem, so you need to have Ruby installed on your system to use it. Once you have Ruby, you can install SCSS Lint by running the command

in your terminal. After the installation is complete , you can run gem install scss_lint from the command line to lint your SCSS files.scss-lint

How do I configure SCSS Lint?

SCSS Lint can be configured by creating a

file in the root directory of your project. This file allows you to enable or disable specific linters, and to customize the behavior of the linters. The configuration file uses the YAML syntax , and each linter has its own set of options that you can configure..scss-lint.yml

Can I use SCSS Lint with other tools?

Yes, SCSS Lint can be integrated with many popular tools and editors. For example, you can use it with task runners like Grunt and Gulp, or with code editors like Sublime Text and Atom. This allows you to lint your SCSS files automatically as part of your development workflow.

What are some common SCSS Lint rules?

SCSS Lint comes with a wide range of rules that enforce good practices in SCSS code. Some common rules include enforcing consistent indentation, disallowing trailing whitespace, and requiring a newline at the end of files. There are also rules for more specific SCSS features, like disallowing the use of ID selectors, or requiring a space before the opening brace of a rule.

How do I ignore certain SCSS Lint warnings?

If there are certain warnings that you want to ignore, you can do so by adding a comment with // scss-lint:disable RuleName before the line of code. To re-enable the rule, you can add another comment with // scss-lint:enable RuleName. You can also disable all linters for a section of code with // scss-lint:disable all.

Can I use SCSS Lint with CSS files?

SCSS Lint is specifically designed for SCSS, which is a superset of CSS. This means that it can lint CSS code, but it may not understand some CSS-specific syntax. If you’re working primarily with CSS, you might want to consider using a CSS-specific linter like Stylelint.

How do I update SCSS Lint?

You can update SCSS Lint by running the command gem update scss_lint in your terminal. This will download and install the latest version of the gem. It’s a good idea to keep your tools up to date to benefit from the latest features and bug fixes.

What are the alternatives to SCSS Lint?

There are several alternatives to SCSS Lint, including Stylelint, CSSLint, and Sass Lint. These tools have similar functionality, but they may have different rules or configuration options. You should choose the tool that best fits your needs and preferences.

How do I uninstall SCSS Lint?

If you no longer need SCSS Lint, you can uninstall it by running the command gem uninstall scss_lint in your terminal. This will remove the gem from your system. If you want to reinstall it later, you can do so by running the installation command again.

The above is the detailed content of Getting Started With SCSS-Lint. For more information, please follow other related articles on the PHP Chinese website!