Giter Club home page Giter Club logo

sassbeautify's Introduction

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_PATH values 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

sassbeautify's People

Contributors

badsyntax avatar dcarral avatar scotthovestadt avatar strille avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sassbeautify's Issues

ERROR: invalid option: --indent

Hello,

When ever I try to run SassBeautify in ST2 or ST3 I receive the following error:

There was an error beautifying your Sass:
OptionParser::InvalidOption:
invalid option: --indent

Ay help would be greatly appreciated.

Error on using sass beautify

There was an error beautifying your Sass:

/Users/pratikbothra/.rvm/rubies/ruby-2.1.1/lib/ruby/2.1.0/rubygems/dependency.rb:298:in to_specs': Could not find 'sass' (>= 0) among 14 total gem(s) (Gem::LoadError) from /Users/pratikbothra/.rvm/rubies/ruby-2.1.1/lib/ruby/2.1.0/rubygems/dependency.rb:309:into_spec' .......

I have updated to the latest sass version, and used the path as mentioned in the readme echo $path (Yes, I've read the README (multiple times))

carpe-diem (mentions) λ sass --version
Sass 3.3.10 (Maptastic Maple)
carpe-diem (mentions) λ sass-convert --version
Sass 3.3.10 (Maptastic Maple)

Any suggestions on where I could have gone wrong? I don't think Sass is installed incorrectly, as the sass files build correctly. Certain the error is due to RVM, and path issues because it works perfectly on my friend's laptop.

{
  "indent": 2,
  "dasherize": false,
  "old": false,
  "path": "/Users/pratikbothra/.rvm/gems/ruby-2.1.1/bin:/Users/pratikbothra/.rvm/gems/ruby-2.1.1@global/bin:/Users/pratikbothra/.rvm/rubies/ruby-2.1.1/bin:/Users/pratikbothra/.nvm/v0.10.29/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/Users/pratikbothra/bin:/usr/local/Cellar/sbt/0.12.0/bin:/Users/pratikbothra/pear/bin:/Users/pratikbothra/.rvm/bin",
  "beautifyOnSave": true
}

Any suggestions are welcome?

Sass Converter - no such file

Hi, Trying to use the plugin and I get this error:

"There was an error beautifying your Sass:
[Errno 2] No such file or directory: 'sass-convert'"

Probably something with my configuration rather than the plugin but thought I would log it just in case. Will look into the issue when I have more time. Vince

Sorting option?

Could there be an option for sort (ex. alphabetically)? Or is there a sort applied already?

Update specific (e.g. only highlighted) syntax

Hey,

Firstly, great package

As title really. Often I don't want to format the entire file, just a specific piece. This extra functionality would save me the hassle of copy/pasting code elsewhere to format.

Yours hopefully,

Threading breaks usefulness of sublime_plugin.EventListener in ST3

I've been trying to add an option to this plugin to run SassBeautify on the save of a sass/scss file. I tried adding a sublime_plugin.EventListener class to SassBeautify to call the "sass_beautify" command in the on_pre_save() method (https://www.sublimetext.com/docs/3/api_reference.html#sublime_plugin.EventListener). I had to do a little fiddling to stop an infinite loop of the save calling beautify calling save calling beautify calling...

The next issue I ran into was that the on_pre_save() method actually completes before the "sass_beautify" command runs. In fact, on_post_save() completes before the "sass_beautify" command can run. I'm pretty sure it is because "sass_beautify" runs things on a background thread thus allowing on_pre_save() to complete. I put a print statement in on_pre_save(), on_post_save(), and in ExecSassCommand.run() right inside the try statement. The print statement in ExecSassCommand.run() was the last one to print in the console.

What this means is that I can have it beautify when I save the file, but the changes are technically made after ST3 completes the save, thus the file is left in a modified state.

Given that ST3 runs all plugins in a separate process, is there any plan to create an ST3 version of SassBeautify without the threading?

Issue with accents

Hi there,
I have an issue with accents.
(Yep, sorry, i'm french.) :p

Here is a comment before using SassBeautify

// à é ç è ù

Here is the same after using SassBeautify :

// ├á ├® ├º ├¿ ├╣

(And the same after again, just for fun)

// Ôö£├í Ôö£┬« Ôö£┬║ Ôö£┬┐ Ôö£Ôòú

I'm using Sublime Text 2.0.2 and SassBeautify 2013.08.12.20.57.29

Thanks !

Can I ignore converting css values below zero?

Can I ignore converting values below zero?

Why did you decided that it will be better 0.2 than .2 ?

padding-top: .3em;
converts to
padding-top: 0.3em;

How can I prevent this feature?

I expect it staying .3em

SassBeautify doesn't work...

Hi !
Sorry to borrow you with my issues !

I have a new PC at work, Windows 8 64 bits.
I wanted to test your example from your comment (from my feature request), and I noticed that it did not work at all for all my .scss files.

What I did, from the start to the bug :

  • Download SublimeText 2.0.2 Portable here : http://www.sublimetext.com/2
  • Unzip and launch it
  • Open Console (View > Show Console)
  • Install Package Control following instructions for Sublime Text 2 : https://sublime.wbond.net/installation#st2
  • Restart
  • Use Package Control to install SassBeautify
  • Restart
  • Open a file test.scss with this content :
    .i-have-a-problem{color:blue; &.yes-me-too{color:red;} }
  • Execute SassBeautify (I can see this message : "Beautifying your sass..." )
  • Nothing happens. :(

Did I missed something ?
Is my computer the problem ? As a Freelance (anymore since the last week) I used SassBeautify on my Laptop with Windows 7 64 bits.

Thank you for your help.

Error during Convert from SCSS to SASS file

Hi,

I try to convert SCSS file to current type (SASS) but I have an error :

There was an error beautifying your Sass:

[Errno 2] Aucun fichier ou dossier de ce type

I have removed and reinstall SassBeautify without success

Error when I try to format

Sass 3.2.18 (Media Mark)
ruby 2.0.0p247

I just installed the package and get this error. Any help would be appreciated.

usr/local/lib/ruby/site_ruby/1.8/rubygems/dependency.rb:247:in to_specs': Could not find sass (>= 0) amongst [] (Gem::LoadError) from /usr/local/lib/ruby/site_ruby/1.8/rubygems/dependency.rb:256:into_spec'
from /usr/local/lib/ruby/site_ruby/1.8/rubygems.rb:1231:in `gem'
from /usr/local/bin/sass-convert:22

Strips needed paretheses

If you want to use the opposite of a variable, you'd do something like:
margin: 0 (-$pad) 20px (-$pad);
but SassBeautify turns it into:
margin: 0 -$pad 20px -$pad;
which doesn't work the same.

Sublime Text quits when I try to use SassBeautify

Just tried to use SassBeautify with ST2 (both on newest versions) on OSX. Since I use rbenv, I did a "which sass-convert" to get the path where sass-convert is location and added that into the SassBeautify path setting.

When I run the beautify command from the console, sublime text quits immediately without any warning. Any ideas?

question: should i be able to install in st3

i'm a new st user, trying to install in st3/3059, but saasbeautify isn't showing up in the package list cmd-shift-p...? am i missing something? do i need to clone git repo an place in some st3 folder or something?

regards,
tony

Command for converting files to SCSS/SASS

Implement new commands:

  • "SassBeautify: Convert to Scss" - to convert a CSS, SCSS or Sass file to SCSS.
  • "SassBeautify: Convert to Sass" - to convert a CSS, SCSS, or Sass file to Sass.

No such file or directory

*.[scss|sass]

There was an error beautifying your Sass:

[Errno 2] No such file or directory

Does 'sass-convert' exist in PATH?'

sass-convert is OK. Sass 3.2.10 (Media Mark) on OSX 10.8.4

Use threading to prevent editor lockup

On slower machines, the sass complication can take a bit of time and the sub-process will freeze the editor. We should use threading to prevent the editor from locking up.

Allow user to use SassBeautify anywhere

Hi !

This is not an issue, but a feature request. :)

  • If I use only CSS on my .scss file, it works. Why can't we use it on a .css file ?
  • Sometimes, I have to copy/paste some code in a blank file, and I want to clean it with SassBeautify : but I have to save the file first in an .scss file...

Maybe you could just put an option (in the settings file) allowing us to use it wherever and whenever we want to ?

Thank you !

Right click in side-bar

Add a SassBeautify option to the context menu when right clicking on Sass files in the sidebar.

Separate lines if > 1

For example:

html {
background-color: #444;
font-size: 62.5%; /* Base 10 */
}

body {background-color: #eeeeee;}

Doesn't play nicely with RVM

Hi,

Internally, it's trying to execute sass-convert, but on my machine this doesn't work. I'm sure this is because I have multiple ruby gems installed.

To fix this, you need to let users override the environment path via the settings file.

Use sass-convert from installation of program like Prepros or NetBeans?

Hi, I'm trying to get this working on ST3 and I'm getting the following error:
'sass-convert' is not recognized as an internal or external command, operable program or batch file.
I assume this is because my Path setting is wrong:
"path": "C:\Users\AccountName\AppData\Roaming\NetBeans\7.3\sass-3.1.20\bin" <- using double forward slashes on all slashes here

I'm trying to use the sass-convert that was already installed on my Windows 8 PC by Prepros or Netbeans; is it possible?

Thanks!

blanklineBetweenSelectors has a failing case

When I run SassBeautify with blanklineBetweenSelectors set to true, the following:

.class-one,
.class-two,
.class-three {
    background-color: $aaa;
}

becomes:

.class-one,
.class-two,

.class-three {
    background-color: $aaa;
}

I found the regex code that deals with this

        # Insert a blank line between selectors. (Issue #30)
        if self.get_type() == 'scss' and self.settings.get('blanklineBetweenSelectors', False):
            output = re.sub(r'\n\n\n', '\n\n', re.sub(r'(.*)\{', r'\n\1{', output).strip())

This obviously requires the code to search back previous lines of scss until it finds the first one in the list. I'll keep thinking to see if I can come up with a solution. Might be easier to do this while the file is split up by line (where you're making sure the file uses unix-style newline characters).

By the way, I ran into this while trying to use SassBeautify in conjunction with SublimeLinter-contrib-scss-lint. It has a rule for a single selector per line. I'm finding that sass-convert isn't very compatible with scss-lint.

Issue with comments

Hi !

Sorry, I found another issue. :)

/*
// Lorem ipsum Nisi aute velit quis.
.lorem{ipsum:none;}
*/

When I use SassBeautify, the first /* becomes //

//
// Lorem ipsum Nisi aute velit quis.
.lorem{ipsum:none;}
*/

I can't comment code that has inline comments...
That's all ! :)

Thanks a lot,
William

Path setting giving error

I'm on Ubuntu 14 and using RVM

and my $echo path is /home/jitendra/.rvm/gems/ruby-1.9.3-p327/bin:/home/jitendra/.rvm/gems/ruby-1.9.3-p327@global/bin:/home/jitendra/.rvm/rubies/ruby-1.9.3-p327/bin:/usr/local/bin:/usr/local/sbin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/home/jitendra/.rvm/bin

When I paste this as a path value I get this error

Error trying to parse settings: Expected value in Packages/User/SassBeautify.sublime-settings:5:13

My setting file http://pastebin.com/SVbvqbR7

Space after a semicolon?

Is there a way for the SassBeautify to eliminate all the spaces after a ":" for example:

Before

  background: $c_body;
  color: $c-white;
  text-align: left;

After it runs the cmd:

  background:$c_body;
  color:$c-white;
  text-align:left;

Is this doable?

Thanks :)

Inline SASS / SCSS comments

Hi !
There is a problem with the comments when I use SassBeautify.

My SCSS code :

@mixin opacity($opacity) {
    filter: alpha(opacity=#{$opacity}); // IE 5-9+
    opacity: $opacity * 0.01;
}

$color1: #FF0000; // Red
$color2: #FFBF00; // Orange
$color3: #FFFF00; // Yellow

When I use SassBeautify, here is the result :

@mixin opacity($opacity) {
    filter: alpha(opacity=#{$opacity});
    // IE 5-9+
    opacity: $opacity * 0.01;
}

$color1: red;

// Red
$color2: #ffbf00;

// Orange
$color3: yellow;

// Yellow

I hope you will find a solution to this issue. :(

Your extension is almost perfect ! (I'd also like SassBeautify usable with CSS files. And by the way, an option to choose if we want, or not, a space between two declarations blocks or before comments ! Maybe some future features ? :p)

Thanks a lot for your attention !

Sublime Beta 3

Hello Sir

Really cool tool, but any chance it will work in Sublime Beta 3 in the future?

Option to leave comments on current line

When code is currently beautified, any comments are sent to a new line below their original place. It would be nice to have an option to leave them where they are.

Possible Dasherize issue

The variable, $max-width, becomes $max_width regardless of settings in my config for SassBeauty. The entire line looks like this:

@include dropdown-container( $content: content, $triangle: false, $max-width: 100% );

Apart from that no classes are affected and no other variables are altered. I'm reluctant to post this issue as it'll turn out to be my own derp, but I'll update if that's the case.

preserve newlines

I am using scsslint (requiring a newline after a rule declaration)

preserving newlines should be an option.
SassBeautify collapses all newlines which forces the user to set the linter to use this as a coding style.

Since the coding style should not be affected by a beautifier it would be nice if this could be added

blanklineBetweenSelectors separates comments from code

Thanks for this useful tool.

Beautifying a .scss file will expand

.test1 {
    display: block;
}

// Comment
.test2 {
    display: block;
}

to:

.test1 {
    display: block;
}

// Comment

.test2 {
    display: block;
}

This separation of comment and associated code block is probably not intended behaviour.

selectors' properties - make single-line

I like my properties to be single-line. I've been writing them like this for 9 years.
For Example:

ul{ height:100px; width:50px; list-style:none; }

I would really like such a setting

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.