Sublime doesn't have any problem with this, but PhpStorm seems very picky about where it expands Emmet abbreviations. For instance, if I try to write an Emmet abbreviation inside of a Sass map, it won't expand:
$sass-map: (
w100p
)
Anybody know how to enable Emmet for all contexts in a PhpStorm Sass file?
Related
Duplicate Question?
Yes it is. But a little bit different from this
Overview:
I am also a new user of the brackets text editor. I know the difference between Scss & Sass. But the reason why I am using brackets text editor is for just Sass not Scss.
I saw some tutorials of Jason Sanjose for integrating Sass in brackets text editor. But I think. I am not doing it right. Below is my steps. What I am doing.
Install Sass for bracket using Extension Manager.
Install bower and bourbon
Create folder on root named: "SASS" and inside this folder create app.sass file.
Create folder on root named: "CSS"
Create a config file named: ".brackets.json" and put below code inside it:
{
"sass.enabled": false,
"path": {
"SASS/app.scss": {
"sass.enabled": true,
"sass.options": {
"outputDir": "../CSS/",
"includePaths": [],
"sourceComments": true,
"outputStyle": "nested"
}
}
}
}
and here is the snapshot also
Question:
When I write below code in app.sass file it is not converting it to css file or creating any css file in output directory.
body
background-color: black
Now my question is: Please explain me how I convert sass file in css or tell me what I am doing wrong in ".brackets.json" file or in my "app.sass" file.
After a lot searching on web. I found a useful article and my answer. Which I am sharing with you guys.
Brackets-SASS Plugin setup
Step By Step Tutorial Without migrating on other apps.
You don't need to install Sass in you text editor mate,only thing you need to install on your computer is Prepros,that software support sass/scss coffeescript typescript FTP upload and much more
I personally recommend installing Koala.app - it's fully automated and refreshes on save.
Text editors can come pre-packaged or with an addon that highlights SASS and SCSS, but all (which I know of) cannot compile it.
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.
Cloud9 IDE seems to support formatting/coloring for SCSS files, but there does not appear to be a setting in the preferences for SCSS files to be automatically processed into CSS.
The only way I have found to achieve this is add the SCSS gem, then leave scss --watch running in the background.
Are there any better ways than this?
You can enable this via the Run menu:
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.
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