Wednesday, April 20, 2016

Sublime Text 3 with Sass Support

Leave a Comment

Since Bootstrap changed from less to sass... I have to use sass now. I somehow can't find an easy solution for having auto-completion and auto-compiling on save for Sublime Text 3.

Does anyone know a Plugin or something which gives me these features?

I want to be able to specify where the compiled css should go, where my custom-sass files are and where bootstrap is located. :)

Thanks

3 Answers

Answers 1

There are a lot of tools which allow you to build your CSS assets from SASS files (including Bootstrap-SASS).

From Sublime Text:

You can use one of the better I've seen and used: Syntax Highlighting for SASS

I assume you know how to install packages in Sublime (if not, follow this instruction here: https://sublime.wbond.net/installation)

Recommendation:

When working with SASS, I always recommend to use the command-line to compile your SASS (using a Task-Runner like Gulp, Grunt or Webpack). In my daily workflow, I use Gulp, Browsersync and Autoprefixer when working with SASS assets.

Hope that helps!

Answers 2

I'm with @Carlos Bensant about using the command line while working with Sass, and all the task runner he suggests are interesting tools. However, if you don't want to deal with a bunch of extra configuration, that you may don't need, but want to compile Sass to CSS and have all the process control, I'd hardly recommend using Compass. In config.rb file, you set where your Sass, CSS, images and JavaScript files are located, what extensions to require, what syntax you prefer, the output style and much more.

You can also check this fast and easy tutorial for getting started and have everything properly installed :D Compass is really easy to configure and use!

You also have this Sublime Text plugin that seems to work like Compass except for the command line, I personally never used it but I'm going to test it too.

Hope that helps!

Answers 3

I combine the SublimeOnSaveBuild and "Sass Build" packages. This will automatically (assuming you have SASS on your computer) do the build when saving. However, there are no options. It simply builds the css file to the same directory (and with the same filename) as the scss file.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment