HTML and CSS Reference
In-Depth Information
.block ul.alternating li {
/** style your alternating li here **/
}
.block ul.alternating li a {
/** style your li link here **/
}
/** and the story continues **/
Syntactically Awesome Stylesheets (SASS) helps to get rid of this bulk with the
use of nesting, variables, mixins, and selector inheritance. SASS isn't CSS, and
requires a compiler to compile it into CSS.
As you can see from the preceding CSS, a lot of code is repeated.
Unfortunately, there is no way to remove the bulk in a way that can be
recognized by the browser, but there is a way to do this in a way that the CSS
you write is easier to maintain and port. This is known as nesting in SASS.
In this section, you will learn how to use SASS to produce organized, reusable,
and concrete CSS. You will learn how SASS can improve your development
workflow and change the way you think about CSS.
You will also learn how SASS can take a lot of the repetitive work out of using
similar CSS styles throughout your stylesheet and pave the way toward object-
orientated CSS, a way of thinking about the relationship between CSS and
HTML that treats each design element as its own independent design object.
Nesting
Nesting allows you to nest CSS styles within each other. As an example, the
previous code as nested SASS code would look like the following.
/**
* The SASS way to style a block in CSS
**/
.block {
/** style your block here **/
h1.heading {
/** style your header here **/
}
ul.alternating {
/** style your block ul here **/
