CSS Preprocessors to the Rescue!

Editor's Notes

1. ◦ Hello my name is Ryan DeStefano, I am a designer at SmartLogic.  We build web and mobile apps here in Baltimore. ◦ today I am going to talk about CSS preprocessors and how they can help you write better style sheets.
2. ▪ write style sheets that are less frustrating ▪ don ’t repeat yourself ▪ write less code, more importantly write smarter code
3. • inability to nest code - requires writing lengthy selectors takes too much time - don ’t waste your time catering to CSS’s inefficiencies makes navigating CSS files cumbersome
4. inability to reuse code - this is the big one ◦ hinders maintainability - if you want to change something, such as a color, or a font size, or a width, you have to make sure you change it everywhere it is used
5. ▪ when you are forced to repeat yourself you are writing less maintainable code. ◦ writing CSS requires you to repeat yourself quite a bit. ▪ it would be really nice if I could write less CSS myself and make the computer write the rest for me. • inability to reuse code - this is the big one ◦ hinders maintainability - if you want to change something, such as a color, or a font size, or a width, you have to make sure you change it everywhere it is used ◦ takes too much time - don ’t waste your time catering to CSS’s inefficiencies ▪ maybe I ’m not sure if I really want to make a change or not - CSS requires a lot of work just to see what something would look like.
6. ◦ Browsers only understand CSS, so you are forced to communicate in CSS. Unless you use a translator - a processor that converts what you write into CSS. Preprocessor translates whatever you write into CSS so that the browser can understand it.   ◦ Preprocessed languages, such as Sass, compile to normal CSS.  You can write in any format you like, as long as the preprocessor understands what you are writing and can compile it to CSS. Everything you write is converted to plain CSS.
7. what preprocessors are available? ▪ several, Sass and LESS are most popular, there are others such as stylus ▪ I will be using Sass in this presentation, in particular the form of Sass known as SCSS.  I ’ve selected this because it’s the most similar to plain CSS.  It is also the one I use. ▪ The syntax of each preprocessor varies.  Some are move removed from CSS, such as Stylus which does not use braces, colons, or semicolons.  There is an alternate form of Sass which also relies on significant whitespace. The most popular preprocessed languages have syntaxes that are similar to CSS.  This allows people who know CSS to learn the preprocessed language relatively easily.  In Sass, for example, all valid CSS is also valid Sass. ◦ Being freed from the constraint of only writing code that the browser understands allows for additions to CSS.  For example, CSS does not handle variables - but you can use variables in a preprocessed language, because the preprocessor understands how to compile the SCSS to CSS.
8. Parent reference
9. same for pseudo-selectors
10. ◦ variables ▪ most simple way to reuse code ▪ perfect for colors, font sizes, width, heights, etc.. - anything that can be reused or changed
11. Using variables in this way can allow you to have a lot of control over the way a site looks.  You can build an admin-panel of sorts that controls colors, sizes, etc.. all from one place.  This can be can be a dedicated .scss file that is then imported into all other .scss files in a project.
12. ▪ Same thing with mixins - consistency throughout your site.  If you change something, you should be changing all instance of that thing.  The ‘admin panel’ makes this super easy.
13. arguments / parameters
14. Operations also allow for increased consistency.  For example, setting a base font-size and making larger and smaller sizes as percentages of the base.  Use variables to describe these.
15. ◦ Using variables and mixins is not only a matter of convenience/laziness.  It is also less error-prone.  For example, a site may use a particular shade of blue throughout.  If I decide that the blue is too light, it could be difficult and tedious for me to switch to a darker shade.  The color may be used across several CSS files, so not only would it take me a bit of time to update every instance of the color blue, but it ’s also possible that I could miss one.  Defining the color with a variable allows me to use a darker shade of blue by changing only one line of code.  This is way faster and I know that I’m not going to be accidentally missing and instance of the colors I want to change. ◦ What else can preprocessors do?
16. ◦ When can we expect CSS to evolve? - don ’t get your hopes up. ▪ no plans in the near future - Improvements to CSS do not happen frequently.  CSS is progressing more slowly that would be preferable to web developers and designers.  Preprocessors help fill in where CSS is lacking. ▪ even if CSS spec does catch up, when will the browsers implement these changes? ▪ IE won ’t be quick and users will still be using older versions on IE. ◦ We need improvements now!
17. ◦ they are for anyone who has a good understanding of CSS ◦ They are great for designers who already know CSS, because they follow the same syntax as CSS, so you don ’t have to worry about learning a completely different language.  All CSS is valid Sass, so you can use as much or as little of the additional features. ◦ Preprocessors are great for developers because they introduce concepts such as variables and operations, which you already know, and make CSS seem more like a true programming language. ◦ who are they not for? ▪ They are not for people who don ’t already know CSS.  You should learn CSS first so that you can know if the compiled CSS is any good. ▪ You would need to know CSS so that you can troubleshoot any issues you may run into, such as viewing the outputted CSS in the inspector. ▪ Preprocessors are not a shortcut or an excuse not to learn CSS.