# Getting Sassy with Node.js

Canonical: https://davidk.dev/talks/getting-sassy-with-node-js/
Video: https://www.youtube.com/watch?v=oVmdBsbZKAs
Speaker: David Khourshid (@DavidKPiano), creator of XState
Type: Conference talk · Event: Node.js official channel · Year: 2015 · Duration: 22:29 · Views: 368 (as of 2026-10-19)
Topics: CSS & animation

## Summary
SAS also has a ton of functions for manipulating lists, maps, colors and everything in between. Node SAS is a wrapper of Lipsas, which is written in C, which pretty much means you could use SAS wherever you could use C or C plus.

## Key takeaways (quoted from the transcript)
- In case you didn't think you had enough SAS, you have to pass SAS back inside eyeglass. (11:00)
- Creating a SAS port module is also easy you install the same SAS port, you define your module name, which over here it's just greetings, and you add optional functions variables, exports and loaders. (13:00)
- What I did over here was, I got the logo and I used that size of function, which again, this is node, not SAS. (18:00)
- You to specify custom importers so you could say I want to use the eyeglass importer instead of the SAS Port importer. (22:00)

## Chapters
- 0:00 Introduction
- 17:00 To compile again different logo, there we go…
- 19:00 You could write a custom importer that puts every single one…
- 21:00 You to specify custom importers so you could say I want…

## Transcript
[0:00] All right, I guess I'll go ahead and get started first. Breakout talk in the morning. First of all, thank you everyone for coming out to my talk. Getting sassy with Node. JS so I'm gonna do the cliche thing and do sort of an audience poll. How many of you are actually using note SAS in production? All right, good, so that's a good chunk of you. How about Ruby Sass? All right, we're at Node interactive, so you should really be using nodes.

[0:00] I promise you, it's a whole heck of a lot faster, all right. So who am I? My name is David Khourshid. I'm a front-end engineer over at cancel, which is based in South San Francisco. I am a SAS aficionado. People call me other things, but we're gonna go with that one. And I do a whole bunch of open source, codepen, Twitter, that stuff. So if you look for David K. Piano on any of those platforms, you could pretty much find me.

[0:00] Follow me whatever you want to do with me. Alright, so first, let's talk about what SAS is capable of. It turns out there's not a whole lot that SAS is really capable of, but this isn't necessarily a bad thing. So in terms of programming languages, SAS is pretty much the bare minimum when it comes to features. But of course, this is a good thing. There's. There's variables which can express different value types, such as colors, links, percentages, lists, maps.

[1:00] All of that. SAS also has a ton of functions for manipulating lists, maps, colors and everything in between. More importantly, you have these things called mixins, which if some of you did, less, you're going to see that. That's pretty much the same thing where you could basically copy and paste dynamic rule sets and declarations in different selectors, so there's also your standard fare procedural programming language control structures, such as each where you could iterate through lists and maps.

[2:00] There's four where you could go either forwards and backwards and loop through a certain range. There's while and if else, and if you'll notice, all of these are at rules, so SAS tries to mimic CSS as much as possible. So that's why you have all of these at while at Mixin, at function, all of these things, and you also. Have some pretty handy debugging and error features, too. With SAS now. A lot of nice things that I was used to working in.

[2:00] Both node and client-side JavaScript were straight up either missing or really, really, really hard to do in SAS. How many of you use LowDash? I mean, it's it's a pretty standard, fair utility library for both client-side JavaScript and server-side JavaScript. So needless to say, it's really, really useful. So I was missing LowDash and all the utility functions. So much that I decided to make, you know, my own implementation upload in SAS, which ended up being really, really hard.

[3:00] It took up a lot of my time. And that's because there's a lot of things that SAS cannot do. For example, you can't pass functions around in SAS like there any other value. You have to declare them in an add function. At rule. You also don't have prototypes or classes, but that's not really a big deal. We're not doing anything advanced with SAS, or hopefully we're not. I mean, we don't want to over complicate our CSS.

