Sass Formatter installs statistics

Sass Formatter

Sass formatter extension for VS Code built on top of sass-convert. Beautify sass, scss and css files.

Important

Since the latest version od Sass (Dart Sass) not providing a sass-convert library, I have decided to stop further maintenance of this extension. You can continue using this extension with old Sass (Ruby Sass) implementation.

Requirements

Requires Ruby Sass command-line tools to be installed. Tested sass command-line tools: Ruby Sass Gem v3.7.4.

It is important to say that Dart Sass introduced on March 26, 2018, is not supported by this extension because sass-convert functionality is not provided in Dart implementation (more details: GitHub/Dart Sass/Are you planning to implement sass-convert?).

More details about Sass Syntax used in this formatter.

Install Ruby Sass via command-line

This procedure was official before March 26, 2018. With the release of Dart Sass 1.0.0, Ruby Sass become officially deprecated.

More official links about a transition from Ruby Sass to Dart Sass:

• Ruby Sass is Deprecated • Dart Sass 1.0.0 is Released • Announcing Dart Sass

So instead of following this Install Sass, which will install Dart Sass, please follow the old official procedure below for installing Ruby Sass instead.

Linux

If you're using a distribution of Linux, you'll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm. You will also need the build-essential package, available through a package manager as well.

Windows

Before you start using Sass, you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It's a single-click installer that will get everything set up for you super fast.

The installer will also install a Ruby command-line PowerShell application that will let you use the Ruby libraries.

Mac

If you prefer the command-line over an application, then getting Sass set up is a fairly quick process. Sass has a Ruby dependency, but if you're using a Mac, congratulations, Ruby comes pre-installed.

Install Ruby Sass

Here's the quickest way we've found to start using Sass by using the command-line:

1. Open your Terminal or Command Prompt. On the Mac, the Terminal.app comes installed by default. It's located in your "Utilities" folder. On Windows, run cmd.

2. Install Ruby Sass. Ruby uses Gems to manage its various packages of code like Sass. In your open terminal window type:

This will install Sass and any dependencies for you. It's pretty magical. If you get an error message, then it's likely you will need to use the sudo command to install the Sass gem. It would look like:

1. Double-check. You should now have Sass installed, but it never hurts to double-check. In your terminal application you can type:

It should return Ruby Sass 3.7.4.

Usage

Files can be formatted on-demand by right-clicking in the document and selecting Format Document in the editor context menu, using the associated keyboard shortcut, or by running command Format Document from the Command Palette.

Default keyboard shortcuts for Format Document command:

• macOS: Shift+Alt+F • Linux: Ctrl+Shift+I • Windows: Shift+Alt+F

Selection can be formatted on-demand by right-clicking in the document and selecting Format Selection in the editor context menu, by using the associated keyboard shortcut, or by running command Format Selection from the Command Palette.

Default keyboard shortcuts for Format Selection command:

• macOS: Cmd+K Cmd+F • Linux: Ctrl+K Ctrl+F • Windows: Ctrl+K Ctrl+F

By default, formatter using UTF-8 encoding to ensure proper encoding of all characters. This allows us to use Unicode characters directly in our styling files:

To automatically format on paste, add the following to your settings.json file: "editor.formatOnPaste": true.

To automatically format a file on saving, add the following to your settings.json file: "editor.formatOnSave": true.

To automatically insert a final newline at the end of the file when saving it, add the following to your settings.json file: "files.insertFinalNewline": false.

Sass Formatting Demo

Sass Formatter Settings

This extension contributes the following settings:

• sassFormat.dasherize: Convert underscores to dashes. • sassFormat.indent: How many spaces to use for each level of indentation. Defaults to 4. "t" means use hard tabs. • sassFormat.oldStyle: Output the old-style ":prop val" property syntax. Only meaningful when formatting Sass. This setting is deprecated. This syntax is not widely used and is unnecessarily different from CSS. • sassFormat.defaultEncoding: Specify the default encoding for input files. Defaults to "UTF-8". • sassFormat.unixNewlines: Use Unix-style newlines in formatted files. Always true on Unix. This setting is deprecated. Please use "End of Line" setting from VS Code. • sassFormat.useSingleQuotes: Use single quotes. Double quotes in comments will remain untouched. • sassFormat.inlineComments: Keep inline comments inline. Experimental support. • sassFormat.numberLeadingZero: Keep leading zero in numbers. Experimental support. • sassFormat.sassPath: Custom Sass PATH. Example: "sassFormat.sassPath": "/custom/path/bin"

Features Roadmap

• Format Files in Folder • EditorConfig support • Sass Lint configuration support • Code Tests

Known issues

If you're using ZSH, or if you installed Ruby and Sass via a version manager tool like rbenv, RVM, then you are likely to encounter issues with running sass-convert command from VS Code. In this case, please try to use sassFormat.sassPath setting where you can define PATH to your sass command-line tools.

Additionally, if you're using Ruby Installer please check Add Ruby executables to the PATH setting during the installation process.

Larger files need some time to be formatted. See below comparison table:

| Lines of Code | Size | Execution Time |…