In this session, Paul Irish
The first tool introduced by Paul is SASS (Syntactically Awesome Stylesheets). SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Per the above definition, SASS is pretty close to LESS, the tool EdLab developers have been using. However, SASS does provide some unique features that makes it stand out. SASS users can choose to install an additional manager called COMPASS, which is a library that provides the basic SASS mixing definition, which is useful to most users.
Besides, SASS has a powerful directive @extend which allows a mixing to be inherited or overridden. This important OO features make it possible for developers to write even more organized code.
What's else, SASS has a special 'respond-to' technique. It's mainly used for so-called "media query" (to apply styling to specific browser types). This is similar to the switch syntax as in a normal programming language.
@if $name == small-screen
@media only screen and (min-width: 320px)
@if $name == large-screen
@media only screen and (min-width: 800px)
The next thing Paul recommended was Bower. Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat. Bower runs over Git, and is package-agnostic.
Bower command examples:
# Using the dependencies listed in the current directory's bower.json
# Using a local or remote package
# Using a specific Git-tagged version from a remote package
bower install #
Here's the list of available packages that are managed by Bower.
- continuous repaint mode
- fps meter & memory consumption
- show paint rects & layer border
- object allocation tracking
- layout thrashing details