Sublime Forum

**thenomadicmann** · January 15, 2018, 5:05pm

Can’t figure out how to delete my post, let this die

**miroslavgeorgiev** · November 17, 2017, 1:13pm

Both Sass and Scss packages for Sublime Text are pretty old (2 years and 4 years).
Currently using SCSS package is the worse choice, especially for BEM Sass syntax - it is a huuge mess.
Better choice is just Sass package and maybe Syntax highlighting for Sass - it kinda do the work for both .sass/.scss files - still has issues unfortunately.
It is very sad there is no official built in package for Sass in ST3.

Visual Studio Code is much better in supporting Sass/Scss - but I still like ST more. For now.

**wbond** · November 17, 2017, 2:03pm

It sounds like the SCSS syntax should be re-written on top of the default CSS syntax. There has been a bunch of work on that in the past two years.

**miroslavgeorgiev** · November 17, 2017, 2:42pm

This should be the best decision for the problem - a new built-in sass package based on the existing built-in css package (that you have rewritten for ST 3.0) with support for Sass 3.x.x (3.5.1 seems to be the current version).

I love ST and it is still the most used editor, especially for frontend, but if it lacks built-in Sass support (and nowadays Sass is the industrial standard everywhere) and the only options is using third-party packages (2-3 years old and not maintained) it will turn many frontend developers to use other editors like VS Code.

**wbond** · November 17, 2017, 3:42pm

Which would leave you in the same situation, where you have an open-source, community-written SCSS syntax?

**thenomadicmann** · November 17, 2017, 6:37pm

Do you know what kind of work has been done? And do you know if SASS/SCSS support will become built-in any time soon?

As @miroslavgeorgiev said, I am a front-end dev and I love ST3 but it’s gut-wrenching that these syntaxes aren’t fully supported.

**wbond** · November 17, 2017, 8:10pm

Yes, I review all package updates that get shipped with Sublime Text 3. Here is a history of the work done on the CSS syntax: https://github.com/sublimehq/Packages/commits/master/CSS/CSS.sublime-syntax.

The only additions that I know we will make to the default packages is JSX and Swift. This thread is the first request I’ve even heard for adding SCSS by default.

In general we aren’t going to be adding many more syntaxes to the defaults because every package we add takes up more core editor development time. We have a bunch of awesome community members that contribute a ton to fixing bugs and improving things, but ultimately it is the Sublime HQ team who ends up being responsible for the maintenance. Because of that, and our desire to keep making Sublime Text itself better, we have to balance where our time gets spent.

We are definitely willing to help guide users along who are interested in developing a syntax to distribute via Package Control. The Discord channel is where most of the more active community members hang out, along with Jon and myself. There are lots of examples in the default packages that can help if you want to get involved, and there is documentation about the syntax definitions and test suites also:

**deathaxe** · November 18, 2017, 10:07am

I am absolutely with @wbond. ST is very great and open piece of software which is designed to be extended with packages, which work as well as built-in functions. Maintaining packages and/or syntaxes is a very time expensive task and requires deep understandings of the particular language to catch all details.

Adding such a syntax to the core may make things easier for new users, but is much less flexible than managing such a package separately. Unfortunately most packages are/were maintained my single users who often gave up for some reason.

Visual Studio Code is much better in supporting Sass/Scss

The built-in sass/css syntax of VS Code is just a (pirated) copy of Atom’s sass/css syntax definition. The later one is JSON format which might be converted to a .sublime-syntax file using a package/technique like Atomizr does for completions. (I did not try it right now)

**miroslavgeorgiev** · November 18, 2017, 10:40am

This is absolutely true - it will require a lot of work to be done and maintained.

It is also true that ST is if not the most used, at least in Top 3 editors in the frontend field and supporting core package as Sass is critical feature to me.

Sounds a good idea!
If it doesn’t require a lot of work maybe @wbond could put this in the feature list

**braver** · November 18, 2017, 1:58pm

The core devs don’t need to be involved and there is zero advantage to having them involved in maintaining a Sass/Scss package. It slows down releases of that package, while the quality of the package is still in the hands of community. There just needs to be a good package available in package control. You’re just a few pull requests and some scripting away from that, so why don’t you make that a reality?

**thenomadicmann** · December 9, 2017, 8:25am

@braver To be honest, I’m a complete noob of a developer and have very little programming experience, but I’d be stoked to learn how to update the package. It could be a really great learning experience. Do you have any advice on where to get started? I don’t know the first thing about building a Sublime Text package

**deathaxe** · December 9, 2017, 8:39am

For anybody having trouble with the quite old SASS/SCSS package, here is one which was rewritten for ST3 recently. It seems under active development again after some idle time. So you might get bugs fixed if you find and report them.

https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20Sass

**deathaxe** · December 9, 2017, 9:33am

Make sure to set syntax to Sass. I found Theme - Mersi on my box to define an empty SASS syntax, which results in highlighting not to work. Maybe you have some interfering packages enabled?

Highlighting sass/scss seems to basically work for me here.

Nested selectors seem to work for me, too.

SASS

.container
    width: 100%
    h1
        color: red

SCSS

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

Issues

If you experience issues with this package you could file an issue at https://github.com/P233/Syntax-highlighting-for-Sass/issues with a detailed description and a peace of code as example.

About completions

The SASS/SCSS package doesn’t provide completions on its own.

CSS properties and value completions are provided by the CSS package shipped with Sublime Text. It handles source.css only. Therefore ST doesn’t suggests anything within SASS/SCSS right now.

github.com

sublimehq/Packages/blob/ce7af4d6177d0340230893e49742070ae4143246/CSS/css_completions.py#L449




    return props


class CSSCompletions(sublime_plugin.EventListener):
    props = None
    regex = None


    def on_query_completions(self, view, prefix, locations):
        # match inside a CSS document and
        # match inside the style attribute of HTML tags, incl. just before the quote that closes the attribute value
        css_selector_scope = "source.css - meta.selector.css"
        html_style_attr_selector_scope = "text.html meta.attribute-with-value.style.html " + \
                                    "string.quoted - punctuation.definition.string.begin.html"
        selector_scope = css_selector_scope + ', ' + html_style_attr_selector_scope
        prop_name_scope = "meta.property-name.css"
        prop_value_scope = "meta.property-value.css"
        loc = locations[0]


        # When not inside CSS, don’t trigger
        if not view.match_selector(loc, selector_scope):
            # if the text immediately after the caret is a HTML style tag beginning, and the character before the

You’d need a modified completions plugin. I am not too familiar with SASS/SCSS. Therefore I can’t tell you right now, which modifications are needed to add correct completions.

The mentioned SASS/SCSS package at least would need to implement the meta.property-name.css and meta.property-value.css scopes to make these completions work properly.

Updated SCSS Syntax Thread - Let Die

Issues

About completions