jasonsanjose / brackets-sass Goto Github PK

I tried to use the output option with a basic example and I couldn't get that it worked.

After debugging the code a bit, I found out that line 78 in main.js file don't return back the options object, therefore the following line never returns the output options parameter.

I tinkered with the code for awhile, but I couldn't get a clear result, because I couldn't also find a clear Brackets extension API.

Thanks.

I put .brackets.json file inside my root folder, restart brackets and everything but it doesn't work.

    "path": {
        "scss/app.scss": {
            "sass.enabled": true,
            "sass.options": {
                "includePaths": [
                    "bower_components/foundation/scss/"
                ],
                "outputDir": "../css/",
                "imagePath": null,
                "sourceComments": "map",
                "outputStyle": "nested"
            }
        }
    }
}

It is rendering inside scss folder instead of css, and also using includePaths isn't working either, as I need to use the full path inside my @include otherwise it won't work.

Using latest version of brackets and plugin. No other plugins are being used.

Puts out this error
Runtime error: Unable to load one of the modules: /Users/Chuck/Library/Application Support/Brackets/extensions/user/jasonsanjose.brackets-sass/node/1.1.4-1/SASSDomain, reason: Command sass.render already registered

Reported via YouTube https://www.youtube.com/watch?v=xSgkQc48aSw&google_comment_id=z13lw3crpyutv1y5004cgd3wbkrzjliek

I'm having a few problems with the compilation of scss files. I have installed your extension on brackets as well as node.js. My brackets.json is like this:

{
    "path": {
        "Common/sass/emkt-projectEditor.css.scss": {
            "sass.enabled": true,
            "sass.options": {
                "output": "../stylesheets/emkt-projectEditor.css",
                "includePaths": [],
                "imagePath": null,
                "sourceComments": "map",
                "outputStyle": "nested"
            }
        }
    }
}

But is not compiling. When i open the scss file, after a while, it shows: "SCSS has timed out after waiting for 10000 ms"

What am I doing wrong?

Depends on #3

TODO find core Brackets story for implementing simple selector parsing for LESS and SASS

have i possibility see scss compilation errors?

I'm guessing this is me doing something wrong, but I'm editing the .brackets.json file and it's not changing the output.

.brackets.json is located in the root folder, here's what I've got in it...

