I'm experimenting with BEM syntax on a project that uses SCSS. My editor is Sublime Text 3 and I'm using SCSS syntax highlighting.
The problem I'm experiencing is that when I nest using the & parent selector as per this article by Mike Fowler, Sublime highlights it red. Here is an example:
The code compiles fine, I'd just prefer that Sublime not flag these as errors.
Can anyone help config Sublime to do just that?
I suggest using the Syntax Highlighting for Sass package for syntax highlighting. Using it and the Neon Color Scheme, which fully supports all the scopes in the Syntax Highlighting for Sass package (disclaimer: I'm the theme's maintainer), your code looks like this:
with no errors (green is a class name, and & is recognized as a special SASS/SCSS symbol). I'm not sure what package you're currently using for SCSS highlighting, but it obviously doesn't recognize the leading -- characters, or anything following leading __ characters, as valid. Switching over to the new syntax highlighting package should help.
I fixed this when I had this issue by selecting View>Syntax>SASS>SCSS This is apparently caused by downloading the original SASS package Sublime.
Related
When I open the Sublime Text editor all text colors go white and there is no exact font color tag wise.
Error while opening sublime text editor:
Error loading syntax file "Packages/Laravel Blade
Highlighter/blade.sublime-syntax": Apparent recursion within a
with_prototype action: 25000 context sanity limit hit
I got the same problem few days ago, and I found there is a solution; a CSS 3 package is making trouble working with the Laravel Blade Highlighter package. You should disable the CSS 3 package with Package Control: Disable Package CSS3 on the command palette, restart Sublime Text, and then it will work as expected.
There you can read the comment:
Hi, I'm the author of CSS3. I was able to reproduce the issue when
both the default CSS package and CSS3 were enabled. I recommend
disabling the default CSS package in my install notes, but I
understand that many people can't do that because they use a package
that depends on the default CSS package (like Laravel Blade).
The clumsy workaround is to enable/disable CSS and CSS3. When you're
working on blade files, you can Package Control: Disable Package CSS3
and enable CSS. If you're working primarily with pure CSS files, I
recommend disabling CSS and enabling CSS3.
Sorry, I know that's an awkward solution. If I think of something
better, I'll post it here.
This is my first post on stackoverflow, and I'm glad to be here.
So I have a syntax coloration issue with Sublime Text 3 in a single file .ctp (Cakephp Template). I use Php and Html in this same file. The coloration doesn't seems to work in the wrapped language.
Example
What could I do ?
You should probably install the CakePHP package, since it adds syntax highlighting for those template files
After tweaking with "Syntax > html" and "Syntax > php" I get the correct coloration for this case. But in Php files, when you're making a helper for exemple, it's still broken for somes parts.
I use Sublime text 3 and installed plugins Sass, Syntax Highlighting for Sass, CSS Completions and CSS Extended Completions, but when I work with .scss, there aren't any auto-complete options for CSS keywords.
I followed this post, where isn't mentioned auto-complete functionality and this post, where is mentioned only emmet.
Anybody knows how to add sass auto-complete to sublime text 3?
The problem that you are likely running into is that Sublime is loading your .scss file with Sass syntax. The Sass syntax is a bit different than SCSS (they did away with the curly braces and semi-colons. If you go to this link you can see the difference between the two). To get your .scss files working you will need the SCSS plugin. Install it and set the syntax to SCSS and the auto-complete should start working for you.
I'm using Dreamweaver CS4 and have only started using SASS for my workflow. My only problem is when I code on style.scss, using SASS syntax, Dreamweaver colors / highlights the syntax like normal CSS, hence, I find it a bit confusing or as if something is wrong.
Example:
It just looks untidy and inconsistent. So, is there a Dreamweaver plug-in that will change the color-coding / highlighting to be SASS-based (so to speak)?
Is there a way to make autocomplete work for scss in the same way it works for css?
For example I type backg and then tab and it gives me background:; but not in scss files...
I have installed all packages to support scss... but there is only syntax highlighting that is working.
You can install Emmet (formerly Zen Coding), it is an extremely powerful tool to do css (and scss), example :
I type bi and press tab and it gives me : background-image: url(|); (with the | your cursor).
If you are interested, please take a look at this:
Emmet for sublime, and all the abbreviation (Emmet is very good with HTML too -- look what is happening when you type, for example, nav>ul>li...)
Now, how to make it works with scss:
The answer is here
You have to install the package sass-textmate-bundle for scss and do what I have wrote.
If you need sass and not scss, check this answer, especially the second response from Alexander Ekdahl