From f3b10beb01795bf7513ec8d06c9e90ab98df7a83 Mon Sep 17 00:00:00 2001 From: Adam Date: Fri, 12 Feb 2016 23:04:31 -0800 Subject: Clean up various errors --- less.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less.html.markdown') diff --git a/less.html.markdown b/less.html.markdown index 41d66a54..7195271e 100644 --- a/less.html.markdown +++ b/less.html.markdown @@ -8,7 +8,7 @@ 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 +```css //Single line comments are removed when Less is compiled to CSS. -- cgit v1.2.3 From 9e4ec769f02c03517a7133b90980f861139e4e42 Mon Sep 17 00:00:00 2001 From: Jacob Ward Date: Sun, 6 Mar 2016 20:18:36 -0700 Subject: [less/en] paranthesis -> parenthesis --- less.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less.html.markdown') diff --git a/less.html.markdown b/less.html.markdown index 7195271e..a1018ca3 100644 --- a/less.html.markdown +++ b/less.html.markdown @@ -89,7 +89,7 @@ div { 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() { -- cgit v1.2.3 From dce4fefd20c025d1dd7b05781e587a6c7997da91 Mon Sep 17 00:00:00 2001 From: tiaan Date: Sun, 31 Jul 2016 14:52:41 +0200 Subject: Fix inconsistencies and add resource links --- less.html.markdown | 150 ++++++++++++++++++++++++++++------------------------- 1 file changed, 80 insertions(+), 70 deletions(-) (limited to 'less.html.markdown') 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/) -- cgit v1.2.3 From f6c353eb37b553ae18e659eb5b6eb883e43e4b00 Mon Sep 17 00:00:00 2001 From: tiaan Date: Thu, 4 Aug 2016 23:05:29 +0200 Subject: Remove name from contributors list. --- less.html.markdown | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'less.html.markdown') diff --git a/less.html.markdown b/less.html.markdown index f4887947..d88b6ee9 100644 --- a/less.html.markdown +++ b/less.html.markdown @@ -3,7 +3,6 @@ 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. @@ -26,7 +25,7 @@ Less (and other preprocessors, such as [Sass](http://sass-lang.com/) help develo Use the '@' symbol to create a variable. */ @primary-color: #a3a4ff; -@secondary-color: #51527f; +@secondary-color: #51527f; @body-font: 'Roboto', sans-serif; /* You can use the variables throughout your stylesheet. -- cgit v1.2.3 From f7a106ebc5deef8adf5403037df0266e0c566112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Su=C3=A1rez=20Ortega?= Date: Sat, 15 Oct 2016 16:22:02 +0200 Subject: Fix typos and improve styles (#2460) --- less.html.markdown | 59 +++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 29 deletions(-) (limited to 'less.html.markdown') diff --git a/less.html.markdown b/less.html.markdown index d88b6ee9..ee67c1bc 100644 --- a/less.html.markdown +++ b/less.html.markdown @@ -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; @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,6 +38,7 @@ body { } /* This would compile to: */ + body { background-color: #a3a4ff; color: #51527F; @@ -46,16 +47,16 @@ body { /* 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; @@ -105,7 +107,7 @@ div { background-color: @primary-color; } -/*Which would compile to: */ +/* Which would compile to: */ div { display: block; margin-left: auto; @@ -116,12 +118,12 @@ div { } -/*Nesting -==============================*/ +/* Nesting +==============================*/ -/*Less allows you to nest selectors within selectors */ +/* Less allows you to nest selectors within selectors */ ul { list-style-type: none; @@ -135,8 +137,8 @@ ul { /* '&' 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: */ + Best practices recommend going no more than 3 levels deep when nesting. + For example: */ ul { list-style-type: none; @@ -175,16 +177,17 @@ ul li a { } -/*Functions -==============================*/ +/* 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); } @@ -215,11 +218,10 @@ 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); @@ -236,11 +238,12 @@ div { padding: 33px; } + + /*Extend (Inheritance) ==============================*/ - /*Extend is a way to share the properties of one selector with another. */ .display { @@ -269,11 +272,11 @@ div { add unnecessary bloat to the files created by the Less compiler. */ + /*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 @@ -314,9 +317,9 @@ body { } -/*Math Operations -==============================*/ +/* Math Operations +==============================*/ /* Less provides the following operators: +, -, *, /, and %. These can @@ -377,9 +380,7 @@ If you want to play with Less in your browser, check out: ## 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. -- cgit v1.2.3 From 7dbbcd50def4a1d92f95058ad636083edb92a6a9 Mon Sep 17 00:00:00 2001 From: Jiang Haiyun Date: Tue, 13 Dec 2016 09:29:12 +0800 Subject: missing right parenthesis (#2596) --- less.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less.html.markdown') diff --git a/less.html.markdown b/less.html.markdown index ee67c1bc..1b26eb99 100644 --- a/less.html.markdown +++ b/less.html.markdown @@ -6,7 +6,7 @@ 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. ```css -- cgit v1.2.3