Writing your code in a text editor

You will only need your favorite text editor for this recipe.

Use the following steps to set up a new project according the style guidelines:

Style guidelines will tell you how to write your code and guarantee that all the team members can work together on the same code base without spending too much time understanding the other's code. The guidelines should describe the indent in your code and how to nest your selectors. Also, naming conventions are part of the style guidelines. The names of your variables should not only be meaningful and descriptive, but they should also follow the guidelines. Sass variables are explained in Chapter 3, Variables, Mixins, and Functions, of this book.

Which style guidelines you chose does not matter so much, but when you have chosen, you should apply them correctly and consistently. Style guidelines keep your code readable, scalable, reusable, and maintainable.

Alternatively, you can use the scss-lint tool. This tool helps keep your SCSS files clean and readable. You can run it manually from the command line. You can find and read more about the scss-lint tool at http://davidtheclark.com/scss-lint-styleguide/.

The code examples in this book have all been linted with the scss-lint tool. When linting the code, the ColorKeyword linter will be excluded:

scss-lint --exclude-linter ColorKeyword

The ColorKeyword linter checks for usages of the HTML color keywords. The guidelines of the scss-lint tool tell you to use the (short) hexadecimal color notation instead of color keywords. In the examples in this book color names are used because of they are more easy to read.

In some situations, guidelines are ignored when the examples have to show a Sass feature that does not meet the guidelines. So, the PlaceholderInExtend linter does look for usages of the @extend directive without a placeholder, while the Working with partials recipe of this chapter explicitly shows you how the @extend directive can output without using a placeholder.

Also, plugins for the scss-lint tool are available for the VIM, IntelliJ, Sublime Text, Atom, and Emacs editors.

In the Editing and debugging your Sass code in a browser recipe of Chapter 2, Debugging Your Code, you can read how to write and debug your Sass code in a browser. Editing in a browser does not require a text editor at all. When editing your code in a browser, you should not ignore the style guidelines.