diff options
Diffstat (limited to 'less.html.markdown')
| -rw-r--r-- | less.html.markdown | 200 |
1 files changed, 105 insertions, 95 deletions
diff --git a/less.html.markdown b/less.html.markdown index 41d66a54..1b26eb99 100644 --- a/less.html.markdown +++ b/less.html.markdown @@ -6,9 +6,9 @@ contributors: --- Less is a CSS pre-processor, that adds features such as variables, nesting, mixins and more. -Less (and other preprocessors, such as [Sass](http://sass-lang.com/) help developers to write maintainable and DRY (Don't Repeat Yourself) code. +Less (and other preprocessors, such as [Sass](http://sass-lang.com/)) help developers to write maintainable and DRY (Don't Repeat Yourself) code. -```less +```css //Single line comments are removed when Less is compiled to CSS. @@ -16,20 +16,20 @@ Less (and other preprocessors, such as [Sass](http://sass-lang.com/) help develo /*Multi line comments are preserved. */ -/*Variables -==============================*/ +/* Variables +==============================*/ /* You can store a CSS value (such as a color) in a variable. -Use the '@' symbol to create 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. -Now if you want to change a color, you only have to make the change once.*/ + Now if you want to change a color, you only have to make the change once.*/ body { background-color: @primary-color; @@ -38,24 +38,25 @@ body { } /* This would compile to: */ + body { - background-color: #A3A4FF; + background-color: #a3a4ff; color: #51527F; font-family: 'Roboto', sans-serif; } /* This is much more maintainable than having to change the color -each time it appears throughout your stylesheet. */ + each time it appears throughout your stylesheet. */ -/*Mixins -==============================*/ +/* Mixins +==============================*/ /* If you find you are writing the same code for more than one -element, you might want to reuse that easily.*/ + element, you might want to reuse that easily.*/ .center { display: block; @@ -72,7 +73,8 @@ div { background-color: @primary-color; } -/*Which would compile to: */ +/* Which would compile to: */ + .center { display: block; margin-left: auto; @@ -86,10 +88,10 @@ 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 paranthesis +/* You can omit the mixin code from being compiled by adding parenthesis after the selector */ .center() { @@ -105,33 +107,97 @@ div { background-color: @primary-color; } -/*Which would compile to: */ +/* Which would compile to: */ div { display: block; margin-left: auto; margin-right: auto; left: 0; right: 0; - background-color: #A3A4FF; + background-color: #a3a4ff; } -/*Functions + +/* 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; +} + + + +/* Functions +==============================*/ + /* Less provides functions that can be used to accomplish a variety of - tasks. Consider the following */ + tasks. Consider the following: */ /* Functions can be invoked by using their name and passing in the - required arguments */ + required arguments. */ + 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 +206,10 @@ body { width: 10px; } +.header { + background-color: #010101; +} + .footer { background-color: rgba(0, 0, 0, 0.75); } @@ -148,19 +218,18 @@ body { mixins. When trying to choose between a function or a mixin, remember that mixins are best for generating CSS while functions are better for logic that might be used throughout your Less code. The examples in - the Math Operators' section are ideal candidates for becoming a reusable + the 'Math Operators' section are ideal candidates for becoming a reusable function. */ -/* This function will take a target size and the parent size and calculate - and return the percentage */ +/* This function calculates the average of two numbers: */ .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: */ @@ -169,11 +238,12 @@ div { padding: 33px; } + + /*Extend (Inheritance) ==============================*/ - /*Extend is a way to share the properties of one selector with another. */ .display { @@ -203,71 +273,10 @@ div { -/*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 ==============================*/ - /* Less allows you to create partial files. This can help keep your Less code modularized. Partial files conventionally begin with an '_', e.g. _reset.less. and are imported into a main less file that gets @@ -308,9 +317,9 @@ body { } -/*Math Operations -==============================*/ +/* Math Operations +==============================*/ /* Less provides the following operators: +, -, *, /, and %. These can @@ -365,15 +374,16 @@ 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 -Less can be used in any project as long as you have a program to compile it -into CSS. You'll want to verify that the CSS you're using is compatible -with your target browsers. +Less can be used in any project as long as you have a program to compile it into CSS. You'll want to verify that the CSS you're using is compatible with your target browsers. [QuirksMode CSS](http://www.quirksmode.org/css/) and [CanIUse](http://caniuse.com) are great resources for checking compatibility. ## Further reading * [Official Documentation](http://lesscss.org/features/) +* [Less CSS - Beginner's Guide](http://www.hongkiat.com/blog/less-basic/) |