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 installed.

Solution 1

You have to alter the PATH variable at the end of PATH string in the Environment Variables: Desktop - Properties - Environment Variables. It for win vista/7 users. Detail for 2000/XP here Sass compiler not working in sublime text 3

Solution 2

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.

Solution 3

here is 100% solution, as i also using. Actually i am using in mac so, i am not sure about windows because i wouldn't try yet in windows but i think it will works in window's too.

so here is the build;

copy this from starting brackets and paste it into build and then save with any name like (Build to CSS),"

{

    "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],

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

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

If it's working then please comment.

Thanks

Comments

[dspacejs]

That plugin is only for ST 2.