Skip to content

Commit 50471c0

Browse files
committed
beefing up css preprocessor section
1 parent a2a09a7 commit 50471c0

File tree

3 files changed

+59
-5
lines changed

3 files changed

+59
-5
lines changed

cascading-style-sheets.html

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,41 @@ <h2>Responsive design</h2>
9191
<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>
9292
in the CSS. </p>
9393
<h2>CSS preprocessors</h2>
94+
<p>A CSS preprocessor compiles a processed language into plain CSS code. CSS
95+
preprocessing languages add syntax such as variables, mixins and functions
96+
to reduce code duplication. The additional syntax also makes it possible for
97+
designers to use these basic programming constructs to write maintainable
98+
front end code.</p>
9499
<ul>
95100
<li>
96-
<p><a href="http://sass-lang.com/">SASS</a></p>
101+
<p><a href="http://sass-lang.com/">Sass</a> is currently the favored preprocessor in
102+
the design community. Sass is considered the most powerful CSS preprocessor
103+
in terms of advanced language features.</p>
97104
</li>
98105
<li>
99-
<p><a href="http://lesscss.org/">LESS</a></p>
106+
<p><a href="http://lesscss.org/">LESS</a> is right up there with Sass and has an ace up
107+
its sleeve in that the <a href="http://getbootstrap.com/">Bootstrap Framework</a> is
108+
written in LESS which brings up its popularity.</p>
109+
</li>
110+
<li>
111+
<p><a href="http://learnboost.github.io/stylus/">Stylus</a> is often cited as the third
112+
most popular CSS preprocessing language.</p>
113+
</li>
114+
</ul>
115+
<h3>CSS preprocessor resources</h3>
116+
<ul>
117+
<li>
118+
<p>The Advanced Guide to HTML and CSS book has a well-written chapter on
119+
<a href="http://learn.shayhowe.com/advanced-html-css/preprocessors">preprocessors</a>.</p>
120+
</li>
121+
<li>
122+
<p><a href="http://css-tricks.com/sass-vs-less/">Sass vs LESS</a> provides a short answer
123+
on which framework to use then a longer more detailed response for those
124+
interested in understanding the details.</p>
125+
</li>
126+
<li>
127+
<p><a href="http://blog.teamtreehouse.com/how-to-choose-the-right-css-preprocessor">How to choose the right CSS preprocessor</a>
128+
has a comparison of Sass, LESS and Stylus.</p>
100129
</li>
101130
</ul>
102131
<h2>CSS frameworks</h2>

feeds/all.atom.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<feed xmlns="http://www.w3.org/2005/Atom"><title>Matt Makai</title><link href="http://www.fullstackpython.com/" rel="alternate"></link><link href="http://www.fullstackpython.com/feeds/all.atom.xml" rel="self"></link><id>http://www.fullstackpython.com/</id><updated>2014-05-16T07:52:36Z</updated></feed>
2+
<feed xmlns="http://www.w3.org/2005/Atom"><title>Matt Makai</title><link href="http://www.fullstackpython.com/" rel="alternate"></link><link href="http://www.fullstackpython.com/feeds/all.atom.xml" rel="self"></link><id>http://www.fullstackpython.com/</id><updated>2014-05-16T08:08:33Z</updated></feed>

source/content/pages/05-client-side/0501-css.markdown

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,9 +80,34 @@ in the CSS.
8080

8181

8282
## CSS preprocessors
83-
* [SASS](http://sass-lang.com/)
83+
A CSS preprocessor compiles a processed language into plain CSS code. CSS
84+
preprocessing languages add syntax such as variables, mixins and functions
85+
to reduce code duplication. The additional syntax also makes it possible for
86+
designers to use these basic programming constructs to write maintainable
87+
front end code.
8488

85-
* [LESS](http://lesscss.org/)
89+
* [Sass](http://sass-lang.com/) is currently the favored preprocessor in
90+
the design community. Sass is considered the most powerful CSS preprocessor
91+
in terms of advanced language features.
92+
93+
* [LESS](http://lesscss.org/) is right up there with Sass and has an ace up
94+
its sleeve in that the [Bootstrap Framework](http://getbootstrap.com/) is
95+
written in LESS which brings up its popularity.
96+
97+
* [Stylus](http://learnboost.github.io/stylus/) is often cited as the third
98+
most popular CSS preprocessing language.
99+
100+
101+
### CSS preprocessor resources
102+
* The Advanced Guide to HTML and CSS book has a well-written chapter on
103+
[preprocessors](http://learn.shayhowe.com/advanced-html-css/preprocessors).
104+
105+
* [Sass vs LESS](http://css-tricks.com/sass-vs-less/) provides a short answer
106+
on which framework to use then a longer more detailed response for those
107+
interested in understanding the details.
108+
109+
* [How to choose the right CSS preprocessor](http://blog.teamtreehouse.com/how-to-choose-the-right-css-preprocessor)
110+
has a comparison of Sass, LESS and Stylus.
86111

87112

88113
## CSS frameworks

0 commit comments

Comments
 (0)