10. What are CSS Preprocessor?
"CSS preprocessors take code written in the preprocessed
language and then convert that code into the same old css
we’ve been writing for years."
23. We are accustomed to do this:
/* primate.css */
.nav li {
list-style:none;
float:left;
}
.nav li a {
display:block;
padding:5px;
}
24. Now we can do this:
/* dev.scss */ /* output */
.nav { .nav li {
li { list-style: none;
float: left;
list-style:none;
}
float:left;
a { .nav li a {
display:block; display: block;
color:blue; color: blue;
} }
}
}
25. Parent Reference
/* dev.scss */ /* output */
.nav { .nav li {
li { list-style: none;
float: left;
list-style:none;
}
float:left;
a { .nav li a {
display:block; display: block;
color:blue; color: blue;
&:hover { }
color:red;
.nav li a:hover {
}
display: block;
} color: red;
} }
}