diff options
| -rw-r--r-- | csharp.html.markdown | 120 | ||||
| -rw-r--r-- | de-de/LOLCODE-de.html.markdown | 188 | ||||
| -rw-r--r-- | pt-br/java-pt.html.markdown | 2 | ||||
| -rw-r--r-- | pt-br/javascript-pt.html.markdown | 2 | ||||
| -rw-r--r-- | pt-br/json-pt.html.markdown | 2 | ||||
| -rw-r--r-- | pt-br/visualbasic-pt.html.markdown | 12 | ||||
| -rw-r--r-- | pt-br/whip-pt.html.markdown | 247 | ||||
| -rw-r--r-- | vi-vn/less-vi.html.markdown | 395 |
8 files changed, 943 insertions, 25 deletions
diff --git a/csharp.html.markdown b/csharp.html.markdown index c98a7da9..3790747c 100644 --- a/csharp.html.markdown +++ b/csharp.html.markdown @@ -640,6 +640,54 @@ on a new line! ""Wow!"", the masses cried"; } } + + // DELEGATES AND EVENTS + public class DelegateTest + { + public static int count = 0; + public static int Increment() + { + // increment count then return it + return ++count; + } + + // A delegate is a reference to a method + // To reference the Increment method, + // first declare a delegate with the same signature + // ie. takes no arguments and returns an int + public delegate int IncrementDelegate(); + + // An event can also be used to trigger delegates + // Create an event with the delegate type + public static event IncrementDelegate MyEvent; + + static void Main(string[] args) + { + // Refer to the Increment method by instantiating the delegate + // and passing the method itself in as an argument + IncrementDelegate inc = new IncrementDelegate(Increment); + Console.WriteLine(inc()); // => 1 + + // Delegates can be composed with the + operator + IncrementDelegate composedInc = inc; + composedInc += inc; + composedInc += inc; + + // composedInc will run Increment 3 times + Console.WriteLine(composedInc()); // => 4 + + + // Subscribe to the event with the delegate + MyEvent += new IncrementDelegate(Increment); + MyEvent += new IncrementDelegate(Increment); + + // Trigger the event + // ie. run all delegates subscribed to this event + Console.WriteLine(MyEvent()); // => 6 + } + } + + // Class Declaration Syntax: // <public/private/protected/internal> class <class name>{ // //data fields, constructors, functions all inside. @@ -1106,25 +1154,65 @@ namespace Learning.More.CSharp } } +//New C# 7 Feature +//Install Microsoft.Net.Compilers Latest from Nuget +//Install System.ValueTuple Latest from Nuget using System; namespace Csharp7 { - //New C# 7 Feature - //Install Microsoft.Net.Compilers Latest from Nuget - //Install System.ValueTuple Latest from Nuget - class Program - { - static void Main(string[] args) - { - //Type 1 Declaration - (string FirstName, string LastName) names1 = ("Peter", "Parker"); - Console.WriteLine(names1.FirstName); - - //Type 2 Declaration - var names2 = (First:"Peter", Last:"Parker"); - Console.WriteLine(names2.Last); - } - } + // TUPLES, DECONSTRUCTION AND DISCARDS + class TuplesTest + { + public (string, string) GetName() + { + // Fields in tuples are by default named Item1, Item2... + var names1 = ("Peter", "Parker"); + Console.WriteLine(names1.Item2); // => Parker + + // Fields can instead be explicitly named + // Type 1 Declaration + (string FirstName, string LastName) names2 = ("Peter", "Parker"); + + // Type 2 Declaration + var names3 = (First:"Peter", Last:"Parker"); + + Console.WriteLine(names2.FirstName); // => Peter + Console.WriteLine(names3.Last); // => Parker + + return names3; + } + + public string GetLastName() { + var fullName = GetName(); + + // Tuples can be deconstructed + (string firstName, string lastName) = fullName; + + // Fields in a deconstructed tuple can be discarded by using _ + var (_, last) = fullName; + return last; + } + + // Any type can be deconstructed in the same way by + // specifying a Deconstruct method + public int randomNumber = 4; + public int anotherRandomNumber = 10; + + public void Deconstruct(out int randomNumber, out int anotherRandomNumber) + { + randomNumber = this.randomNumber; + anotherRandomNumber = this.anotherRandomNumber; + } + + static void Main(string[] args) + { + var tt = new TuplesTest(); + (int num1, int num2) = tt; + Console.WriteLine($"num1: {num1}, num2: {num2}"); // => num1: 4, num2: 10 + + Console.WriteLine(tt.GetLastName()); + } + } } ``` diff --git a/de-de/LOLCODE-de.html.markdown b/de-de/LOLCODE-de.html.markdown new file mode 100644 index 00000000..155c5657 --- /dev/null +++ b/de-de/LOLCODE-de.html.markdown @@ -0,0 +1,188 @@ +--- +language: LOLCODE +filename: learnLOLCODE.lol +contributors: + - ["abactel", "https://github.com/abactel"] +translators: + - ["Henrik Jürges", "http://github.com/santifa"] +lang: de-de +--- + +LOLCODE ist eine esoterische Programmiersprache die die Sprache der [lolcats](https://upload.wikimedia.org/wikipedia/commons/a/ab/Lolcat_in_folder.jpg?1493656347257) nachahmt. + +``` +BTW Das ist ein Kommentar +BTW Das Programm muss mit `HAI <language version>` beginnen und mit `KTHXBYE` enden. + +HAI 1.3 +CAN HAS STDIO? BTW Standard Header importieren + +OBTW + ========================================================================== + ============================== Grundlegendes ============================= + ========================================================================== +TLDR + +BTW Texte anzeigen: +VISIBLE "HELLO WORLD" + +BTW Variablen deklarieren: +I HAS A MESSAGE ITZ "CATZ ARE GOOD" +VISIBLE MESSAGE + +OBTW + Variablen sind dynamisch typisiert und der Typ muss nicht explizit + angegeben werden. Die möglichen Typen sind: +TLDR + +I HAS A STRING ITZ "DOGZ ARE GOOOD" BTW Typ ist YARN +I HAS A INTEGER ITZ 42 BTW Typ ist NUMBR +I HAS A FLOAT ITZ 3.1415 BTW Typ ist NUMBAR +I HAS A BOOLEAN ITZ WIN BTW Typ ist TROOF +I HAS A UNTYPED BTW Typ ist NOOB + +BTW Eingaben von Nutzern: +I HAS A AGE +GIMMEH AGE +BTW Die Variable wird als YARN gespeichert und kann in eine +BTW NUMBR konvertiert werden: +AGE IS NOW A NUMBR + +OBTW + ========================================================================== + ================================== MATHE ================================= + ========================================================================== +TLDR + +BTW LOLCODE benutzt polnische Notation für Mathe. + +BTW grundlegende mathematische Notationen: + +SUM OF 21 AN 33 BTW 21 + 33 +DIFF OF 90 AN 10 BTW 90 - 10 +PRODUKT OF 12 AN 13 BTW 12 * 13 +QUOSHUNT OF 32 AN 43 BTW 32 / 43 +MOD OF 43 AN 64 BTW 43 modulo 64 +BIGGR OF 23 AN 53 BTW max(23, 53) +SMALLR OF 53 AN 45 BTW min(53, 45) + +BTW binäre Notation: + +BOTH OF WIN AN WIN BTW und: WIN if x=WIN, y=WIN +EITHER OF FAIL AN WIN BTW oder: FAIL if x=FAIL, y=FAIL +WON OF WIN AN FAIL BTW exklusives oder: FAIL if x=y +NOT FAIL BTW unäre Negation: WIN if x=FAIL +ALL OF WIN AN WIN MKAY BTW beliebige Stelligkeit bei AND +ANY OF WIN AN FAIL MKAY BTW beliebige Stelligkeit bei OR + +BTW Vergleiche: + +BOTH SAEM "CAT" AN "DOG" BTW WIN wenn x == y +DIFFRINT 732 AN 184 BTW WIN wenn x != y +BOTH SAEM 12 AN BIGGR OF 12 AN 4 BTW x >= y +BOTH SAEM 43 AN SMALLR OF 43 AN 56 BTW x <= y +DIFFRINT 64 AN SMALLR OF 64 AN 2 BTW x > y +DIFFRINT 75 AN BIGGR OF 75 AN 643 BTW x < y + +OBTW + ========================================================================== + ============================= Flusskontrolle ============================= + ========================================================================== +TLDR + +BTW If/then Statement: +I HAS A ANIMAL +GIMMEH ANIMAL +BOTH SAEM ANIMAL AN "CAT", O RLY? + YA RLY + VISIBLE "YOU HAV A CAT" + MEBBE BOTH SAEM ANIMAL AN "MAUS" + VISIBLE "NOM NOM NOM. I EATED IT." + NO WAI + VISIBLE "AHHH IS A WOOF WOOF" +OIC + +BTW Case Statement: +I HAS A COLOR +GIMMEH COLOR +COLOR, WTF? + OMG "R" + VISIBLE "RED FISH" + GTFO + OMG "Y" + VISIBLE "YELLOW FISH" + BTW Weil hier kein `GTFO` ist wird auch das nächste Statement überprüft + OMG "G" + OMG "B" + VISIBLE "FISH HAS A FLAVOR" + GTFO + OMGWTF + VISIBLE "FISH IS TRANSPARENT OHNO WAT" +OIC + +BTW For Schleife: +I HAS A TEMPERATURE +GIMMEH TEMPERATURE +TEMPERATURE IS NOW A NUMBR +IM IN YR LOOP UPPIN YR ITERATOR TIL BOTH SAEM ITERATOR AN TEMPERATURE + VISIBLE ITERATOR +IM OUTTA YR LOOP + +BTW While Schleife: +IM IN YR LOOP NERFIN YR ITERATOR WILE DIFFRINT ITERATOR AN -10 + VISIBLE ITERATOR +IM OUTTA YR LOOP + +OBTW + ========================================================================= + ================================ Strings ================================ + ========================================================================= +TLDR + +BTW Zeilenumbrüche: +VISIBLE "FIRST LINE :) SECOND LINE" + +BTW Tabulatoren: +VISIBLE ":>SPACES ARE SUPERIOR" + +BTW Bell (macht beep): +VISIBLE "NXT CUSTOMER PLS :o" + +BTW Anführungszeichen in Strings: +VISIBLE "HE SAID :"I LIKE CAKE:"" + +BTW Doppelpunkte in Strings : +VISIBLE "WHERE I LIVE:: CYBERSPACE" + +OBTW + ========================================================================= + =============================== Funktionen ============================== + ========================================================================= +TLDR + +BTW Definieren einer neuen Funktion: +HOW IZ I SELECTMOVE YR MOVE BTW `MOVE` ist ein Argument + BOTH SAEM MOVE AN "ROCK", O RLY? + YA RLY + VISIBLE "YOU HAV A ROCK" + NO WAI + VISIBLE "OH NO IS A SNIP-SNIP" + OIC + GTFO BTW Gibt NOOB zurück +IF U SAY SO + +BTW Eine Funktion deklarieren und einen Wert zurückgeben: +HOW IZ I IZYELLOW + FOUND YR "YELLOW" +IF U SAY SO + +BTW Eine Funktion aufrufen: +I IZ IZYELLOW MKAY + +KTHXBYE +``` + +## Weiterführende Informationen: + +- [LCI compiler](https://github.com/justinmeza/lci) +- [Official spec](https://github.com/justinmeza/lolcode-spec/blob/master/v1.2/lolcode-spec-v1.2.md) diff --git a/pt-br/java-pt.html.markdown b/pt-br/java-pt.html.markdown index 82989502..1b9d7fc6 100644 --- a/pt-br/java-pt.html.markdown +++ b/pt-br/java-pt.html.markdown @@ -42,7 +42,7 @@ public class LearnJava { " Double: " + 3.14 + " Boolean: " + true); - // Para imprimir sem inserir uma nova lina, use o System.out.print + // Para imprimir sem inserir uma nova linha, use o System.out.print System.out.print("Olá "); System.out.print("Mundo"); diff --git a/pt-br/javascript-pt.html.markdown b/pt-br/javascript-pt.html.markdown index 7b6729ef..ed4a6ff3 100644 --- a/pt-br/javascript-pt.html.markdown +++ b/pt-br/javascript-pt.html.markdown @@ -25,7 +25,7 @@ Feedback são muito apreciados! Você me encontrar em ```js // Comentários são como em C. Comentários de uma linha começam com duas barras, -/* e comentários de múltplas linhas começam com barra-asterisco +/* e comentários de múltiplas linhas começam com barra-asterisco e fecham com asterisco-barra */ // comandos podem ser terminados com ; diff --git a/pt-br/json-pt.html.markdown b/pt-br/json-pt.html.markdown index fd822c03..62d9ccad 100644 --- a/pt-br/json-pt.html.markdown +++ b/pt-br/json-pt.html.markdown @@ -16,7 +16,7 @@ Como JSON é um formato de intercâmbio de dados, este será, muito provavelment JSON na sua forma mais pura não tem comentários, mas a maioria dos analisadores aceitarão comentários no estilo C (//, /\* \*/). No entanto estes devem ser evitados para otimizar a compatibilidade. -Um valor JSON pode ser um numero, uma string, um array, um objeto, um booleano (true, false) ou null. +Um valor JSON pode ser um número, uma string, um array, um objeto, um booleano (true, false) ou null. Os browsers suportados são: Firefox 3.5+, Internet Explorer 8.0+, Chrome 1.0+, Opera 10.0+, e Safari 4.0+. diff --git a/pt-br/visualbasic-pt.html.markdown b/pt-br/visualbasic-pt.html.markdown index 76cca567..b94ab609 100644 --- a/pt-br/visualbasic-pt.html.markdown +++ b/pt-br/visualbasic-pt.html.markdown @@ -15,9 +15,9 @@ module Module1 Sub Main () ' Uma visão geral de console de aplicativos do Visual Basic antes de - ' mergulharmos mais profundamente na linguagem + ' mergulharmos mais profundamente na linguagem. ' Aspas simples começam comentários. - ' Para Navegar este tutorial dentro do compilador do Visual Basic, + ' Para navegar neste tutorial dentro do compilador do Visual Basic, ' eu criei um sistema de navegação. ' Este sistema de navegação vai ser explicado conforme avançarmos no ' tutorial, e você vai entender o que isso significa. @@ -93,16 +93,16 @@ module Module1 Private Sub HelloWorldInput () Console.Title = " Olá Mundo YourName | Saiba X em Y Minutes" ' Variáveis - 'Os dados inseridos por um usuário precisa ser armazenada . + 'Os dados inseridos por um usuário precisam ser armazenados. ' As variáveis também começar com um Dim e terminar com um Como VariableType . - ' Neste tutorial, nós queremos saber o que o seu nome, e faça o programa + ' Neste tutorial, nós queremos saber qual é o seu nome, e faça o programa ' Responder ao que é dito. Nome de usuário Dim As String " Nós usamos string como string é uma variável de texto baseado . Console.WriteLine (" Olá, Qual é o seu nome? ") ' Peça ao usuário seu nome. - username = Console.ReadLine () ' armazena o nome usuários. - Console.WriteLine (" Olá " + nome do usuário) " A saída é Olá ' Seu nome ' + username = Console.ReadLine () ' armazena o nome do usuário. + Console.WriteLine (" Olá " + username) ' A saída é "Olá < seu nome >". Console.ReadLine () ' Outsputs acima. ' O código acima irá lhe fazer uma pergunta seguiu imprimindo sua resposta. " Outras variáveis incluem Integer e usamos inteiro para números inteiros. diff --git a/pt-br/whip-pt.html.markdown b/pt-br/whip-pt.html.markdown new file mode 100644 index 00000000..989bae05 --- /dev/null +++ b/pt-br/whip-pt.html.markdown @@ -0,0 +1,247 @@ +--- +language: whip +contributors: + - ["Tenor Biel", "http://github.com/L8D"] + - ["Saurabh Sandav", "http://github.com/SaurabhSandav"] +author: Tenor Biel +author_url: http://github.com/L8D +translators: + - ["Paulo Henrique Rodrigues Pinheiro", "https://github.com/paulohrpinheiro"] +lang: pt-br +filename: whip-pt.lisp +--- + +Whip é um dialeto de Lisp feito para construir scripts e trabalhar com +conceitos mais simples. +Ele também copia muitas funções e sintaxe de Haskell (uma linguagem não correlata) + +Esse documento foi escrito pelo próprio autor da linguagem. Então é isso. + +```scheme +; Comentário são como em Lisp. Pontos-e-vírgulas... + +; A maioria das declarações de primeiro nível estão dentro de "listas" +; que nada mais são que coisas entre parêntesis separadas por espaços em branco +nao_é_uma_lista +(uma lista) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +; 1. Números, texto e operadores + +; Whip tem um tipo numérico (que é um double de 64 bits IEE 754, do JavaScript) +3 ; => 3 +1.5 ; => 1.5 + +; Funções são chamadas se elas são o primeiro elemento em uma lista +(funcao_chamada argumentos) + +; A maioria das operações são feitas com funções +; Todas as funções aritméticas básicas são bem diretas +(+ 1 1) ; => 2 +(- 2 1) ; => 1 +(* 1 2) ; => 2 +(/ 2 1) ; => 2 +; até mesmo o módulo +(% 9 4) ; => 1 +; Divisão não inteira ao estilo JavaScript. +(/ 5 2) ; => 2.5 + +; Aninhamento de listas funciona como esperado. +(* 2 (+ 1 3)) ; => 8 + +; Há um tipo boleano. +true +false + +; Textos são criados com ". +"Hello, world" + +; Caracteres são criados com '. +'a' + +; Para negação usa-se a função 'not'. +(not true) ; => false +(not false) ; => true + +; Mas a maioria das funções não-haskell tem atalhos +; o não atalho é um '!'. +(! (! true)) ; => true + +; Igualdade é `equal` ou `=`. +(= 1 1) ; => true +(equal 2 1) ; => false + +; Por exemplo, inigualdade pode ser verificada combinando as funções +;`not` e `equal`. +(! (= 2 1)) ; => true + +; Mais comparações +(< 1 10) ; => true +(> 1 10) ; => false +; e suas contra partes para texto. +(lesser 1 10) ; => true +(greater 1 10) ; => false + +; Texto pode ser concatenado com +. +(+ "Hello " "world!") ; => "Hello world!" + +; Você pode usar as características comparativas do JavaScript. +(< 'a' 'b') ; => true +; ... e coerção de tipos +(= '5' 5) + +; As funções `at` ou `@` acessarão caracteres de um texto, começando em 0. +(at 0 'a') ; => 'a' +(@ 3 "foobar") ; => 'b' + +; Também existem as variáveis `null` e `undefined`. +null ; usada para indicar a ausência de algum valor +undefined ; usada para indicar que um valor não foi informado + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +; 2. Variáveis, matrizes e dicionários + +; Variáveis são declaradas com as funções `def` ou `let`. +; Variáveis que não tiveram valor atribuído serão `undefined`. +(def some_var 5) +; `def` deixará a variável no contexto global. +; `let` deixará a variável no contexto local, e tem uma sintaxe estranha. +(let ((a_var 5)) (+ a_var 5)) ; => 10 +(+ a_var 5) ; = undefined + 5 => undefined + +; Matrizes são listas de valores de qualquer tipo. +; Elas basicamente são listas sem funções no início +(1 2 3) ; => [1, 2, 3] (sintaxe JavaScript) + +; Dicionários em Whip são o equivalente a 'object' em JavaScript ou +; 'dict' em python ou 'hash' em Ruby: eles s]ão uma coleção desordenada +de pares chave-valor. +{"key1" "value1" "key2" 2 3 3} + +; Chaves podem ser apenas identificadores, números ou texto. +(def my_dict {my_key "my_value" "my other key" 4}) +; Mas em Whip, dicionários são parceados como: valor, espaço, valor; +; com mais espaço entre cada. Então isso significa que +{"key" "value" +"another key" +1234 +} +é avaliado da mesma forma que +{"key" "value" "another key" 1234} + +; Dicionários podem ser acessados usando a função `at` +; (como em texto e listas) +(@ "my other key" my_dict) ; => 4 + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +; 3. Lógica e controle de fluxo + +; A função `if` é muito simples, ainda que muito diferente do que em muitas +linguagens imperativas. +(if true "returned if first arg is true" "returned if first arg is false") +; => "returned if first arg is true" + +; E por conta do legado operador ternário +; `?` é o atalho não utilizado para `if`. +(? false true false) ; => false + +; `both` é uma declaração lógica `and`, e `either` é o `or` lógico. +(both true true) ; => true +(both true false) ; => false +(either true false) ; => true +(either false false) ; => false +; E seus atalhos são +; & => both +; ^ => either +(& true true) ; => true +(^ false true) ; => true + +;;;;;;;;; +; Lambdas + +; Lambdas em Whip são declaradas com as funções `lambda` ou `->`. +; E funções são na verdade lambdas com nomes. +(def my_function (-> (x y) (+ (+ x y) 10))) +; | | | | +; | | | valor retornado (com escopo contento argumentos) +; | | argumentos +; | declaração de funções lambda +; | +; nome do lambda a ser declarado + +(my_function 10 10) ; = (+ (+ 10 10) 10) => 30 + +; Obviamente, todos os lambdas por definição são anônimos e +; tecnicamente sempre usados anonimamente. Redundância. +((lambda (x) x) 10) ; => 10 + +;;;;;;;;;;;;;;;; +; Comprehensions + +; `range` or `..` geram uma lista dos números para +; cada número entre seus dois argumentos. +(range 1 5) ; => (1 2 3 4 5) +(.. 0 2) ; => (0 1 2) + +; `map` aplica seu primeiro argumento (que deve ser um lambda/função) +; a cada item dos argumentos seguintes (que precisa ser uma lista) +(map (-> (x) (+ x 1)) (1 2 3)) ; => (2 3 4) + +; Reduce +(reduce + (.. 1 5)) +; equivalente a +((+ (+ (+ 1 2) 3) 4) 5) + +; Nota: map e reduce não possuem atalhos + +; `slice` ou `\` é similar ao .slice() do JavaScript +; mas veja que ele pega uma lista como primeiro argumento, não o último. +(slice (.. 1 5) 2) ; => (3 4 5) +(\ (.. 0 100) -5) ; => (96 97 98 99 100) + +; `append` ou `<<` são auto explicativos +(append 4 (1 2 3)) ; => (1 2 3 4) +(<< "bar" ("foo")) ; => ("foo" "bar") + +; Length é auto explicativo. +(length (1 2 3)) ; => 3 +(_ "foobar") ; => 6 + +;;;;;;;;;;;;;;; +; Delicadezas Haskell + +; Primeiro item de uma lista +(head (1 2 3)) ; => 1 +; Pega do segundo ao último elemento de uma lista +(tail (1 2 3)) ; => (2 3) +; Último item de uma lista +(last (1 2 3)) ; => 3 +; Contrário de `tail` +(init (1 2 3)) ; => (1 2) +; Pega do primeiro até o elemento especificado da lista +(take 1 (1 2 3 4)) ; (1 2) +; Contrário de `take` +(drop 1 (1 2 3 4)) ; (3 4) +; Menos valor em uma lista +(min (1 2 3 4)) ; 1 +; Maior valor em uma lista +(max (1 2 3 4)) ; 4 +; Verifica se o valor está em uma lista ou objeto +(elem 1 (1 2 3)) ; true +(elem "foo" {"foo" "bar"}) ; true +(elem "bar" {"foo" "bar"}) ; false +; Inverte a ordem de uma lista +(reverse (1 2 3 4)) ; => (4 3 2 1) +; Verifica se o valor é par ou ímpar +(even 1) ; => false +(odd 1) ; => true +; Separa um texto cortando por espaço em branco +(words "foobar nachos cheese") ; => ("foobar" "nachos" "cheese") +; Junta lista de textos +(unwords ("foo" "bar")) ; => "foobar" +; Sucessor e predecessor +(pred 21) ; => 20 +(succ 20) ; => 21 +``` + +Para mais informação, verifique o [repositório](http://github.com/L8D/whip) diff --git a/vi-vn/less-vi.html.markdown b/vi-vn/less-vi.html.markdown new file mode 100644 index 00000000..594ccc31 --- /dev/null +++ b/vi-vn/less-vi.html.markdown @@ -0,0 +1,395 @@ +--- +language: less +contributors: + - ["Saravanan Ganesh", "http://srrvnn.me"] +translators: + - ["Thanh Duy Phan", "https://github.com/thanhpd"] +filename: learnless-vi.less +lang: vi-vn +--- + +Less là một CSS pre-processor (bộ tiền xử lí CSS), nó thêm các tính năng như biến (variable), lồng (nesting), mixin và nhiều thứ khác. Less cùng với các CSS pre-processor khác như [Sass](http://sass-lang.com/) giúp lập trình viên viết được các đoạn CSS bảo trì được và không bị lặp lại (DRY - Don't Repeat Yourself). + +```css + + +// Comment (chú thích) một dòng sẽ bị xóa khi Less được biên dịch thành CSS + +/* Comment trên nhiều dòng sẽ được giữ lại */ + + + +/* Biến +==============================*/ + + +/* Ta có thể lưu giá trị CSS (ví dụ như color) vào một biến. + Sử dụng ký hiệu '@' để khai báo một biến. */ + +@primary-color: #a3a4ff; +@secondary-color: #51527f; +@body-font: 'Roboto', sans-serif; + +/* Sau khi khai báo biến, ta có thể sử dụng nó ở trong tệp stylesheet. + Nhờ sử dụng biến ta chỉ cần thay đổi một lần + tại 1 nơi để thay đổi tất cả những đoạn sử dụng biến */ + +body { + background-color: @primary-color; + color: @secondary-color; + font-family: @body-font; +} + +/* Đoạn code trên sẽ được biên dịch thành: */ + +body { + background-color: #a3a4ff; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + + +/* Cách sử dụng này giúp ta dễ dàng bảo trì hơn + việc phải đổi giá trị mỗi lần nó xuất hiện + trong tệp stylesheet. */ + + + +/* Mixins +==============================*/ + + +/* Nếu đang viết một đoạn code cho nhiều hơn một + element, ta có thể sử dụng lại nó dễ dàng. */ + +.center { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +/* Ta có thể dùng mixin chỉ bằng việc thêm selector + vào trong nội dung style của element khác */ + +div { + .center; + background-color: @primary-color; +} + +/* Đoạn code trên sẽ được biên dịch thành: */ + +.center { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #a3a4ff; +} + +/* Ta có thể ngăn không cho code mixin được biên dịch + bằng cách thêm cặp ngoặc tròn đằng sau selector */ + +.center() { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +div { + .center; + background-color: @primary-color; +} + +/* Đoạn code trên sẽ được biên dịch thành: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #a3a4ff; +} + + + +/* Nesting - Lồng +==============================*/ + + +/* Less cho phép ta có thể lồng selector bên trong selector */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: #f00; + } +} + +/* Selector bắt đầu bằng ký tự '&' sẽ thay thế ký tự '&' + với selector cha. */ +/* Ta cũng có thể lồng các pseudo-class với nhau */ +/* Nên lưu ý không nên lồng quá nhiều lần sẽ làm code kém tính bảo trì. + Kinh nghiệm cho thấy không nên lồng quá 3 lần. + Ví dụ: */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: red; + + &:hover { + background-color: blue; + } + + a { + color: white; + } + } +} + +/* Biên dịch thành: */ + +ul { + list-style-type: none; + margin-top: 2em; +} + +ul li { + background-color: red; +} + +ul li:hover { + background-color: blue; +} + +ul li a { + color: white; +} + + + +/* Function +==============================*/ + + +/* Less cung cấp các function có thể được dùng để hoàn thành + các công việc khác nhau. */ + +/* Function được gọi sử dụng tên của nó và truyền vào + các tham số được yêu cầu. */ + +body { + width: round(10.25px); +} + +.header { + background-color: lighten(#000, 0.5); +} + +.footer { + background-color: fadeout(#000, 0.25) +} + +/* Biên dịch thành: */ + +body { + width: 10px; +} + +.header { + background-color: #010101; +} + +.footer { + background-color: rgba(0, 0, 0, 0.75); +} + +/* Ta có thể định nghĩa function mới. + Function khá tương tự với mixin bởi chúng đều có thể được tái + sử dụng. Khi lựa chọn giữa việc sử dụng function hay mixin, + hãy nhớ mixin được tối ưu cho việc tạo ra CSS trong khi + function sẽ được sử dụng tốt hơn cho logic sẽ được sử dụng + xuyên suốt Less code. Các ví dụ trong phần 'Toán tử' là ứng cử viên + sáng giá cho việc dùng function có thể tái sử dụng được. +*/ + +/* Function này tính giá trị trung bình của hai số: */ +.average(@x, @y) { + @average-result: ((@x + @y) / 2); +} + +div { + .average(16px, 50px); // gọi mixin + padding: @average-result; // sử dụng giá trị trả về của mixin +} + +/* Biên dịch thành: */ + +div { + padding: 33px; +} + + + +/* Mở rộng (Thừa kế) +==============================*/ + + +/* Mở rộng là cách để chia sẻ thuộc tính của một selector cho selector khác */ + +.display { + height: 50px; +} + +.display-success { + &:extend(.display); + border-color: #22df56; +} + +/* Biên dịch thành: */ +.display, +.display-success { + height: 50px; +} +.display-success { + border-color: #22df56; +} + +/* Nên mở rộng một khai báo CSS có trước thay vì tạo một mixin mới + bởi cách nó nhóm các lớp có chung một style gốc. + Nếu thực hiện với mixin, các thuộc tính sẽ bị trùng lặp + cho mỗi khai báo có sử dụng mixin. Mặc dù không ảnh hưởng đến luồng công việc nhưng nó + tạo ra các đoạn code CSS thừa sau khi được biên dịch. +*/ + + +/* Partials and Imports - Chia nhỏ và nhập vào +==============================*/ + + +/* Less cho phép ta tạo các partial file (tệp con). + Sử dụng nó giúp ta có thể tổ chức code Less theo mô-đun có hệ thống. + Các tệp con thường bắt đầu với ký tự gạch dưới '_', vd: _reset.less + và được nhập vào file Less chính để được biên dịch thành CSS */ + +/* Quan sát ví dụ sau, ta sẽ đặt đoạn code dưới đây vào tệp tên là _reset.less */ + +html, +body, +ul, +ol { + margin: 0; + padding: 0; +} + +/* Less cung cấp cú pháp @import cho phép nhập các partial vào một file. + Cú pháp này trong Less sẽ nhập các file và kết hợp chúng lại với + code CSS được sinh ra. Nó khác với cú pháp @import của CSS, + bản chất là tạo một HTTP request mới để tải về tệp tin được yêu cầu. */ + +@import 'reset'; + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + +/* Biên dịch thành: */ + +html, body, ul, ol { + margin: 0; + padding: 0; +} + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + + + +/* Toán học +==============================*/ + + +/* Less cung cấp các toán tử sau: +, -, *, / và %. + Điều này rất có ích cho việc tính toán giá trị trực tiếp + trong tệp Less thay vì phải tính toán thủ công. + Dưới đây là ví dụ về việc tạo một khung thiết kế đơn giản có hai cột. */ + +@content-area: 960px; +@main-content: 600px; +@sidebar-content: 300px; + +@main-size: @main-content / @content-area * 100%; +@sidebar-size: @sidebar-content / @content-area * 100%; +@gutter: 100% - (@main-size + @sidebar-size); + +body { + width: 100%; +} + +.main-content { + width: @main-size; +} + +.sidebar { + width: @sidebar-size; +} + +.gutter { + width: @gutter; +} + +/* Biên dịch thành: */ + +body { + width: 100%; +} + +.main-content { + width: 62.5%; +} + +.sidebar { + width: 31.25%; +} + +.gutter { + width: 6.25%; +} + + +``` + +## Tập sử dụng Less + +Nếu bạn cần xài thử Less trên trình duyệt, hãy ghé qua: +* [Codepen](http://codepen.io/) +* [LESS2CSS](http://lesscss.org/less-preview/) + +## Tính tương thích + +Less có thể được dùng trong bất kì dự án nào miễn là ta có chương trình để biên dịch nó thành CSS. Ta cần chắc chắn rằng đoạn CSS đang dùng tương thích với các phiên bản trình duyệt mong muốn. + +[QuirksMode CSS](http://www.quirksmode.org/css/) và [CanIUse](http://caniuse.com) là nguồn thông tin tin cậy để kiểm tra tính tương thích của mã CSS. + +## Tìm hiểu thêm +* [Tài liệu chính thức](http://lesscss.org/features/) +* [Less CSS - Hướng dẫn cho người mới bắt đầu](http://www.hongkiat.com/blog/less-basic/)
\ No newline at end of file |