Course info

Rating

(1181)

Level

Intermediate

Updated

Mar 5, 2012

Duration

1h 56m

Description

CSS is a great way to separate your design and markup during HTML development, but there are key pain points that make it more difficult than it should be. Dynamic stylesheet languages like LESS and SASS can make style sheets more readable, maintainable, and easier to write. This course dives into both LESS and SASS and shows you how powerful these languages can be.

About the author

Shawn Wildermuth has been tinkering with computers and software since he
got a Vic-20 back in the early '80s. As a Microsoft MVP since 2002, he's
also involved with Microsoft as an ASP.NET Insider and
ClientDev Insider.

Section Introduction Transcripts

Why CSS is PainfulShawn Wildermuth: Hi, this is Shawn Wildermuth with AgiliTrain. In this first module of using LESS and SASS I want to explore CSS and talk about some of the pain points that makes building style sheets for web development difficult. Let's touch on some of these pain points. We're going to first talk about the color problem and that is how CSS doesn't allow us to have named colors so that we have repeat colors throughout our CSS and then do search and replaces later when our design changes in fundamental ways, duplication issues in that there are no ways to create reusable sections in CSS to be used in a different part of our design. Cascading avalanches, and that's where it's difficult to see exactly where a cascaded rule is coming from. We can certainly debug it, but it's very hard by looking at the CSS to make sure we know what rules are going to be applied in what cases. Lack of calculations, CSS doesn't allow us to base values or arbitrary formulas. And finally, we're going to talk about imports and how imports, browser cache and other things can make CSS harder to manage in the long term. The nature of Cascading Style Sheets is that they're declarative, which means they're fairly easy to write by hand. In most cases you're going to be defining the rules for different parts of your web design using the style sheets, setting up rules and values in those rules. It becomes very easy to fall back and rely on editor inheritance so that you take copy and paste sections of CSS and other places just to get the job done. CSS doesn't allow us to create reusable sections in a very straightforward way. This duplication leads to errors because when we make changes we can't change it in one place then have those changes propagate to everywhere in the style sheet. So, let's take a look at some examples of CSS and see where these pain points really hurt us.

Using SASSHi, my name is Shawn Wildermuth with AgiliTrain and welcome to this 3rd module of our using LESS and SASS course. And in this section, we're going to be talking about SASS. SASS is another dynamic spreadsheet language. We're going to be going through and talking about what exactly it is, how to use it on a server as well as covering the core features of SASS including variables, rules, importing, extending, using Mixins, functions and finally control directives. Let's get started. SASS is a dynamic stylesheet line with much like less which we covered in module 2. Stands for in, it's syntactically awesome stylesheets. And it compiles down to CSS much like less does. It introduces these programing features to CSS so that you can structure them in a way that makes them more maintainable. So SASS itself has two syntaxes, SASS and SCSS. The original SASS syntax was based on indention. So an implied certain things about the language based on how it did nesting of indentions. Distant, look and feel like CSS, and in fact, CSS wasn't valid SASS originally. And so they created a second syntax which is much more common and it's going to be the one we're going to cover in the whole course. This syntax called SCSS looks and feels like CSS. It uses curly braces to imply structure, semicolons on the end of lines, et cetera. Much like the same sort of syntax is that you're used to using in CSS today.