Game Development Reference
In-Depth Information
Stylesheet languages above CSS
SASS (or SCSS) and LESS are both stylesheet languages that simplify writing and maintaining CSS
source codes. They are compiled into regular CSS.
We will use SASS in our examples (in fact, we're using the “old SASS style,” which is just personal
preference; both provide quite similar features).
The following is a list of the main advantages of such languages:
Nesting
selectors avoids repetition (don't repeat yourself)
Defining your
variables
helps to define once and easily change shared assets
Using elementary
operations
on pixels, colors, and so forth
Reusability
lets you define your own “mixins” to factorize your source code
CSS
minification
and unification (with an include system)
The syntax is simplified in CSS—no more brackets or semicolons—but indenting is essential
Compass
Compass defines a set of ready-to-use SASS mixins. It helps to easily use CSS3 features. Moreover, it
provides browser support for not-yet-standardized CSS properties.
We will now go deeper and see a real usage of Compass and SASS in the next section.
Making our page transition effects
Today, navigation in games and applications is done with links and back/next buttons and, usually, some
animated transitions between pages occur.
We will style the work made in the HTML section and make page transition effects. We will use CSS
Transitions and CSS Transforms to perform them, as shown in Listing 3-6.
Listing 3-6.
The CSS Transitions and Transforms
// page generic styles
#pages > section
background: black url(background.jpg) no-repeat 50% 0%
position: absolute
