This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Transcript from the "SASS & SASS Alternatives" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kevin Whinnery: The other key player in our financial chain is SAS. SAS provides a superset of CSS features as I said. If you write just plain CSS, that is also a valid SAS or SCSS style sheet. But it provides a lot more functionality that.
>> Kevin Whinnery: I'm sorry browser if I had there, I open the chat James actually corrected me the browser stuff in this project is largely, is in the grunt file but some of the transform configuration is in the package.JSON.
[00:00:41] So, some of the browser if I transforms expect to find their configuration and package.JSON which is why that's there. But some of the transformations are actually configured in the current file. I think in this in this instance. Thank you for the clarification there.
>> Kevin Whinnery: So in terms of SAS, it gives us the ability to better modularize our CSS, essentially.
[00:01:10] It allows us to write our Or CSS like we would write our code, so in our code, we wouldn't write the same thing over, and over, and over again for different classes, but in CSS that's essentially what you have to do. If you want to use you'll find that you're using the same font family, declaration for multiple elements and it's possible to write CSS such that you don't repeat yourself a lot but invariably you end up doing that.
[00:01:36] So SAS provides the ability to create things called mixin. Which allows you to have better modularization. In your JavaScript code you can earn your x here SAS code. So you can essentially integrate sets of, functionality into your CSS. And sort of reuse those mixed ends all across your SAS code.
[00:02:02] The other bit that it allows you to do, is to specify variables. And import external SAS style sheets, basically anywhere within your SAS. Both are fairly critical features, especially like when you're talking about colors and other sort of site-wide design elements. Being able to assign those to variables that you can use in multiple places and then change once, and then watch those changes propagate everywhere in your styles.
[00:02:30] That being pretty clutch. SAS also comes with a fast as c based compiler. So it's fairly performance when you're actually compiling the style sheets as well.
>> Speaker 2: An you talk a little bit about the advantages or disadvantages of SAS over less.
>> Kevin Whinnery: Yeah I mean actually, that's a well just skip ahead a little bit so.
[00:02:53] It's fairly interchangeable with less in terms of style. I think it comes down to preference largely Sass. Is cross-platform I think last is Node.js only, if I'm not mistaken out you can probably run it and you can probably use it everywhere, I'm sure it'll work just fine with other environments as well.
[00:03:17] But yeah.
>> Speaker 3: I'm gonna extend the question, why would choose only bootstrap three and like jQuery UI for some of the stuff?
>> Kevin Whinnery: So those tools, like the question if you didn't hear it, was why wouldn't you use Bootstrap 3 or jQuery UI for stuff like this? And those tools actually serve a slightly different purpose.
[00:03:35] So like jQuery UI provide a set of CSS classes that you can apply to objects, to make them look nice and turn into drop-downs and stuff like that. But for authoring your own styles for your own components, you probably will be authoring CSS from scratch, anyway. And Bootstrap and jQuery UI help with some prebuilt classes that you can use for grids, and those tools work really well with Sass or Less.
[00:04:06] In fact, Bootstrap. One of the things you can do if you're using Sass. And I know at one point, they had less styles as well. But I feel like maybe at one point they converted to Sass. I'll have to check on that specifically. But, if you actually download the bootstrap Sass files, you can import them into your own styles and use only the parts of the bootstrap styles that you're actually leveraging in your application.
[00:04:39] And which ends up being a little lighter weight then including a larger package that you didn't customize. There are also similar to bootstrap is a framework called a UI kit, which I would definitely recommend you check out. Which provides a set of Sass mix-ins and other bits that you can actually include in your own CSS to create like CSS3 transformations and useful things like that.
[00:05:09] So it provides useful mix-ins, responsive breakpoints and stuff like like that.
>> Speaker 3: Thank you.
>> Kevin Whinnery: Yes no problem. But yes so less per served largely the same purpose, and it's fairly interchangeable. At this point, for me it's more of a preference thing usually I like SAS a little better.
[00:05:35]
>> Kevin Whinnery: And the Webpack as long as we're here on the alternates tip, is also provides like a module bundling functionality based on the new ECMAScript module system. It also provides some other module bundling features and functionality, also fully legit, it also has a growing set of plugins. And, I think at this point because browser around longer.
[00:06:07] I think it has a richer set of transformations and plugins that can be brought to bear using browser Fi, but Webpacks has a large and thriving community of plugin developers as well. So again, fully a valid choice if you wanna go in that direction.