Writing your code in a text editor
You can write your Sass code in any text editor. Those who are familiar with the command line will even prefer an editor like VIM. VIM is an improved version of the vi editor distributed with most UNIX systems. This recipe will show you that you do not only have to choose your editor, but also have to find some SCSS style guidelines that fit your needs.
Many text editors have syntaxes highlighting for Sass and SCSS code. People who prefer a GUI should check out the See also section of this recipe.
Getting ready
You will only need your favorite text editor for this recipe.
How to do it…
Use the following steps to set up a new project according the style guidelines:
- Read the SCSS style guidelines from the See also section and write down the style guidelines you are going to use when writing Sass code.
- Set up your text editor to use a default indent according to the style guidelines from the previous step.
- Open a new project and create a file structure. See the Working with partials recipe of this chapter to read more about file structures and Sass application architectures.
- When you intend to use Compass, you can also run the
compass initcommand, which automatically sets up an initial file structure for your project.
How it works...
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.
There's more...
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.
See also
Style guidelines
Next, you will find an overview of different style guidelines for SCSS. Read them and choose the one that best fits your needs. Feel free to combine more than one source to create your own unique guidelines:
- The Sass Guidelines project can be found at http://sass-guidelin.es/.
- A Sass style guide published by Chris Coyier can be found at https://css-tricks.com/sass-style-guide/.
- edX is a massive open online course provider and online learning platform. For developers, it is an easy-to-understand and compact CSS/Sass style guide available at https://github.com/edx/ux-pattern-library/wiki/Styleguide:-Sass-&-CSS.
- Also, read An Auto-Enforceable SCSS Styleguide Powered by SCSS-Lint by David Clark at http://davidtheclark.com/scss-lint-styleguide/.
GUIs for Sass
Those who do not want to work with the command line can search for a suitable GUI or application. Many text editors can highlight that Sass and SCSS code have abilities to compile and preview your code. Some editors can also run post process tasks for the compiled CSS code. They are as follows:
- Brackets is a modern, open source text editor that makes it easy to design in the browser. Brackets focuses on visual tools and preprocessor support and is released under the MIT License. You can use Brackets free of charge, and it runs on OS X, Windows, and Linux. Download Brackets at http://brackets.io/.
- Sublime Text is a sophisticated text editor for code, markup, and prose according its website. Sublime Text may be downloaded and evaluated for free; however, a license must be purchased for continued use. A per-user license will cost $70. Read more about Sublime Text at https://www.sublimetext.com/.
- Prepros is a tool to compile LESS, Sass, Compass, Stylus, Jade, and much more with automatic CSS prefixing. It comes with a built-in server for cross-browser testing. It runs on Windows and Mac. Prepros has a free trial version, and you can buy a single user license for $29. More information on Prepros can be found at https://prepros.io/.
- Finally, there's Compass.app that is a menubar-only app for Sass and Compass. It helps designers compile stylesheets easily without resorting to a command-line interface. Compass.app is available for OS X, Windows, and Linux. You can buy Compass.app for only $10 at http://compass.kkbox.com/.