[3:00] There's no continuing loops, so anything beyond the trivial loop where you're just going through a certain number of times is, is like, pretty much impossible. You also don't have lambdas or num anonymous functions. And this was one of my biggest setbacks when I was doing SAS Dash is that every single function had to be explicit and had to be defined. So there's a whole bunch of other things that SAS can't do.

[4:00] And basically, it's not JavaScript, it's not going to have the full feature set of JavaScript or any other programming language. So what is SAS great at? And why aren't we just using JavaScript, as is popular nowadays? For our CSS? Well, SAS is great at pretty much anything CSS, and, some of the cool things that SAS could do is work natively with units CSS units, for example. It knows that one second plus one millisecond equals well, or, sorry, ten milliseconds equals a thousand, ten milliseconds, or ten degrees plus ten radian equals.

[5:00] That's so. Also, you could do color operations, adding colors. This is pretty cool. It sort of blew my mind when I first saw it. If you add these two colors, you get white. I don't know how the math works. On that one, but I'll take SAS's word for it. And there's a whole bunch of cool selector operations that you could do as well. So, this follows the principle that, is called the least power principle.

[5:00] That powerful languages should inhibit information reuse, and that you should use the least powerful language suitable for expressing information. Constraints or programs on the web. And so SAS is an example of that, CSS is one of the primary examples of that, as is HTML. All right, so I want to do more with SAS, and it turns out that if you're using Node SAS, you can. Node SAS is a wrapper of Lipsas, which is written in C, which pretty much means you could use SAS wherever you could use C or C plus.

[6:00] Plus, even on microchips or embedded hardware, I don't know why you would want to use, ask there, but if you wanted to, you can. So setting up notes s which some of you might be familiar with, is, should look pretty familiar to a node developer. Where you have this render function or render sync if you want to render synchronously, and you pass in a callback, which is that function, so whenever SAS is done compiling, it's going to send it to this function.

[6:00] But notice one thing, this options over here. This is what's going to allow us to do a whole bunch of crazy stuff in SAS and allow SAS to play with JavaScript nicely. So there's two big things that let us do this in Node SAS. First one is the importer, you could add custom importers. It's an experimental feature, but I say, go ahead and go for it anyway, because that's what I did.

[7:00] That's what eye Glass did. And it takes three arguments. First is the URL string, which is the path to be imported, so in your CSS when you do imports. You can't see it very well here, but it says goat styles. That's going to be the URL that's passed in the previous argument, which represents what node SAS already guessed would be the correct path. And done for all of your async needs. So this should look very familiar to you if you're using callback style asynchronous working.

[7:00] And this returns either one of two things you could either return. The file which says, here's the resolved file that I want you to use. SAS, or you could return the actual string contents of the SAS or CSS that you want to use. Or you could pass it off and say, Hey, I don't want to deal with this file. So just do whatever you were going to do with your normal importer.

[8:00] So, if we look at this example, I'm checking if the URL is Goat Styles, and if it is, I'm going to pass my secret GoAt CSS over to my application. It doesn't seem practical, it's a bit contrived, but it shows you that you could make your own custom importers with. With Node SAS. Now, another huge function of Node SAS is Node SAS functions. It's a bit cut off there, but what this means.

[8:00] You could do is pass in JavaScript functions into Node SAS and be able to manipulate the values in JavaScript and use it inside SAS. So, for example, I have this power function here that takes in the value and an exponent should be pretty familiar with it. We have math.pow, so 2 to the third is 8, and unfortunately, Node SAS, or SAS in general, doesn't have POW. But it's sometimes useful, especially if you're doing advanced math with this.

[9:00] But as you could see, it's very verbose, and the reason it's very verbose is we have to use SAS values. So a SAS number isn't the same as a JavaScript number, and a SAS string isn't the same as a JavaScript string. And neither are lists the same as arrays, maps the same as objects. Unfortunately, they're not the same. So let's have some fun with this and look at a few tools that actually can play nicely with this, and let us do even more so.

[10:00] The first one, SAS Eyeglass, some of you may have heard of it, it was announced a few months ago. And SAS Eyeglass is pretty much the successor to SAS. Compass, which, if you were using, Ruby says before, you might recall SAS Compass as what allows you to use all these crazy math functions, spriting modules, all of that stuff inside SAS. So this is just Compass built on top of npm, and what this means is that you could install npm modules that are eyeglass modules and.

[10:00] Put them inside your SAS files. You could also have advanced asset management and resolution, so wherever your assets live, you could, you could play around with them. And so, if you want to check this out, go to Eyeglass dot Rocks. So I'm going to breeze through this part just because it's really complex, which is a prime candidate for something you shouldn't breeze over, but I'm going to breeze over anyway. Sass eyeglasses sort of involve to install, you have to npm install it.

[11:00] Specify the SAS options, specify the eyeglass options inside the SAS options, pass the options inside the VI glass. And in case you didn't think you had enough SAS, you have to pass SAS back inside eyeglass. And then put all of that back inside SaSs and then render it like normal. Everyone got that, no? So, creating an eyeglass module is also a little bit tricky. You have to, use npm Init, since, of course, it works with npm as well.

[11:00] You have to add a magical eyeglass module keyword to your package...JSON. Add the Config, which is Saster Export's name and needs, where you specify the version of eyeglass you're using and then create this Eyeglass exports..js that takes both Eyeglass and SAS. So, needless to say, this is a little bit tricky. Thankfully, adding third-party eyeglass modules is actually pretty easy. All you have to do, for example, if you want to use the math module is npm, install Eyeglass math, import it and use it.

[12:00] So, thankfully, that part's simple, you just have to get through the rough parts. Now I'm a sucker for really, really, really good, clean APIs. So I decided to make something called SAS Port, which is sort of a play on words. Since that looks like a passport, I don't think anyone's got that yet, but that's what it is. So it allows JavaScript to play very nicely with SAS using Node SAS, so SaSport is extremely JavaScript friendly.

[12:00] And I'm going to show you what I mean by that. Just like Eyeglass, it also could do asset management, but that's not its main objective. Its main objective is for you to be able to use JavaScript seamlessly inside your SAS files, so installing SAS Port is as easy as installing post CSS in case any of you are familiar with post. CSS all you do is install SAS Port, add your modules inside as an array.

[13:00] And if you do want to use assets, you could specify the local path and remote path. This is just to help you, it's not necessary. And use SasSport just like you would use node SAS, so you don't have to do all of this SAS juggling. Creating a SAS port module is also easy you install the same SAS port, you define your module name, which over here it's just greetings, and you add optional functions variables, exports and loaders.

[13:00] So I'm running a little bit low on time, so I'm just going to show you. One of the biggest features is how you could easily wrap Sassport functions so you don't have to fiddle around with SAS values. Because, chances are, if you're playing around with a SAS string or SASS number, you just want a JavaScript stringer number, so Sassport can do that pretty easily. All I'm doing is wrapping my function, and again, the colors are a little off inside that wrap, and I could also wrap entire libraries.

[14:00] Because being lazy is one of the best qualities a developer can have. We don't want to go through every single method, every single property and try to wrap it all. So over here, I'm literally wrapping the entire Javascripts math module in one line. Over here, I don't know if you could see, it's just math, and I'm just wrapping it all. So it takes the first arguments, the method such as PoW or sine, or square root, and then you pass in all the arguments.

[15:00] It's just like using call. And then you could pretty much use JavaScript math inside of SAS, but probably the biggest feature is how you could use require in SAS. So take this, for instance, we have a JavaScript module, this is not SAS, this is JavaScript. This is something that you would import inside of your JavaScript files. But let's say that we want to use this inside of SAS using SAS port, we could just require it just as if it were JavaScript.

[15:00] You don't have to fool around with Webpack or anything crazy like that, it just goes directly into SAS. And the other great thing about this, too, is that the values are inferred. How many of you have actually? Played with doing CSS inside of JavaScript, inline styles, stuff like that. Shame on you. So, yeah, well, yeah, here's a problem. JavaScript doesn't know what these are. These are colors in SAS world, their colors in CSS world, but in JavaScript world, they're strings.

[16:00] Thankfully, using require and SAS knows that these are colors, so it infers each of the values. And the next release of Sassport is going to have a whole bunch of other cool features. And improved integration with Gulp, Grunts, Webpack. And a lot of requested features such as importing once and importing by reference. So all I have to do is release it, write a few unit tests, but the fact is, it's almost there.

[16:00] Eyeglass and Sassport, as I said, can play nicely with assets. And instead of showing you all this, I want to show you a really cool example, so that's what I'm going to do.

[17:00] Here, we have Node..js interactive. This is sort of the after result. So how many of you? Had tried to get a background image into a div or something? And you had to play around with the size because you didn't know the exact size of the div. Right? Or is that just a meat problem? All right, so basically we have this? Oops, and what I'm doing? Oh, it's freaking out at me, all right.

[17:00] Cool. So over here, this is me trying to put the logo inside of a div. The problem is I have no idea what the size of it is. So what I did over here was. I used a normal npm module called image size, which is really super useful. You pass it in an image and it returns the size of the image for you. So all I did was wrap that using sassport.wrap, I returned the image size and another feature I could specify that I'm gonna get pixels out of it.

[18:00] So what I did over here was, I got the logo and I used that size of function, which again, this is node, not SAS. And I passed in the path to the logo. And then I got the width and the height and compile. And there we go. And just to show you that I'm not doing any weird trickery, I have another one here, so we're going. To compile again different logo, there we go, so it's going to go to the right size.

[18:00] And this is an after element that's showing that I am actually pulling the exact dimensions of the logo inside there.

[19:00] So, yeah, the cool thing with this is that you have all these things working together to really give your SAS super powers by putting JavaScript directly into SAS. You could either use Node.js and do it yourself, or you could use Eyeglass or Sassport, or even both and just have fun with it. So thanks everyone. And, does anyone have any questions? I know that was a lot to take in, a little bit fast paced, what would be that?

[19:00] Use loaded with case is that like, so you can add a feature flying around, so, using, using that. I actually, um. One of the features was using things like importing by reference or importing once, so let's take importing once. It's actually a really simple feature to implement. You could write a custom importer that puts every single one of your imports into this variable of things that I already imported. So that when you try to import again, it checks the array, it says, Hey, we already imported it, and then it skips it.

[20:00] So that's one of the conditional checks that can be used. Practically because I know when you're using imports in SAS. It copies it every single time, and most of the time, that's not the intended effect. In your style, sheets grow huge because of duplicated styles. Anyone else?

[21:00] Pretty much, so, yeah, the he was asking. The difference between SaSport and Eyeglass? Eyeglass offers you a lot of configuration options. But SAS Port tries to make it easy to go from point A to point B, which is going from JavaScript to SAS. So if you want to get crazy with asset configuration, then yes, you would use Eyeglass, but honestly, SaSport doesn't try to be an asset management tool. Because we have a whole ton of stuff for that, we have Gulp, Grunt, Webpack, Browserify, whole ton more things to manage our assets.

[21:00] Yeah, and just stick eyeglass in there. Yeah, yeah, in fact, all eye Glass does is. It provides SAS options, so, and it provides a very, very powerful importer, too, SAS Port allows. You to specify custom importers so you could say I want to use the eyeglass importer instead of the SAS Port importer. And SAS Port will be totally cool with it, so yes, you could use both.