diff options
Diffstat (limited to 'less.html.markdown')
| -rw-r--r-- | less.html.markdown | 150 |
1 files changed, 80 insertions, 70 deletions
diff --git a/less.html.markdown b/less.html.markdown index a1018ca3..f4887947 100644 --- a/less.html.markdown +++ b/less.html.markdown @@ -3,6 +3,7 @@ language: less filename: learnless.less contributors: - ["Saravanan Ganesh", "http://srrvnn.me"] + - ["Tiaan du Plessis", "https://github.com/tidupls"] --- Less is a CSS pre-processor, that adds features such as variables, nesting, mixins and more. @@ -24,8 +25,8 @@ Less (and other preprocessors, such as [Sass](http://sass-lang.com/) help develo /* You can store a CSS value (such as a color) in a variable. Use the '@' symbol to create a variable. */ -@primary-color: #A3A4FF; -@secondary-color: #51527F; +@primary-color: #a3a4ff; +@secondary-color: #51527f; @body-font: 'Roboto', sans-serif; /* You can use the variables throughout your stylesheet. @@ -39,7 +40,7 @@ body { /* This would compile to: */ body { - background-color: #A3A4FF; + background-color: #a3a4ff; color: #51527F; font-family: 'Roboto', sans-serif; } @@ -86,7 +87,7 @@ div { margin-right: auto; left: 0; right: 0; - background-color: #A3A4FF; + background-color: #a3a4ff; } /* You can omit the mixin code from being compiled by adding parenthesis @@ -112,7 +113,66 @@ div { margin-right: auto; left: 0; right: 0; - background-color: #A3A4FF; + background-color: #a3a4ff; +} + + +/*Nesting +==============================*/ + + + +/*Less allows you to nest selectors within selectors */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: #f00; + } +} + +/* '&' will be replaced by the parent selector. */ +/* You can also nest pseudo-classes. */ +/* Keep in mind that over-nesting will make your code less maintainable. +Best practices recommend going no more than 3 levels deep when nesting. +For example: */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: red; + + &:hover { + background-color: blue; + } + + a { + color: white; + } + } +} + +/* Compiles to: */ + +ul { + list-style-type: none; + margin-top: 2em; +} + +ul li { + background-color: red; +} + +ul li:hover { + background-color: blue; +} + +ul li a { + color: white; } @@ -130,8 +190,12 @@ body { width: round(10.25px); } +.header { + background-color: lighten(#000, 0.5); +} + .footer { - background-color: fadeout(#000000, 0.25) + background-color: fadeout(#000, 0.25) } /* Compiles to: */ @@ -140,6 +204,10 @@ body { width: 10px; } +.header { + background-color: #010101; +} + .footer { background-color: rgba(0, 0, 0, 0.75); } @@ -155,12 +223,12 @@ body { and return the percentage */ .average(@x, @y) { - @average_result: ((@x + @y) / 2); + @average-result: ((@x + @y) / 2); } div { .average(16px, 50px); // "call" the mixin - padding: @average_result; // use its "return" value + padding: @average-result; // use its "return" value } /* Compiles to: */ @@ -202,67 +270,6 @@ div { add unnecessary bloat to the files created by the Less compiler. */ - -/*Nesting -==============================*/ - - - -/*Less allows you to nest selectors within selectors */ - -ul { - list-style-type: none; - margin-top: 2em; - - li { - background-color: #FF0000; - } -} - -/* '&' will be replaced by the parent selector. */ -/* You can also nest pseudo-classes. */ -/* Keep in mind that over-nesting will make your code less maintainable. -Best practices recommend going no more than 3 levels deep when nesting. -For example: */ - -ul { - list-style-type: none; - margin-top: 2em; - - li { - background-color: red; - - &:hover { - background-color: blue; - } - - a { - color: white; - } - } -} - -/* Compiles to: */ - -ul { - list-style-type: none; - margin-top: 2em; -} - -ul li { - background-color: red; -} - -ul li:hover { - background-color: blue; -} - -ul li a { - color: white; -} - - - /*Partials and Imports ==============================*/ @@ -365,7 +372,9 @@ body { ## Practice Less -If you want to play with Less in your browser, check out [LESS2CSS](http://lesscss.org/less-preview/). +If you want to play with Less in your browser, check out: +* [Codepen](http://codepen.io/) +* [LESS2CSS](http://lesscss.org/less-preview/) ## Compatibility @@ -377,3 +386,4 @@ with your target browsers. ## Further reading * [Official Documentation](http://lesscss.org/features/) +* [Less CSS - Beginner's Guide](http://www.hongkiat.com/blog/less-basic/) |