medialize / sass.js Goto Github PK

Would love to see a benchmark comparing this to node-sass.

http://benchmarkjs.com/

When I use a full path with the import directive like...

@import '/apps/editor/sass.scss';

it fails with a...

file to import not found or unreadable: '/apps/editor/sass.scss'

Even though I have registered the file.

Sass.readFile('/apps/editor/sass.scss');
"body {color:red;} p {font-size:1.2em;}"

As long as I don't use absolute paths everything seems to work fine.

Any thoughts on this? https://github.com/sass/libsass/wiki/The-LibSass-Compatibility-Plan
Are you planning on upgrading to the latest LibSass version?

Thanks you guys!

I trying to use sass.js and sass.link.js (to compile scss on the fly), to Apache Cordova projects. How can I call javascript methods with sass.js?

For example, in less I will wrote:

@maxPxWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
@maxPxHeight: Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

How could we do this with sass.js?

Hi,
using sass worker with cdnjs ins't possible for access domain origin. Can be possible pass a blob with js sass worker code, or passing directly an instance of the worker?

Thanks

Related to an issue i'm looking into here

I notice on your playground this issue is not present. However, if we try to use explicit extensions in the @import like this :

@import './b';

@import './c.scss';

@import './d';

inside a file a.scss. sass.js attempts to resolve c.scss.scss. I'm able to capture this in the importer function and replace double extensions. But wondering if perhaps you have a better way to avoid this problem?

Currently mocha tests are only run on node. The test.html file is insufficient for proper automated tests. Add a runner to perform tests in a real browser. Extend in-browser-tests to also cover the worker API.

I want to be able to compile Sass synchronously like this:
var styles = Sass.compile(rawStyles)

Is there any way?

The reason is because I'm using this in React.js and if styles are set in a callback, it will delay rendering my component, which causes a content flash.

Currently using it in a callback like this (this runs in Node.js and browser but perhaps I could cut the browser support)

Thanks in advance!

Compare Sass.js results to the output generated by node-sass.

• compile styles "nested", "expanded" and "compact" seem to behave exactly the same
• compile style "compressed" prefixes every selector with &

I would like to include a SASS compiler in my Java app.

This seemed like a good idea since the JVM offers decent JavaScript engines.

I tried running the script using the latest version of Rhino. Basically, it gets hung up because web workers are not available in this context.

I tried running the sass.sync.js script.
Caused by: org.mozilla.javascript.EcmaError: TypeError: Cannot call method "slice" of null (file:/Users/fredfortier/Code/kwcn-post-13/kwcn-business-logic/src/test/resources/modules/sass/sass.sync.js#76)

Do you have any tips on how I could tweak things up to make them run in such context?

It would be really nice if we could install this via bower

As libsass.js is always interfaced through sass.js (even in libsass.worker.js) It makes sense to add a build step to combine these files. While we're at it, generate a second target that also includes libsass.worker.js (running inside the worker). The question how to configure sass.worker.js to find the worker-file remains open.

In Firefox 44.0.2, I do have:

SyntaxError: missing ] in index expression -- sass.worker.js :14:60

In Google Chrome Version 48.0.2564.109 (64-bit)
I do have:

Uncaught SyntaxError: Unexpected token ; -- sass.worker :14

When I switch to version 0.9.6 everything works.

Thank you

Hello,

I am trying to use sass.js in my nodejs app, but I am getting the following error:
"... no such file or directory path_to_my_project_dir\dist\libsass.js.mem"

This happens on the require('sass.js') line.

