Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle SASS parent reference &: #414

Closed
wulfsberg opened this issue Feb 20, 2014 · 3 comments
Closed

Handle SASS parent reference &: #414

wulfsberg opened this issue Feb 20, 2014 · 3 comments

Comments

@wulfsberg
Copy link

SASS allows referencing the enclosing parent selector, like this:

time {
       &:first-letter {
            text-transform: uppercase;
        }
    }

as per http://sass-lang.com/documentation/file.SASS_REFERENCE.html#referencing_parent_selectors_

When this is formatted, a space is added after the colon, breaking the syntax.
It would be very convenient if the &: notation was recognized as a special case, and no space added. (Even if it is strictly speaking not valid CSS; the beautifier already handles SASS very nicely otherwise).

@wulfsberg
Copy link
Author

...in fact, it seems a little inconsistent how the : is handled in nested blocks, even with normal pseudo-class selectors.

nponiros added a commit to get-the-service/js-beautify that referenced this issue Mar 18, 2014
JavaScript:
css beautifier checks if the colon it encounters
is part of a property: value or part of a nested pseudo-class/
parent reference. In case of nested pseudo-class or parent reference
it does not output a space after the colon.

Added general test for parent reference, nested pseudo-class and
SASS import statement. Added special test for issues beautifier#410 and beautifier#414.

Python:
Best effort to support parent reference and nested pseudo-class.
When it encounters a colon it checks if the colon is part
of a property: value or part of parent reference/nested pseudo-class.
In case of parent reference/nested pseudo-class it does not output
a space after the colon.

Added tests for reference/nested pseudo-class. Add tests for
issues beautifier#410, beautifier#414

Fixes issues beautifier#410 and beautifier#414
Related to issue beautifier#356
nponiros added a commit to get-the-service/js-beautify that referenced this issue Mar 18, 2014
JavaScript:
css beautifier checks if the colon it encounters
is part of a property: value or part of a nested pseudo-class/
parent reference. In case of nested pseudo-class or parent reference
it does not output a space after the colon.

Added general test for parent reference, nested pseudo-class and
SASS import statement. Added special test for issues beautifier#410 and beautifier#414.

Python:
Best effort to support parent reference and nested pseudo-class.
When it encounters a colon it checks if the colon is part
of a property: value or part of parent reference/nested pseudo-class.
In case of parent reference/nested pseudo-class it does not output
a space after the colon.

Added tests for reference/nested pseudo-class. Add tests for
issues beautifier#410, beautifier#414

Fixes issues beautifier#410 and beautifier#414
Related to issue beautifier#356
nponiros added a commit to get-the-service/js-beautify that referenced this issue Mar 18, 2014
JavaScript:
css beautifier checks if the colon it encounters
is part of a property: value or part of a nested pseudo-class/
parent reference. In case of nested pseudo-class or parent reference
it does not output a space after the colon.

Added general test for parent reference, nested pseudo-class and
SASS import statement. Added special test for issues beautifier#410 and beautifier#414.

Python:
Best effort to support parent reference and nested pseudo-class.
When it encounters a colon it checks if the colon is part
of a property: value or part of parent reference/nested pseudo-class.
In case of parent reference/nested pseudo-class it does not output
a space after the colon.

Added tests for reference/nested pseudo-class. Add tests for
issues beautifier#410, beautifier#414

Fixes issues beautifier#410 and beautifier#414
Related to issue beautifier#356
@dr-potato
Copy link

A fix for this would be great, it seems to be the only thing preventing jsbeautify from working with scss.

@Glavin001
Copy link

+1 I just had this happen, too. I am not familiar with js-beautify source code, so it would take me some time to work out a Pull Request.. Hopefully someone else can resolve this soon! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants