This morning our designer and CSS magician Alex Walker took centre stage in our chatroom to talk Sass in the latest Talk with the Experts session. We chatted about everything from mixin libraries to incorporating Sass into your workflow. The hour flew by and some good resources came out of it – if you don’t have time to sift through the transcript, you’ll find those listed below.
First up, some pretty cool CSS stuff that Alex wrote using Sass
CSS3 Pong with scoring
The Story of Christmas in CSS
Some useful information:
Sass vs LESS – a comparison of pre-processors
A Sass demo using CSSDeck
Sulieman Leadbitter on starting out with Sass
And some handy tools:
Scout – a cross platform app that runs Sass and Compass
Bourbon – a mixin library for Sass
Prepros – another preprocessor
LiveReload – reloads the preprocessed code in the browser without refreshing
SMACSS – Scalable and Modular Architecture for CSS
Launch into LESS on Learnable
If you missed the session today because you didn’t know about it, you can sign up for email reminders of future sessions here.
Coming up next week is Responsive Web Design with Russ Weakley.
If you’d like to find out exactly what went down this morning, here is a full transcript of the hour:
[21:32] <HAWK> Does anyone already have some Sass experience?
[21:32] <FernandoBasso> I don’t.
[21:32] <Terry> No
[21:32] <nicniewiem> not me
[21:32] <Jan> What is Sass?? Sorry I don’t know.
[21:32] <DavidNY> I have LESS experience…. and less with Sass :)
[21:33] <FernandoBasso> I have no experience with any css preprocessor whatsoever.
[21:33] <Shannon> How involved is using sass with WordPress?
[21:33] <jessirwin> I have SASS experience, but I don’t believe I’m using it to its full potential just yet.
[21:33] <Shannon> Just started learning Sass
[21:34] <alexmwalker> Ok, so one of the probelms with CSS is it has been very slow to evolve, even though the web has been developing at a breakneck speed for years.
[21:34] <alexmwalker> SASS and the other preprocessors let us write CSS-like code that is more advanced and, frankly, cooler.
[21:35] <alexmwalker> When we write it, the SASS preprocessor watches our code, and converts it silently to plain old CSS in the background
[21:35] <DavidNY> HAWK – for the queue :) Maybe a quick pros/cons comparison of Sass versus LESS would be nice
[21:36] <HAWK> NP DavidNY
[21:36] <alexmwalker> It let’s us do smarter stuff, without having to wait for the W3C and browser makers to catch up
[21:37] <DavidNY> alexmwalker – Is Sass processing / compiling down server side or client-side? ( I know LESS offers a js client side compiler but it’s no-no for production sites)
[21:37] <HAWK> Can you give an example of ‘smarter stuff’
[21:37] <FernandoBasso> I second that question.
[21:38] <jessirwin> My question will be: In a responsive site, what is the best way to deal with media queries? Do you put them in their own partial, or do you have them littered around the partials with the relevant selectors?
[21:38] <HAWK> Welcome to those of you that have just joined. Alex is explaining at a basic level what a preprocessor does
[21:38] <DavidNY> +1 for jessirwin RWD question
[21:39] <alexmwalker> DavidNY, SASS originally came as a Ruby Gem, but these days it’s been broken out into many more environments. The easiest way I found to get started was to use a client side app.
[21:39] <alexmwalker> http://mhs.github.io/scout-app/
[21:39] <alexmwalker> This is SCout. It’s free and pretty easy to get started with
[21:39] <Jan> OK, thank you
[21:39] <sen> (i like codekit) :)
[21:39] <alexmwalker> It’s an Adobe Air app, so it’s a little sluggish..
[21:41] <alexmwalker> but it lets you chose a folder for your sass files and writes them out automatically to a folder marked CSS nearby.
[21:41] <jessirwin> I played around with Scout when I first started, but couldn’t get it to work how I wanted to. I took the plunge into command line and realised it wasn’t so hard if you didn’t panic.
[21:41] <DavidNY> i’ll check out scout – i’ve heard of compass, codekit – all these seem to have Sass “built in”
[21:41] <DavidNY> but with these tools or just “vanilla” Sass, is the compiling down actually client-side (by user’s browser) or server-side?
[21:41] <DavidNY> *done
[21:41] <alexmwalker> Codekit is really good. It’s $25, but a worthwhile spend
[21:41] <johnlacey> So you can use variables with Sass?
[21:42] <jessirwin> We compile locally so the css is already precompiled for the browser.
[21:42] <alexmwalker> johnlacey yes, that’s one of the fiorst big wins
[21:43] <alexmwalker> DavidNY, when we say client side SASS, I’m talking about your local laptop compiling CSS as you work. The enduser only ever gets finished CSS
[21:44] <alexmwalker> LESS does compile on the endusers PC
[21:44] <dimlo305> Hi there, recently I started to use LESS and I think is pretty good and its syntax is not that hard to learn, Now, my question is, should I use SASS over LESS?
[21:44] <alexmwalker> (though it doesn’t to anymore)
[21:44] <DavidNY> right – at least there is option to have LESS compile on end-users machine via JS, which I don’t want to do
[21:44] <DavidNY> Thanks for clarification re: Sass
[21:45] <alexmwalker> Ok the SASS vs LESS question. In the past, LESS depended on client side JS, which I didn’t like the idea of.
[21:45] <DavidNY> ^ word :)
[21:46] <animal> Hi
[21:46] <alexmwalker> Now LESS can compile on your own machine — I think you have to install NodeJS and install LESS as a Node package
[21:46] <dimlo305> that’s right
[21:46] <alexmwalker> That’s a fine solution.
[21:47] <alexmwalker> Less actually has some neater syntax, so there’s no reason at all not to choose Less now.
[21:47] <alexmwalker> Or even Stylus if you like
[21:47] <dimlo305> but is there any feature in SASS that I don’t get in LESS?
[21:48] <alexmwalker> They all do similar things. We use rails on Learnable, so Sass was an easy choice.
[21:49] <BioC> ok and what about Compass VS Bourbon? If i’m not too late with the question :)
[21:49] <alexmwalker> So, Sass has two really good plugin libraries of ‘mixins’ – Compass and Bourbon.
[21:49] <DavidNY> folks might find this a good read: http://css-tricks.com/sass-vs-less/
[21:50] <alexmwalker> These libraries give you lots of pre-written features that I think are really powerful
[21:50] <dimlo305> Thank you!
[21:50] <alexmwalker> http://bourbon.io/
[21:50] <lorio> what is the diff between bourbon and compass?
[21:50] <HAWK> Thanks for the link DavidNY – if anyone else has resources please link us up and I’ll compile a list when I do the transcript
[21:50] <alexmwalker> Bourbon is my personal favourite
[21:50] <lorio> why?
[21:50] <BioC> I use mostly Compass, but Bourbon seems to have risen recently and i wander if there’s a reason to switch
[21:51] <alexmwalker> Compass is cool, but it’s huge and probably a little overwritten in my view. Bourbon has exactly the stuff i need and nothing else.
[21:52] <lorio> does bourbon watch for errors like compass does?
[21:52] <jessirwin> So with Bourbon, you’d install it for every website? Can you just copy the mixin files, without having to install it via command line each time?
[21:53] <BioC> ok, and does it support any responsive layout frameworks, like Sasy? (which i started to use just recently and love already)
[21:53] <alexmwalker> With SASS you tend to write little shortcuts for snippets of CSSS that you write a lot. The prefixes for a lot of the CSS3 properties might be a good example…
[21:54] <alexmwalker> Bourbon (and Compass) are libraries that have written a lot of those shortcuts (or mixins) for you already
[21:54] <HAWK> Welcome to those of you that have just joined. :) We’re currently talking Mixin libraries
[21:54] <HAWK> Feel free to jump in at any time with questions and I’ll queue them until we have a gap
[21:55] <HAWK> And for anyone that doesn’t know – you can @ tag people to get their attention
[21:55] <alexmwalker> jessirwin – in rails you can set up SASS and Bourbon with a single command on each new project. Codekit comes with Compass and Bourbon bundled inside it.
[21:55] <lorio> @BioC do you mean Susy?
[21:56] <BioC> lorio yup, sorry :)
[21:56] <alexmwalker> With Scout, it’s just a matter of coping the files to right place each time
[21:57] <alexmwalker> The other great thing about SASS is ‘partials’ which jessirwin
[21:57] <alexmwalker> mentioned
[21:57] <johnlacey> So do this mean you have to recompile the Sass every time you make a change say on a local development PC?
[21:58] <Suleiman> Sorry just got back, caught the general chat so far.
[21:58] <alexmwalker> With big sites, it’s much easier to manage a bunch of smaller CSS files .. maybe ‘layout.css’, and text.css, etc
[21:58] <Suleiman> The awesome Foundation from Zurb using Sass too
[21:58] <BioC> johnlacey yeah, but you start a command line program, like sass or compass and it waches your changes, recompiling your sykes, as you go
[21:58] <lorio> would those be partials?
[21:59] <alexmwalker> but you ideally don’t want to be making 25 requests to the server for CSS files for every page..
[21:59] <alexmwalker> SASS let’s you write lots of small files, and then glues them all together into one big file when it get’s sent to the user
[22:00] <BioC> johnlacey trust me, it seemed as a burden to me at first too, but now, i can’t work without it, it’s SO much easier!
[22:00] <Suleiman> SO it’s great for the modular SMACSS approach then?
[22:00] <DavidNY> +1 for SMACSS :)
[22:00] <DavidNY> I believe Snook rec’s using Sass
[22:00] <alexmwalker> Suleiman Exactly! it’s perfect for that approach
[22:01] <alexmwalker> johnlacey yes you do
[22:02] <Suleiman> My main problem I have at a basic level is using @extend correctly to keep code `DRY
[22:02] <alexmwalker> For anyone wantig to see what the fuss is all about, CSSdeck.com and Codepen.io let you write SASS directly into the browser and see it work
[22:02] <alexmwalker> http://cssdeck.com/labs/sass-demo
[22:02] <alexmwalker> That’s a really simple example, but feel free to play around with it
[22:03] <jessirwin> Is that really your favourite colour?
[22:04] <DavidNY> heh
[22:04] <alexmwalker> Hehehe.. wellll… it was the original SitePoint orange, so let’s say it’s stuck in my brain forever
[22:04] <jessirwin> haha!
[22:04] <DavidNY> so that’s variables
[22:04] <DavidNY> how about inheritance – i forget the sass / less term
[22:05] <DavidNY> but it’s basically, one class inherits all the styles from another class and builds up from it
[22:05] <alexmwalker> it is. So if we used that variable throughout 100 stylesheets, and then changed the logo color, we could update it the whole site in few keystrokes
[22:05] <DavidNY> yeah, love that
[22:05] <DavidNY> someday that will be in CSS :)
[22:06] <alexmwalker> I don’t think variables will ever got to real CSS
[22:06] <DavidNY> boo
[22:06] <alexmwalker> because they would break old browsers
[22:06] <johnlacey> So how did going to Sass change your overall workflow?
[22:06] <Robert> need to add the $base-color for it to run
[22:07] <alexmwalker> johnlacey I started using it to simplify the code for CSS animations — the Christmas stuff and even CSS Pong.
[22:08] <alexmwalker> Honestly, I could never have written that stuff without the help of a preprocessor
[22:08] <HAWK> Has everyone seen Alex’s Xmas & Pong work?
[22:08] <Suleiman> nope
[22:08] <HAWK> I could dig it up if not
[22:08] <HAWK> Hang on
[22:08] <alexmwalker> the browser prefix stuff would have made it just too difficult
[22:09] <Suleiman> Compass is amazing too :)
[22:09] <Suleiman> Although I don’t use it much now as I use HammerforMac
[22:09] <alexmwalker> It is, Suleiman.
[22:10] <HAWK> Suleiman https://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/
[22:10] <Suleiman> This looks pretty sweet for the Windy folks – http://alphapixels.com/prepros/
[22:10] <Suleiman> Thanks HAWK :)
[22:10] <johnlacey> And I guess since you have the ability to use variables, you can make one change (to the value of said variable) and then let Sass implement all those changes for you. Sounds very efficient.
[22:11] <alexmwalker> The nice thing is, you can write plain old CSS syntax into your SASS fie and it will all work fine. Then if you gradually start taking advantage of bits of SASS you see the benefit more and more.
[22:11] <HAWK> Suleiman https://xmas.sitepoint.com/story/css#day/1
[22:11] <DavidNY> are Sass mixins the same as in LESS?
[22:11] <alexmwalker> So it doesn’t force you to learn an entirely new language to get started.
[22:12] <alexmwalker> The one ‘gotcha’ to look out for..
[22:12] <alexmwalker> If you are writing SASS, but your buddy pops in the next day and changes the CSS file, that change doesn’t come back automatically to your sass file..
[22:13] <jessirwin> How long did it take you to put together the christmas stuff?
[22:13] <alexmwalker> If you write more SASS your change will over write his/her CSS
[22:14] <alexmwalker> It took a while. The train for instance took hours of tweaking.
[22:14] <alexmwalker> But without Sass, I think it would have been impossible
[22:15] <Suleiman> I did my first talk and it was about Sass – Folks can check it out here – http://www.youtube.com/watch?v=cCizAq_XXb0 bare in mind I was nervous and there was technical issues and I couldn’t pull up my notes :P But it’s aimed at people new to it all.
[22:15] <alexmwalker> Too much code, too many browser inconsistencies to bug fix it
[22:15] <Suleiman> HAWK That Pong malarkey is outstanding
[22:16] <HAWK> It is indeed
[22:16] <alexmwalker> Also not sure how many of you use Live Reload? http://livereload.com/
[22:16] <alexmwalker> This is $10 and include SASS and less processing.
[22:16] <jessirwin> I couldn’t get the Windows alpha working yesterday :(
[22:16] <alexmwalker> AND it reloads your browser automatically every time you change your CSS or HTML
[22:17] <alexmwalker> jessirwin that’s a bummer. It’s killer when you’ve got it working. I can’t work without it
[22:18] <jessirwin> What’s the difference btween livereload and codekit?
[22:19] <HAWK> Hey all – we have about 10 mins left in the session so if you have questions, make sure you throw them into the mix
[22:19] <alexmwalker> Codekit comes with Bourbon and Compass bundled inside it.. It also has a few other tricks. It’s a nicer designed app in general but they aren’t that different
[22:19] <alexmwalker> I own both
[22:19] <DavidNY> HAWK is sitepoint putting together a Sass course or book etc?
[22:19] <DavidNY> :)
[22:20] <Suleiman> Ok, alexmwalker could you tell me how to get the most of the @extend feature as I’m just not getting it right
[22:20] <alexmwalker> DavidNY I may well be involved with just such a course ;)
[22:20] <lorio> great
[22:21] <Suleiman> Do I use @extend ul.classname li -?
[22:22] <Suleiman> Because some of the ones I want to extend are quite specific, it’s not a case of just a class name
[22:22] <HAWK> Hey Luke – we’re just about done here so if you have a question then jump in :)
[22:22] <alexmwalker> Suleiman so far the only time i tried to use @extend I found I was writing kinda silly code.. Repeating myself. So I restructured it.
[22:23] <alexmwalker> But maybe we both are missing the beauty in extend. I’m not getting it quite yet
[22:23] <DavidNY> extend is different than mixins?
[22:23] <DavidNY> e.g.
[22:23] <DavidNY> .btn {…}
[22:23] <Suleiman> alexmwalker That’s how I am, I know it’s pretty good, but I’m just not getting it right :P
[22:24] <DavidNY> .btin-extend {.btn} /* inherits all of .btn rules
[22:24] <DavidNY> whatever that is called :) to me it is one of the more powerful features
[22:24] <alexmwalker> Mixins are full CSS rules. Extend seem to work as smaller snippets.
[22:25] <Suleiman> DavidNY – Say you have some styles for a button, you can @extend that for something else. It’s not a case of copying all the style the compiled CSS will be like – item1, item2 {style in here}
[22:25] <jessirwin> I find I use @extend when I can’t just add the class name to the html.
[22:25] <Suleiman> instead or item1 {code} – then item2 {repeated code}
[22:26] <jessirwin> In a responsive site, what is the best way to deal with media queries? Do you put them in their own partial, or do you have them littered around the partials with the relevant selectors?
[22:26] <alexmwalker> In the case I had, I ended up grouping the classes together … .box, .sidebar { etc etc}
[22:26] <alexmwalker> to get the same result
[22:27] <jessirwin> I use it to keep things together in the same partial.
[22:27] <DavidNY> ah. ok, thanks Suleiman – not sure where’d i want to do that, though. why would two classes have the same one set of styles
[22:27] <alexmwalker> I do put them in partials at the end of the main document. There is a few schools of thought on that though .
[22:27] <Suleiman> DavidNY Could be a blockquote and some other text. You can add extra style after the @extend
[22:27] <Suleiman> Could be anything really
[22:28] <DavidNY> i’ll have to try it out
[22:28] <Terry> Thanks for letting me in – I truly trust in osmosis!
[22:28] <alexmwalker> Code gist: https://gist.github.com/5818705
[22:28] <Suleiman> Sass is awesome as you can just use standard vanilla CSS and add little nuggets as you go to progress. I love that
[22:29] <alexmwalker> Wow, i didn’t know this could do that!
[22:29] <HAWK> A couple more minutes before I cut Alex loose to go about his day. Any last questions?
[22:29] <alexmwalker> That’s the bottom of learnable’s main SASS file
[22:29] <DavidNY> jessirwin – if you follow a SMACSS approach, I think the rec’ed media queries method is to put them with the modules (“selectors”) rather than in their own partials (e.g. “mobile.css” or “480px.css”)
[22:29] <lorio> so that is how you import the partials?
[22:29] <Suleiman> alexmwalker – Sarcasm :/
[22:30] <alexmwalker> Except for the terry bit ;)
[22:30] <alexmwalker> lorio It is
[22:31] <jessirwin> DavidNY Yea we try to follow a smacss approach
[22:31] <lorio> a good tutorial on smaccs?
[22:31] <DavidNY> well, there’s the site and book – smacss.com
[22:31] <Suleiman> alexmwalker What would you recommend as the best practice for RWD, nest the @media within different items, or import seperate .scss files for each breakpoint?
[22:31] <lorio> ok thanks. will take a look
[22:33] <DavidNY> gotta bolt – thanks HAWK and alexmwalker and all :) is there a transcript to be shared?
[22:33] <alexmwalker> I think you need a base set of styles that run on all device sizes .. then I augment those styles with imported partials for each size
[22:34] <Suleiman> Thanks alexmwalker :)
[22:34] <alexmwalker> It’s been a pleasure, thanks everyone for coming along and giving me something tyo talk about
[22:35] <HAWK> I’ll post up a transcript later today
[22:35] <jessirwin> Thanks alexmwalker and HAWK
[22:35] <HAWK> Join us next week for Responsive Web Design with Russ Weakley
Sarah HawkFormerly a developer in the corporate world, HAWK (known as Sarah by her mother) said goodbye to the code and succumbed to the lure of social media to become the Community Manager for the SitePoint network. Now Hawk is working with Discourse to build their product and community.