{
"path": {
/* default options /
"frontend/scss/recon.scss": {
"sass.enabled": true,
"sass.options": {
"output": "recon-sassy.css",
"includePaths": ["frontend/scss/partials/"],
"imagePath": null,
"sourceComments": "map",
"sourceMap": "recon-sassy.css.map"
"outputStyle": "compressed"
}
},
/ disable compiling @import files in this project /
"frontend/scss/partials/.scss": {
"sass.enabled": false
}
}
}

Tried a couple things now, but no matter what, I still get the .css file exporting the same way it did when I started.

It is doesn't work, and .brackets.json just like sample file.

Files Directory:

.brackets.json
README.md
css
index.html
js
scss

the css file and map file still in the scss directory.

Please help.

Brackets 1.0.

Leverage the preview() error callback to display compiler errors in the Brackets UI.

Using @imports seems to have issues with live preview on Windows. I'm setting up a basic Foundation project and importing a single partial, _grid.scss. My main style.scss compiles fine on save (using both the extension and the regular Sass Ruby command line), and live preview works when the import is removed, but with it present each keypress results in the following error in dev tools:

ENOENT, no such file or directory 'C:\Users\Kyle\AppData\Local\Temp\brackets-sass\wamp\www\socialDigital2014\bower_components\foundation\scss\foundation\components\_grid.scss'

The live preview indicator stays red. Everything works as expected when I load it in OS X, so I don't think this is an issue with my paths.

This is my .brackets.json:

{
    "path": {
        "scss/style.scss": {
            "sass.enabled": true,
            "sass.options": {
                "output": "/../css/style.css",
                "includePaths": [],
                "imagePath": null,
                "sourceComments": "map",
                "outputStyle": "nested"
            }
        }
    }
}

Brackets sprint 38, Windows 7 Home Premium x64, OS X Mavericks.

Hi ! :)

Thanks for this plugin (0.2.1-0), I feel it will help me for the future. I detected a problem with my output path. When I save one of my sass file (style.scss, typography.scss,...), it saves in the sass folder. However, the output path is relative. To see the screenshot. If you have a solution. Thanks

libsass doesn't support Compass http://compass-style.org/ (or vice versa). See sass/libsass#82 (comment).

Compass could be supported if we can leverage the work to swap in the ruby compiler #3 to also support using the compass command line tools.

On Ubuntu 14.04 (64bit) I get

Uncaught TypeError: Cannot call method 'forEach' of undefined /main.js:285
(anonymous function) /main.js:285
o.event.dispatch jquery-2.1.0.min.js:3
r.handle jquery-2.1.0.min.js:3
o.event.trigger jquery-2.1.0.min.js:3
(anonymous function) jquery-2.1.0.min.js:3
o.extend.each jquery-2.1.0.min.js:2
o.fn.o.each jquery-2.1.0.min.js:2
o.fn.extend.trigger jquery-2.1.0.min.js:3
FileSystem._fireChangeEvent FileSystem.js:685
(anonymous function) File.js:200
(anonymous function) AppshellFileSystem.js:426
(anonymous function) AppshellFileSystem.js:241
(anonymous function)

whenever Brackets loads. Seems to be coming from brackets-sass (this extension) and does not allow file compiling.

I checked the source of the code (/main.js:285) and it seems to be brackets-sass' fault.

Here is my .brackets.json:
https://gist.github.com/Mark-Simulacrum/9348001b9ab5e5b750cb

I'm not sure what's causing this problem, but the scss compiles fine.

.brackets.json file:

 {
        "path": {
            "library/scss/style.scss": {
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css/",
                "includePaths": [],
                "imagePath": null,
                "sourceComments": "map",
                "sourceMap": "style.css.map",
                "outputStyle": "nested"
            }
        },
        "library/scss/*.scss": {
            "sass.enabled": false
        }
    }
}

File strcuture:

bones
    /library
    .brackets.json
    index.php
        /css
            style.css
            style.css.map
        /scss
        style.scss
            /breakpoints
            /partials
            /modules

Dev tools screenshot:

I also get this message when I open live refresh and try to make a change: SCSS has timed out after waiting for 10000 ms

Everything is compiling fine, and I can manually refresh to see changes. But live refresh isn't working.

Brackets sprint 43 experimental build 0.43.0-14375 - Brackets SASS 0.4.5-53 - Windows 7 Home Premium x64

The fix for this Sass issue [https://github.com/sass/libsass/issues/15] is not fixed in this Plugin, maybe you need to update the Sass version. the Plugin still gives the error argument $color of grayscale($color) must be a color. It compiles fine with Sass now.

Hi, i just installed this plugin and pasted the following line into a new .scss file:

$map:(key1:value1,key2:value2,key3:value3);
(taken from http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps)

While saving: error: error reading values after key1 $map:(key1:value1,key2:value2,key3:value3);

Any suggestions? Do i have a problem with my brackets, or is this type not supported? Couldn't find any hints on this issue.

Greets,
Chris

See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials

In 1.0.0-68 I had to manually remove unused files in node_modules to workaround a limit in the extension registry.

I just started using Brackets, and I swear brackets-sass was updating the .css file in live preview last week. This morning, I updated to Brackets 40 and my .css file isn't updating anymore.

Thanks for all the work on the plugin. Hopefully it's an easy update.

Hi @jasonsanjose,

although the update notification in Brackets’ extension manager correctly indicates that a new version of brackets-sass is available, I’m not able to download it. Reloading and/or restarting does not resolve this issue.

Brackets Version: Release 43 development build 0.43.0-0 (master bcf91c521)
Current brackets-sass version: 0.3.1-0

Hi,

I was successfully using your plugin for some time, but today it occured one of my files is not compiling. It is main .scss file with around 30 files included. I have not made any changes to brackets.json. Could you please tell me how to find what can be wrong?

Seemingly, instead of showing me an error when the sass parser fails, all I get is: SCSS has timed out after waiting for 10000 ms

which can make it hard to nail down the problem...

I'm using the latest (stable, from the site) brackets release on Windows 8

Investigate issues using Bourbon 3.2.x, see http://bourbon.io/ and https://github.com/thoughtbot/bourbon#installation

• Create a boilerplate project in the issues repo https://github.com/jasonsanjose/brackets-sass-issues for testing

Tagging @byteblast

Hi Guys! Your plugin doesn't work with https://github.com/theproducer/brackets-ftp.
When I'm save SCSS file, that's compile CSS great, but don't upload CSS file to the server.
Do you have some solution?

file not found or not readable* at simple Google Web Fonts @import url("...") :/

.color-list {
    margin-top: 15px;

    li {
        float: left;
        position: relative;
        margin-top: 0px;

        .color-chip {
            box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
            border-radius: 2px;
            margin-bottom: 10px;
            margin-right: 10px;
            width: $color-chip-size;
            height: $color-chip-size;
            position: relative;
            cursor: pointer;
        }

        &:hover,
        &.selected,
        &.layer-over {
            z-index: 300;
            background-color: transparent;

            .color-chip {
                outline: none;
            }
        }
    }
}

.solid-color-list {
    @extend .color-list;
}

.gradient-list {
    @extend .color-list;
    margin-bottom: 26px;
}

Expected result:

.color-list, .solid-color-list, .gradient-list {
  margin-top: 15px; }
  .color-list li, .solid-color-list li, .gradient-list li {
    float: left;
    position: relative;
    margin-top: 0px; }
    .color-list li .color-chip, .solid-color-list li .color-chip, .gradient-list li .color-chip {
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
      border-radius: 2px;
      margin-bottom: 10px;
      margin-right: 10px;
      width: 27px;
      height: 27px;
      position: relative;
      cursor: pointer; }
    .color-list li:hover, .solid-color-list li:hover, .gradient-list li:hover, .color-list li.selected, .solid-color-list li.selected, .gradient-list li.selected, .color-list li.layer-over, .solid-color-list li.layer-over, .gradient-list li.layer-over {
      z-index: 300;
      background-color: transparent; }
      .color-list li:hover .color-chip, .solid-color-list li:hover .color-chip, .gradient-list li:hover .color-chip, .color-list li.selected .color-chip, .solid-color-list li.selected .color-chip, .gradient-list li.selected .color-chip, .color-list li.layer-over .color-chip, .solid-color-list li.layer-over .color-chip, .gradient-list li.layer-over .color-chip {
        outline: none; }

.gradient-list {
  margin-bottom: 26px; }

Hello.
I can't to compile "all.scss". Why?
BR.

I installed the latest version of Brackets and the latest version of brackets-sass and now my .scss file - that compiled fine yesterday - doesn't compile anymore.

I get this error:

When I remove the @import at-rule, the error persists.

When I arbitrarily comment out more code, I get this error:

In both cases, the .css file is never omitted.

I am not using a .brackets.json file in this case, nor am I using a Sass framework like Bourbon.

The code is available @ https://github.com/ByteBlast/byteblast.uk. @jasonsanjose, I sent you a collaborator invite so you can clone the repo.

Bizarrely enough, when I reduce the un-commented Sass to the following selector and block:

body { 
    font-family: "Lato";
}

The Sass compiles successfully and consequently, the .css is output 😕

Using this example: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#each-multi-assign

The compiler outputs: "error: expected 'in' keyword in @each directive"

I just installed Brackets on OSX, and jumped at this extension when I saw it. But it is not working for me, presumably because I don't have libsass (or node.js or anything like it) installed.

I've been trying to find how to install libsass, but it looks like no one has cared to explain it on the web, apparently because everyone trying to use it is supposed to know how.

Would you care to handhold me through the process, please? I'm sure I'm not the only one with this question here.

Thanks!

"Extension error" ??

Hai @jasonsanjose

I am using grunt-sass Version 0.13.1 for preprocessing scss files.
On My Windows computer, I can get the same css outputs in both Sublime Text 3 and Brackets 0.39.0 as well, except one feature.

In Sublime Text, I can see changes instantly by toggling scss files and css files without switching the editor to another application or windows.
But, in Brackets, I have only seen the changes once the Brackets itself switched with another external window or application. The updates are not reflected within the Brackets.

Because of this issue, I am really holding my permanent shift to the awesome Brackets.

I have extension error in v.42

I'm getting comments on compiled files something like
/* line 20, /Users/Desktop/Web/l/css/lib/variables.scss */

is there a way to stop it?

If the user has the sass command line tool installed, allow switching the compiler from the libsass compiler packaged with this extension.

Just installed SASS, and installed it for Brackets too. Now, I get an error:

Fatal node-sass error, signal SIGSEGV

Also, how do I compile the SASS into CSS? Can't find anything on it anywhere.

Hi, can you add this?

I'd love to see a short status message about how the SASS compilation went, e.g. in form of a short popup (e.g. like Koala). It should state that the SASS compilation was successful or that there were errors occuring during the process.

I hope it is possible to include this feature in a future version of the extension.
Thanks for the awesome work!

#Fatal node-sass error, signal=SIGABRT  

Got this error by using:

::selection
    background:$color700
    color:#fff

::-webkit-selection,
::-moz-selection,
::-ms-selection,
::selection

causes this error.

Welcome.
Tell me, please, what am I doing wrong?
I set up tracking and compiling only the style.scss, for the rest of the compilation is disabled. However, when i change any files compiles, but the main file is not modified.
Sincerely,
Alexey.

In compass there is a css import for CSS3 cross-browser compatibility. How can I import it so this plugin/ brackets can see it?

Currently I'm getting: "error: file to import not found or unreadable: "compass/css3" @import "compass/css3";"

I'm new to compass so I'm hopefully just missing something.

Many thanks :)

I've tried everything I could think of, but I cannot get the includePaths option to recognize included .scss files.

"You need to provide a path to the sass-convert program."

However, it seems to compile the scss into the css. It's just annoying to have this popup on each save. Ideas?

Hi,
after updating to Brackets 1.0 and Backets SASS 1.0.0-68, I get this Error:

Runtime error: Unable to load one of the modules: /home/rafael/.config/Brackets/extensions/user/jasonsanjose.brackets-sass/node/1.1.4/SASSDomain, reason: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.18' not found (required by /home/rafael/.config/Brackets/extensions/user/jasonsanjose.brackets-sass/node/1.1.4/node_modules/node-sass/bin/linux-x64-v8-3.14/binding.node)

I'm using elementary OS 0.2 Luna (it's based on Ubuntu 12.04.1) with a backported Kernel from Ubuntu 14.04 (linux-generic-lts-trusty). My system is up-to-date, no pending updates.

