A SCSS plugin for Light Table.
Installation is simple. Find the SCSS plugin in LightTable's plugin manager and click "install".
A bit of setup is required to get this plugin up and running.
This plugin uses node-sass to render SASS performantly. This package implements a C library, so the host machine's architecture taken into account. Unfortunately, this means you'll most likely have to rebuild node-sass using nw-gyp so LightTable (more specifically, node-webkit) can understand we're using node-sass without looking at us like we're crazy.
I've prebuilt an OS X binary on my Mac using 10.9 Mavericks and LightTable 0.6.4. There is also a prebuilt binary for 64bit Linux.
Other operating systems have pre-placed folders for later reference in case you're rebuilding node-sass.
Here's a step-by-step guide to get the package up and running (if this is giving you trouble, please open an issue!):
- Open up a terminal, crack your knuckles.
- Install nw-gyp
npm install -g nw-gyp - Navigate to your plugins folder:
- OS X:
cd ~/Library/Application Support/LightTable/plugins/ - Linux:
cd ~/.config/LightTable/plugins/ - Windows:
cd %APPDATALOCAL%/LightTable/plugins/
- Change directory to the SCSS plugin's node-sass build:
cd SCSS/node_modules/node-sass - Rebuild the node-sass binary:
nw-gyp rebuild --target=0.8.4(LightTable currently uses node-webkit 0.8.4) - Find the proper binary directory, labeled as
[os]-[arch]-v8-[version]:ls bin/. In my case it wasdarwin-ia32-v8-3.20. NOTE: node-webkit seems to use Node3.2.0and does not currently support 64-bit versions on OS X or Windows. - Copy over binding.node to its respective binary directory. For example:
cp build/Release/binding.node bin/darwin-ia32-v8-3.20/binding.node
You should be good to go! Fire up a browser tab and open a .scss file to start hacking away.
Evaluation occurs similarly to the CSS plugin:
ctrl/cmd + Enter will send the code to a client, either a browser tab or the LightTable UI. Evaluation also occurs automatically on save.
When evaluating without a configuration file, @import statements are currently supported, but with a stricter syntax.
SASS allows this:
@import "foo/bar", "foo/baz";But you'll have to write these imports on a new line:
@import "foo/bar";
@import "foo/baz";Again, you only have to follow this convention if you aren't using a configuration file with an includes option. See below for further details.
To enable file compilation on save by default, add this to your behaviors:
:editor.scss [(:lt.plugins.scss/enable-compile-on-save)]If at any point you want to toggle this behavior, open the command bar and search for:
SCSS: Toggle compile on save
The plugin looks a configuration file above or next to your source files named scss-config.json.
This means two things:
- You can't place your configuration file in a sub-folder of your source file.
- If you "nest" projects, you're in for a bad time.
Four options are currently supported:
{
"src-dir": "scss",
"build-dir": "css",
"output-style": "expanded",
"includes": ["lib/"],
"comments": true
}The src-dir is where your .scss files live, and the build-dir is where you want them compiled. You can also customize the output style as nested, expanded, compact, or compressed and control whether or not to show comments in the output files.
You can include libraries in your configuration file, relative to the directory it lives in. The includes option takes an array of strings specifying the folder(s) to look in when using an @import statement in your code.
If you're thinking "Hey, that's not enough options!" then I suggest you look into a build tool like grunt or gulp. More functionality is planned for later releases, such as watching folders.
- A big thanks to the Node and node-webkit teams for making awesome tools.
- Shoutout to Chris Granger and all of the contributors to LightTable
- Thanks to David Nolen for sending me down the Clojure[Script] rabbit hole.
- Shoutout to Marco Munizaga for his guidence in developing this plugin.
Copyright (C) 2014 Philip Joseph.
This plugin is a modified version of the official Light Table CSS plugin.
Distributed under the GPLv3, see license.md for the full text.