Syntax-highlighting-for-Sass icon indicating copy to clipboard operation
Syntax-highlighting-for-Sass copied to clipboard

Need build-in completions

Open NemoAlex opened this issue 7 years ago • 12 comments

I can't find a completion better than old completions was in this package. Really need it back.

NemoAlex avatar Dec 08 '17 07:12 NemoAlex

I'm trying to add some completions. in .sublime-completion file:

	"scope": "source.sass support.constant.property-value.css.sass",

works great. But the property name doesn't work:

	"scope": "source.sass support.type.property-name.css.sass",

NemoAlex avatar Dec 09 '17 08:12 NemoAlex

The syntax may add "meta.property-name.css" and "meta.property-value.css" scopes to support completions. Those scopes could possibly used to add the completions supported by the default CSS.sublime-package

deathaxe avatar Dec 09 '17 12:12 deathaxe

Can emmet solve your issue?

screen shot 2017-12-09 at 10 47 26

In the old version, property name completions had a very basic scope source.sass, but I also added some scopes to prevent it popping up. For instance, they can't pop up when you typing an at-rule or property value. In the latest version, it's really hard to do that. So I suggest using the Emmet plugin, it's handy to trigger both property name and value with only an abbrev.

Managing scopes in the old way increased the complexity of maintaining this package and took up too much time, I am mainly focusing on the accuracy of the highlighting results. Maybe I will improve the completions support in the future. I am sorry for the inconvenience.

P233 avatar Dec 09 '17 13:12 P233

The default CSS package shipped with Sublime Text comes with a css_completions.py which at least handles property/value completions pretty well. It uses the both meta.property ... scopes to decide whether to provide value completion for a property or the name itself.

I am pretty sure it could be adapted to work with SASS/SCSS, too.

You are right with *.sublime-completions not being the correct approach for context sensitive auto-completions. They would need a dedicated scope for each property and therefore bloat the syntax-definition.

deathaxe avatar Dec 09 '17 18:12 deathaxe

@deathaxe Thank you for your advice, I'll take a look at the css_completions.py and see what I can do to enable it in this package.

P233 avatar Dec 10 '17 15:12 P233

@NemoAlex Could you try to add the following content

source.scss - comment - variable - keyword.control - entity.other, source.sass - comment - variable - keyword.control - entity.other

to the css_completions_scope setting field of emmet. It should have the similar property working scope like the old version.

P233 avatar Dec 10 '17 15:12 P233

@P233 I have tried this. Popup shows emmet's snippets but no CSS property names there. Same on property values. Both packages are latest version. (v1.20 for this package and v2017.03.23.21.16.14 for Emmet)

NemoAlex avatar Dec 11 '17 11:12 NemoAlex

I played the css_completions.py from the default CSS package for a while. It is definitely possible to borrow that feature into this package. But I need to improve selectors and property value scopes first. Will implement in the next major version :)

P233 avatar Jan 26 '18 13:01 P233

Today I received the message that my old Sass package was automatically replaced with the Syntax-highlighting-for-Sass package.

I didn't think much of this, until I realised that autocomplete had broken severely.

Previously, I could type something like this: text-a, TAB, r, TAB, which would output text-align: right;

Now, when I type text-a, TAB, it autocompletes to text-align but doesn't insert the colon or space after the property. So I have to do an additional SHIFT + :. Then I have to manually type the space. Then I can press r, TAB, which autocompletes right. Then I need to manually type the semicolon.

An absolute killer to workflow.

I don't understand what's happening - autocomplete does work, but not properly. The functionality should be exactly like css_completions.py on .CSS files - For properties, TAB should complete the property with a colon and space. For values, it should complete the value with a semicolon.

I've tried enabling emmet on SCSS files, but this removes the default completions, which is even worse.

For reference, the autocomplete from https://github.com/y0ssar1an/CSS3 seems to work really well too.

levymetal avatar Jan 31 '18 02:01 levymetal

Hi @levymetal, I understand you miss the CSS snippets of the original Sass package. In this case, you could download the CSS snippets from https://github.com/nathos/sass-textmate-bundle/tree/master/Snippets, and place them into the Sublime Text "User" folder for a temporary workaround.

You probably need to change all source.sass to source.scss if you mainly work with scss syntax.

P233 avatar Jan 31 '18 13:01 P233

@levymetal What you're getting is Sublime Text auto-completing from properties already entered in the current file. If you don't already have a text-align rule you won't get any auto-complete. If you do, it will complete just that word. I think that is just standard Sublime behaviour, not syntax-specific.

Snippets aren't really an alternative IMO. I don't want to learn special codes for all the CSS properties, it's much faster to start typing the real property.

svivian avatar Feb 14 '18 17:02 svivian

@P233 I maintain the LESS package and had copied the css_completions to it + slight modifications. It's good that I saw this thread, because @deathaxe's suggestion seems to work well without having to copy those completions, as long as the selectors match: https://github.com/danro/LESS-sublime/commit/7e293ba4e048119c6dfe07514775cd691d2f1e4b

If you're looking to update this syntax, perhaps we can base the scss portion of it on LESS. It's mostly the same anyway with some minor syntactic tweaks and it would provide a good backbone for most of the scopes. If you're interested I could give it a go and open a PR?

braver avatar May 03 '18 14:05 braver