It appears I not only suck at life, but also at using git properly. Cloning sass.js currently leads to 29.26 MiB download and 43M of occupied disk space. (my personal system thinks it's 120MB, what an ego!)

The large size of the git repository is likely caused by the dist files, along with early commits of src/libsass.js if I remember correctly. I'm wondering if wiping these files from the history is a good idea. Should these build results rather be packed and attached to the releases in form of binary attachments?

• removing sensitive data
• removing file from commit history using git filter-branch

How do those binary attachments play with bower? By nature of npm's repository, it won't be an issue there…

The branch libsass-3.2.2 contains fixes for the changed C-APIs necessary to upgrade to libsass 3.2.2. Unfortunately the asynchronous importer breaks in that branch. I have no idea why this is happening (yet). The usual method of debugging (running with assertions and adding things to the empterpreter whitelist) doesn't help.

libsass dropped the emscripten wrapper. It needs to be moved to sass.js and somehow applied as a patch before building sass.js

I would love to have a way of using sass.js which is truly synchronous, i.e. calling compile() should immediately compile the code and return the result, blocking the caller. The current Synchronous API isn't synchronous, instead it just runs on the main thread in an async fashion.

This is in the context of an Electron apps where I often don't want async behaviour and I don't want to have the headache of native modules with cross platform issues. (node-sass isn't supported running in Electron.)

I'm trying to write a grunt plugin so we can use sass without having to install it on our CI machines. So nice work, this is going to help us a lot!

All the examples I've seen you're using only .scss syntax, and I haven't seen any parameter that I can set up to instruct that the string I'm passing has the .sass syntax.

Just a small notice, you forgot to change the year to 2016 😉

After preloading bourbon.io and my sass source files, the sass.js compiler keeps throwing this error:

argument `$color` of `lightness($color)` must be a color
Backtrace:
    sass/flattish/utils/_functions.scss:6, in function `lightness`
    sass/flattish/utils/_functions.scss:6, in function `set-text-color`
    sass/flattish/components/_buttons.scss:214

However, my stylesheet compiles with no errors in node-sass as well as in this atom package. I'm attempting to load and compile my entire project in sass.js

Hello,

i preload a file with preloadFiles method but i can find a way to compile files preloads.. could you help me ?

In the current build process of codemagic, I concatenate all the javascript files and then uglify them.
It worked perfectly before including sass.js but after I did the project stopps working once I concat and uglify. This issue happens only in Firefox browsers (tested in latest stable (26) and latest nightly (29)).

TypeError: asm.js type error: expecting argument type declaration for 'a' of the form 'arg = arg|0' or 'arg = +arg' or 'arg = fround(arg)' script.js:4

SyntaxError: invalid increment operand script.js:36

First i tried v0.6.3 from CDN:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sass in browser</title>
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.3/sass.min.js"></script>
    <!--script src="bower_components/sass.js/dist/sass.js"></script-->
    <style id="csscode"></style>
    <script>

      //Sass.initialize('bower_components/sass.js/dist/sass.worker.js');
      function compileCSS(color) {
      //Sass.compile('$color: ' + color +  '; h1 { color: $color; }', function(result){
      //console.log('result: ' + result);    
      //});
      var css = Sass.compile('$color: ' + color +  '; h1 { color: $color; }');
      console.log(css);
      }
      compileCSS('orange');
      console.log('done......');
    </script>

</head>
<body>
</body>
</html>

The above writes to the console as expected:

SyntaxError: "use asm" is only meaningful in the Directive Prologue of a function body sass.min.js:1982:107
"pre-main prep time: 39 ms" sass.min.js:55:137
"h1 {
color: orange; }
" t:20:6
"done......"

Then i replace //cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.3/sass.min.js with //cdnjs.cloudflare.com/ajax/libs/sass.js/0.6.3/sass.min.js now the output is as follows:

TypeError: b._worker is null

Finally i also tried: bower install sass.js -> bower sass.js#~0.8.1 install sass.js#0.8.1 and after that i use in the HTML:

<script src="bower_components/sass.js/dist/sass.js"></script>

and

 Sass.initialize('bower_components/sass.js/dist/sass.worker.js');

the latest setting only sets css to undefined:

undefined t:19:6
"done......" t:22:6
SyntaxError: "use asm" is only meaningful in the Directive Prologue of a function body >sass.worker.js:1907:60

So how can i use my code with version 0.8.1 in browser? Notice using Sass.compile(source, callback) also result in undefined;

  Sass.compile('$color: ' + color +  '; h1 { color: $color; }',function(result) {      
  console.log('result:' + result);
  });

Does not generate any output other than:

"done......" t:25:6
SyntaxError: "use asm" is only meaningful in the Directive Prologue of a function body

If I have a lalala.scss file, like so:

@import 'bourbon/bourbon';

or something like:

@import 'mixins';

Should Sass.compile(text) read the @import and render it?
Or should I use first Sass.writeFile(filename, text); and then compile it with Sass.compile('@import... blablala); ?

Thanks!

As the subject line says, I'm using Sass.js in Node. (It's a more effective cross-platform solution for a node-webkit app.) However, when I use the "compileFile" function, it prepends "/sass/" to the file path (and throws an error saying that the file can't be found, of course). Any idea why this happens and how to prevent it?

I'm running into an issue where I need a separate instance of sass.js per compile, but it appears that sassjs is a singleton.

My use case is that for each file I compile, I cache its directory as a base url and in my custom importer I use that base url to determine the relative path. I'm enclosing that base url in a closure, but anytime I set importer it overrides the previous importer (because sassjs is a singleton) and I'm stuck with the last base url that was set.

Any ideas on how I can get around this? Thanks!

Hi there

Pretty cool stuff you got here :)

Also wanted to give you a heads up that I created a script to resolve/compile linked scss files directly within the browser (I have borrowed pretty much anything in this perspective from less.js), the rest does sass.js.

I also had to add a very small patch to sass.js to have a hook to dynamically load imports via XHR. It's really not much more than a proof of concept at the current state, but maybe you'd like to take a look:

https://github.com/mgreter/sass.link.js
https://github.com/mgreter/sass.js

http://ocbnet.ch/sass.link.js/example/

Have a nice day
Marcel Greter

Will libsass.js compilation with exceptions add a lot of extra weight to it's current size? It'd be great if we could get some Sass compilation error messages.

I am using sass.js in one of my Cordova projects running on an Android device. I use sass.js/dist/sass.js that uses a WebWorker. Unfortunately I get a Uncaught DataCloneError: Failed to execute 'postMessage' on 'Worker': An object could not be cloned error message.

Is there something I can do? On my desktop Browser it works as expected.

It would be great if you could make the libsass AST accessible via JSON. So we have raw access to it in JavaScript. One use cases would be to identify variables and generate a ui like data.gui to manipulate the style after compilation.

Would it be possible for you to generate a version of Sass.js that doesn't use typed arrays, and thus works under PhantomJS?

I guess it'd require modifying the js target in the libsass Makefile, adding -s USE_TYPED_ARRAYS=0 here: https://github.com/sass/libsass/blob/v2.0/Makefile#L49

I would try myself, but for some reason I can't even compile an unmodified libsass...

I think it'd be awesome if there was a way to define a function like how node-sass does: (from sass/node-sass#644)

sass.render({
  data: '#{headings(2,5)} { color: #08c; }',
  functions: {
    'headings($from: 0, $to: 6)': function(from, to) {
      var i, f = from.getValue(), t = to.getValue(),
          list = new sass.types.List(t - f + 1);

      for (i = f; i <= t; i++) {
        list.setValue(i - f, new sass.types.String('h' + i));
      }

      return list;
    }
  }
});

Right now, thanks to import hooks, some half dynamic functionality can be put into styles (like inserting the current date into a comment could be done by stuffing it into a variable in an imported "file") but custom functions could potentially allow for something like compass to be used by sass.js

Hello,

is it possible to make a live edit page that compile twitter bootstrap scss ? (like lessjs can dot it)
thank you !

Have been testing out scss.js and so far I love it; way better than the PHP compilers I've toyed with! That said, I keep getting the following error whenever I try to compile .scss files with any @import statements (project config deets below):

{ status:    3,
  message:   "map::at:  key not found",
  formatted: "Internal Error: map::at:  key not found↵", }

Haven't been able to debug of my own accord so any solutions/suggestions/pointers/tips/etc. would be much appreciated!

Files

The project architecture looks something like this:

web/               #=SERVER ROOT
├ index.php        # script runs from here
├ lib/             #=BOWER COMPONENTS
│ ├─ sass.js/      # sass.js installed here
└ styles/          #=SASS BASE
    ├ test.scss    # main SCSS stylesheet
    └ _import.scss # @imported SCSS partial

Note:
I'm using Grunt to spool a local PHP server. The above tree has been condensed for clarity; it only shows the server's root directory, rather than the entire top-level Grunt project directory. (There are a few other PHP files on the server, as well as some Grunt config files in the top directory.)

Javascript

My scss.js configuration looks like this:

$(document).ready(function(){

Sass.setWorkerUrl('lib/sass.js/dist/sass.worker.js');
sass = new Sass();

sass.importer(function(request, done) {
  // understand the concept but unsure what
  // I should do with this method, or if it
  // might help solve the source maps error
  console.log(request);
  done();
});

sass.preloadFiles(
  '../../../styles/', // root sass dir
  '', // directory
  ["_import.scss", "test.scss"],
  function(){
    sass.listFiles(function(list){console.log(list)});
    sass.compileFile('test.scss',function(result){console.log(result)});
  }
);

});

There're also some other JS scripts that're included beforehand:

<script src="http://localhost:35729/livereload.js"></script> <!-- local livereload script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- jquery, duh -->
<script src="lib/sass.js/dist/sass.js"></script> <!-- sass.js, wahoo! -->

SCSS Structure

Since this is a test implementation, my .scss files are extremely simple:

//=file: styles/test.scss
@import "import"

//=file: styles/_import.scss
.test {
  $var: 123px;
  content: $var;
}

Miscellaneous

Some other potentially pertinent details:

• Operating System: Mac OS X (10.11.3)
• Server: local server on 127.0.0.1:500 (via grunt-php with livereload)

We need to figure out how to track (and present) the version of libsass that was emscripted. The current libsass.js was built from libsass master on January 13th - but that's not mentioned anywhere…

This also raises the following questions

• is it's ok to build from master, or if we should only build from the latest tag (currently v1.0.1)?
• How do we make sure that we're informed of new libsass versions?
• Do we have to provide multiple builds (one per libsass version) for compatibility to node-sass?
• can we automate the process of
  • new libsass version available
  • compile libsass.js with emscripten
  • build sass.js from new libsass.js
  • run tests
  • tag and publish to github/npm

I can't seem to be able to require('sass.js') with browserify.
I'm getting the following error:

Error: Cannot find module 'ws' from '/media/adonisk/linux/repos/browserify-sass/node_modules/sass.js/dist'
    at /home/adonisk/.nvm/v0.10.24/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:50:17
    at process (/home/adonisk/.nvm/v0.10.24/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:119:43)
    at /home/adonisk/.nvm/v0.10.24/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:128:21
    at load (/home/adonisk/.nvm/v0.10.24/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:60:43)
    at /home/adonisk/.nvm/v0.10.24/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:66:22
    at /home/adonisk/.nvm/v0.10.24/lib/node_modules/browserify/node_modules/browser-resolve/node_modules/resolve/lib/async.js:21:47
    at Object.oncomplete (fs.js:107:15)

Unexpectedly, I can't use the ">" top level selector!

Hi there,

Thanks so much for your time and efforts on sass.js, really great work.

Long story short, the framework I'm using requires libsass 3.3, so unfortunately I cannot use sass.js as it uses Libsass 3.2.5.

(FYI - referenced issue: sass/libsass#1491)

Do you have any plans to update the version of Libsass used? I would love to be able to use sass.js for my project.

Thanks

EDIT: You know what, you can ignore this. I was confusing the current version of Sass with the current version of Libsass. Can you blame me? On the official libsass page at the bottom is says "Current Release: Selective Steve (3.4.17)" - of course this is referring to Sass and not Libsass.

The sass.sync.js file seems to require the "ws" package under certain conditions (when in NodeJS), but that package isn't in the list of dependencies of the package.json. Is that intentional?

This is preventing sass.js to be used in NodeJS from JSPM, which I need to do as part of my Sass plugin for SystemJS.

Thanks for this great project though, the plugin wouldn't be possible without it!

Wenn launching http://medialize.github.io/sass.js/ I get an error in dev console:
Uncaught 5300312 in /sass.js/dist/worker.min.js:5544
And the [Convert] Button does not work.

I'm running Chrome Version 41.0.2267.0 dev-m (64-bit)

Any change we can make it so it's possible to pass a callback to Sass.writeFile, so that files only need to be loaded into memory whenever the actual file is loaded.
Working on a project that got a lot of deps to stuff like Bourbon, Foundation etc so it's hard to know what files to load and what not, so everything need to be standby.

I am using the latest dist from master with the preloadFiles function. My use case is that I am compiling some scss with variables that change when a user selects different styles from a form. They are then able to preview how the css changes will affect their web page.

This is a rails application and I am adding the dist files in my application.js and since I am not using web workers I commented out the importScripts call in worker.js.

Everything works marvelously with Firefox. However in Chrome I get some inconsistent results. If I do a hard refresh of the page everything works. However, often when returning to the page it compiles correctly on page load but then it fails when I try to change the sass variables (note that I am doing a search and replace on the scss before compiling).

I can still read the scss files in the console using Sass.readFile but when I try in the console to compile I get:

     var css = Sass.compile('@import "base"; @import "theme"; @import "modules";')
     undefined
     css
     Object {line: 1, message: "file to import not found or unreadable: ↵Current dir:"}

Have you run into this before? I suppose it has something to do with caching.

Thanks for any advice you might have to offer.

Assume this scss code

.class1, .class2 {
div:not(.last) {
background:red;
}
}

After compiling I get

.class1 div:not(.last, .last), .class2 div:not(.last, .last) {
background: red;
}

another example

.class1, .class2, .class3, .class4 {
div:not(.last) {
background:red;
}
}

.class1 div:not(.last, .last, .last, .last), .class2 div:not(.last, .last, .last, .last), .class3 div:not(.last, .last, .last, .last), .class4 div:not(.last, .last, .last, .last) {
background: red;
}

As you can see the .last class is getting duplicated by the number of global class counts.

node bin/benchmark.js

gives

Error: Cannot find module '../dist/sass.min.js'

and there is really no such file
so I've corrected it to sass.js and got this:

sass.js: 
node-sass: 
Fastest is 

I've tried using:

Sass.options({
    style: Sass.style.expanded
});

And it doesn't seem to work. I can't tell you much more :P

Hey, could you publish a compiled version of sass.js with exceptions enabled?

Thanks!

Hey, I've been having some difficulty getting the Sass.preloadFiles() method to consistently load the most recent contents of my SCSS partials. On initial compile this works as expected. But, when I make some changes to my partials and then try to recompile it doesn't always pull in the most recent changes. Sometimes it correctly loads in the updated files, but the other half of the time it doesn't and I have to reload the page to get it to pull in the changes.

I'm not sure if I'm using it incorrectly (maybe I only have to run preloadFiles once, and it'll just magically pull in changes?) or if I should be using a different method (such as lazyFiles?) or what! All I know is I want to consistently pull in the most recent files without refreshing the page.

Lemme know re: any tips or if ya have a question about my setup. Any/all help is much appreciated in advance!