This small section's intent is to show you how well Play! 2 is integrated with the Web stack, especially the HTML styling.
Everyone who has worked with CSS knows that certain things are driving us crazy, such as the no-variable feature, the no-hierarchy feature, the vendor-specific boilerplates, duplication of code, and so on.
These problems are addressed by LESS, which is a richer way of defining styling rules through the use of the following:
- Mixins: These are like a predefined set of properties that can be embedded in other rules. A mixin can also take arguments to change the value of these properties.
- Variables, which are probably the worst lack in pure CSS.
- Functions: These are JavaScript code and can be used to change how a rule or a value is defined. For example, using a dedicated function one could lighten a color or darken it, and much more.
- Hierarchical definitions (avoiding "repeating yourself" in selectors): Rules can be embedded to mimic the hierarchy of elements rather than replicating the selectors.
Play! 2 will compile (by default) all LESS files that are in app/assets/stylesheets into CSS files that will be placed in the public/stylesheets folder. So these CSS files will be available just as any other styling files: using their URL; but Play! will also handle them using HTML features in such a way that they won't be fetched several times for nothing (for instance using the ETag). So, we're going to skin our templates a bit by creating a new file, app/assets/stylesheets/book.less.
Before we forget, we must add the related style import into our main template:
Next, I've added sample content for our application. It uses some of the features brought by LESS. They are very easy to use, and so are left to your interpretation.
