How to compile Sass to CSS in Sublime Text 3 automatically?

Question

For example, there is package for less LessToCss. As for Sass(or SCSS) I don\'t know what i should do. Ruby and sublime package Sass are in

Answer 1

One way is to download a SASS build compiler from here: SASS Compiler This is automatic Sublime package that simply builds your file at the place. However since they released the new version, there seem to be multiple settings on this package - you could try to mess with that a bit and see what it can do nowdays.

Second way is to write your own Build command in Sublime. You do this by going to "Tools>Build System>New Build System..."

{

    "cmd": ["sass", "--update", "$file:${project_path}/Project/Web/css/${file_base_name}.css", "--stop-on-error", "--style", "compressed", "--no-cache", "--sourcemap=none"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

Explanation: I use a folder structure as the following: Project/Web/CSS - If you have the Sublime Project FILE at the same level as Project FOLDER, then this will automatically build your Sass file (placed ANYWHERE in the project file) in your Web/CSS folder. Of course you can change this as you see fitting.