Sublime Text 2: How to get scss and Less files to

Question

I'm using Sublime Text 2 and the css.scss and css.less files are in all white text - the comments, brackets, syntax - everything. If I look at my regular css files, they have color to differentiate all of the above. Has anyone else dealt with this? Is this some bug I'm getting? How could I add my own color or take the same settings from the regular css file and add it to the less and scss one's?

Answer 1

You can set the syntax for any specific extension. Please see this:

http://www.codechewing.com/library/set-default-syntax-highlight-for-different-filetypes-sublime-text/

Open the corresponding file with .scss/.less extension. From the menu at the top, goto View > Syntax > [Optional: Open all with current extension as...] > CSS

Answer 2

The best way to install package for viewing coloured less syntax in sublime text is following this link:

https://sublime.wbond.net/installation#st2

That is because here there are instruction on how to do in case the command line written in the precedent answer doesn't work. There are also two different command lines for different versions of Sublime Text.

After package is installed you will see the LESS category in the View>Syntax menu option.

To me it helped a lot. Hope it works for you too!

Answer 3

Install the less and sass plugins through the package manager to get the correct syntax highlighting for those file types.

Answer 4

You can install the package manager by using copying the following code and pasting it in the sublime text console (view -> show console) :

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

When it's installed you press ctrl+shift+p, write install then click on install package. On the screen that comes up write sass then click on the sass syntax package. When that's finished just open your scss file, press ctrl+shift+p then write sass and click on "set syntax: sass"

Answer 5

1. In SublimeText Preferences > Package Control.

2. Select "Package Control:Install Package".

3. Now type "LESS" in the box. Click on first option which appears.

4. Restart Sublime.

5. Open the LESS file

6. View > Syntax. Select LESS

Same follows for SASS even

Answer 6

If Package Control is not installed on your Sublime Text you can install package manually.

To install LESS package manually follow this procedure:

1. Download the LESS package : https://github.com/danro/LESS-sublime/archive/master.zip
2. Unzip the archive package
3. From Sublime Text go to Preferences → Browse Packages...
4. Copy/paste the package folder into the new window just opened
5. Restart Sublime Text
6. Open a .less file
7. Go to View → Syntax → Open all with current extension as... → Less

To install SCSS package you must do the same procedure.
SCSS package direct download : https://github.com/MarioRicalde/SCSS.tmbundle/archive/master.zip

Happy coding!