ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Sass​Beautify

by badsyntax ST2/ST3

A Sublime Text plugin that beautifies Sass files.

Labels sass, formatting

Details

  • 1.4.2
  • github.​com
  • github.​com
  • 11 months ago
  • 10 minutes ago
  • 4 years ago

Installs

  • Total 83K
  • Win 35K
  • OS X 37K
  • Linux 11K
Jan 18 Jan 17 Jan 16 Jan 15 Jan 14 Jan 13 Jan 12 Jan 11 Jan 10 Jan 9 Jan 8 Jan 7 Jan 6 Jan 5 Jan 4 Jan 3 Jan 2 Jan 1 Dec 31 Dec 30 Dec 29 Dec 28 Dec 27 Dec 26 Dec 25 Dec 24 Dec 23 Dec 22 Dec 21 Dec 20 Dec 19 Dec 18 Dec 17 Dec 16 Dec 15 Dec 14 Dec 13 Dec 12 Dec 11 Dec 10 Dec 9 Dec 8 Dec 7 Dec 6 Dec 5 Dec 4
Windows 3 49 58 30 22 44 40 39 42 31 20 24 34 27 53 38 19 10 18 31 42 27 25 33 19 15 27 42 59 30 39 20 17 28 45 37 45 49 19 37 32 56 46 45 35 21
OS X 2 35 34 14 16 27 34 33 32 34 13 17 25 32 47 36 24 11 13 27 27 22 28 20 8 12 18 30 35 37 28 28 12 32 20 43 25 26 13 13 27 32 32 26 23 14
Linux 0 16 7 8 11 12 7 11 14 7 11 9 11 9 9 16 4 4 7 8 4 5 8 7 7 5 16 4 13 10 13 9 7 11 10 20 19 16 6 4 13 13 14 14 4 5

Readme

Source
raw.​githubusercontent.​com

SassBeautify

https://sublime.wbond.net/packages/SassBeautify

A Sublime Text plugin that beautifies Sass files. (Compatible with Sublime Text 2 & 3.)

ScreenShot

Dependencies

This plugin uses sass-convert, and so you need to have sass installed. Read the sass download page to view the installation options.

It's a good idea to always use the latest version of Sass.

Installation

Option 1 (recommended)

Install via package control:

  1. Ensure you have package control installed, see here: https://sublime.wbond.net/installation
  2. Install the package: open up the command palette (ctrl/cmd + shift + p), execute the following command: 'Package Control: Install Package', then enter 'SassBeautify'

Option 2

Manual download:

  1. Download the zip file file here: https://github.com/badsyntax/SassBeautify/archive/master.zip
  2. Unzip the archive, rename the 'SassBeautify-master' folder to 'SassBeautify' and move it into your Sublime Text 'Packages' directory.

Usage

Default usage

Run the plugin from the command palette:

  1. Open the command palette (ctrl/cmd + shift + p)
  2. Enter 'SassBeautify'

Conversion usage

Run the conversion commands from the command palette:

  1. Open the command palette (ctrl/cmd + shift + p)
  2. Type 'SassBeautify'
  3. Choose one of the following options:
    • Convert from CSS to current type
    • Convert from SCSS to current type
    • Convert from SASS to current type

Settings

Once installed, you can customize how the beautification works by changing the package settings.

  1. Open the default settings from the preferences menu: Preferences >> Package Settings >> SassBeautify >> Settings - Default
  2. Copy the settings and paste them into your user settings file: Preferences >> Package Settings >> SassBeautify >> Settings - User
  3. Change the user settings.

Settings overview

The following settings can be adjusted:

{
  // How many spaces to use for each level of indentation. "t" means use hard tabs.
  "indent": 4,
  // Convert underscores to dashes.
  "dasherize": false,
  // Output the old-style ":prop val" property syntax. Only meaningful when generating Sass.
  "old": false,
  // Custom environment PATH.
  "path": false,
  // Custom environment GEM_PATH.
  "gemPath": false,
  // Beautify the sass file after saving it?
  "beautifyOnSave": false,
  // Keep "inline" comments inline?
  "inlineComments": false,
  // Add a new line between selectors?
  "newlineBetweenSelectors": false,
  // Use single quotes everywhere
  "useSingleQuotes": false
}

Key bindings

The plugin does not set any default key bindings, thus you will need to specify your own.

In your keymap file (Preferences >> Key bindings - User), add a custom key binding:

[
    {
        "keys": ["alt+w"],
        "command": "sass_beautify"
    }
]

Issues with ruby, Sass and your PATH

If you installed ruby and sass via a version manager tool like RVM, rbenv or via an installer like ruby installer, then you're likely to encounter issues with running sass-convert from Sublime Text.

Compatibility with RVM/rbenv

You need to specify the custom PATH and GEM_PATHvalues in your SassBeautify user settings.

Follow the steps below:

  1. Open up terminal
  2. Run: echo $PATH
  3. Copy the entire PATH into the 'path' setting
  4. Run: echo $GEM_PATH
  5. Copy the entire GEM_PATH into the 'gemPath' setting

Compatibility with RubyInstaller

During the install process, there should be an option to add ruby to your environment PATH. Ensure this option is selected.

Issues

This plugin should work on Linux (tested on Ubuntu 12.04), Windows (tested on Windows 7/8) and OSX (tested on 10.5.7).

Please create an issue if you find it doesn't work as expected on your setup.

Thanks

Thanks to the contributors and to all the people who have tested and reported issues.

License

Licensed under the MIT license. Created by Richard Willis