uname -a

3.13.0-39-generic #66~precise1-Ubuntu SMP Wed Oct 29 09:56:49 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux

The result of strings /usr/lib/x86_64-linux-gnu/libstdc++.so.6 | grep GLIBCXX is:

GLIBCXX_3.4
GLIBCXX_3.4.1
GLIBCXX_3.4.2
GLIBCXX_3.4.3
GLIBCXX_3.4.4
GLIBCXX_3.4.5
GLIBCXX_3.4.6
GLIBCXX_3.4.7
GLIBCXX_3.4.8
GLIBCXX_3.4.9
GLIBCXX_3.4.10
GLIBCXX_3.4.11
GLIBCXX_3.4.12
GLIBCXX_3.4.13
GLIBCXX_3.4.14
GLIBCXX_3.4.15
GLIBCXX_3.4.16
GLIBCXX_DEBUG_MESSAGE_LENGTH

It seems like you are linking against a library-version, which is not provided by the Ubuntu 12.04 repository...

Usually i can write my keyframes like this:

+keyframes anim
from
+transform(scale(0))
to
+transform(scale(1))

And automatically this will create all the vendor prefixes that i would need. However the "+" doesn't seem to work in brackets compiler :-) Please do correct me if i am wrong

First, thank you for the extension.
On default the scss file gets compiled into the same folder as the new css file. When I have several scss files in the folder project/scss/ and I want to compile all into project/css/ can I define a general output folder?

UPDATE: See workarounds here #29 (comment)

Using Windows Vista, I cannot use the extension manager to remove, it just gives a generic error and says brackets will reload. I tried to manually uninstall via Help > show extension folder and deleting the folder itself and I was getting a permissions error. I came to give you this info and realized I had two copies of brackets open at the same time. I closed them both down reopened it and it was able to uninstall the extension. Sorry that it was your extension. This seems to me to be a bug. I was getting another error on another extension I was trying to remove as well. It seems to be ok now, but just letting you know since it looks like you work for adobe. Just passing along the two open app error problem.

Happy Coding

As a developer, I would like SCSS compiled as both formatted and minified CSS - ready for uploading without any additional hassle.

Perhaps there's a way to interact with other plugins - for example, if popular minify plugin exists, run that plugin on this file.

Also, amazing work to date - I've learnt SCSS for this plugin!