sass variables inside local directory codekit

#SASS VARIABLES INSIDE LOCAL DIRECTORY CODEKIT CODE#

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…).

#SASS VARIABLES INSIDE LOCAL DIRECTORY CODEKIT CODE#

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.

Sass variables inside local directory codekit