![]() ![]() The Sass way makes it way easier to debug and update in my opinion lisibility is well preserved since alternative styles are based on keywords instead of arbitrary values. Their use is exclusive to the stylesheet.Īs a very simple example, let’s make a placeholder of the clearfix method by Nicolas Gallagher. It comes with abstract classes (also called placeholders), classes prefixed by a % symbol instead of a dot, that are not compiled in the final stylesheet, thus that cannot be used in the markup. Basically, you can make a selector inherits styles from another selector. The feature has to be the one which made Sass so popular compared to other CSS preprocessors including Less. My talk aimed at giving some hints to get started with Sass, along with a collection of usecases and code snippets to show how to push stylesheets to an upper level. So you declare a couple of variables, maybe make a mixin or two that you don’t really need and that’s pretty much it. But when you just get started with Sass, you don’t really know what to do. And it’s also very cool for a bunch of other things like responsive web design, modular architecture, calculations, namespaces, and so much more…Īll of this is awesome.Sass makes this possible: multiple files in development environment, one single file compressed in production. File concatenation: we often want to split our large stylesheets into several smaller ones but doing so increases the number of HTTP requests, thus the time the page need to load.Also easier to read than hexadecimal in my opinion. Very cool to avoid repeated back-and-forths between the IDE and Photoshop and having 50 shades of grey when you only need one (see what I did there?). Color functions: every preprocessor nowadays comes with a bunch of functions to ease color management (lighten, darken, transparentize, mix, complementary…).Very useful to output chuncks of code depending on some parameters (mixin arguments). Mixins: same as functions except it outputs code instead of returning a result.Give it parameters, it returns a result you can store in a variable or use as a value. Functions: I don’t think functions deserve an explanation.Can be very interesting to avoid code repetition. ![]() Nesting: it is the ability to nest rules within each others to create expanded CSS selectors.They’ll come native some day but meanwhile, we have to rely on CSS preprocessors. Variables: it’s been a while since we first asked for variables in CSS.You can think of Sass as an extension of CSS it adds to CSS what CSS doesn’t have and what CSS needs (or might need).Īmong other things, Sass can be very useful for: Sass -and pretty much any preprocessor- is a program aiming at extending a language in order to provide further features or a simplified syntax (or both). Instead, I’ll go straight to the introduction to explain what is a CSS preprocessor. I’ll skip the part where I introduce myself, I don’t think it has much point here. Just for your information, here are my slides in French powered by Reveal.js: What is Sass? It has been a really great experience and people were really receptive even if my talk was a bit technical.īecause slides are not very self-explanatory, I think it might be cool to dig deep into the topic with expanded explanations, so that everybody can now fully understand what I was trying to explain. As you may know, I have been speaking at KiwiParty about Sass in late June.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |