diff options
Diffstat (limited to 'pt-br')
-rw-r--r-- | pt-br/asymptotic-notation-pt.html.markdown | 24 | ||||
-rw-r--r-- | pt-br/awk-pt.html.markdown | 3 | ||||
-rw-r--r-- | pt-br/clojure-pt.html.markdown | 2 | ||||
-rw-r--r-- | pt-br/cmake-pt.html.markdown | 5 | ||||
-rw-r--r-- | pt-br/coffeescript-pt.html.markdown | 46 | ||||
-rw-r--r-- | pt-br/cypher-pt.html.markdown | 2 | ||||
-rw-r--r-- | pt-br/factor-pt.html.markdown | 2 | ||||
-rw-r--r-- | pt-br/html-pt.html.markdown | 2 | ||||
-rw-r--r-- | pt-br/less-pt.html.markdown | 2 | ||||
-rw-r--r-- | pt-br/make-pt.html.markdown | 3 | ||||
-rw-r--r-- | pt-br/pascal-pt.html.markdown | 253 | ||||
-rw-r--r-- | pt-br/python-pt.html.markdown | 2 | ||||
-rw-r--r-- | pt-br/python3-pt.html.markdown | 2 | ||||
-rwxr-xr-x | pt-br/stylus-pt.html.markdown | 228 |
14 files changed, 531 insertions, 45 deletions
diff --git a/pt-br/asymptotic-notation-pt.html.markdown b/pt-br/asymptotic-notation-pt.html.markdown index 2f179f96..b70d26b7 100644 --- a/pt-br/asymptotic-notation-pt.html.markdown +++ b/pt-br/asymptotic-notation-pt.html.markdown @@ -13,7 +13,7 @@ lang: pt-br ## O que é? Notação Assintótica é uma linguagem que nos permite analisar o tempo de execução - de um algoritmo através da indentificação de seu comportamento com o + de um algoritmo através da identificação de seu comportamento com o crescimento da entrada oferecida. Isso também é conhecido como taxa de crescimento do algoritmo. O algoritmo de repente torna-se lento quando o tamanho da entrada cresce? O algoritmo mantém, em geral, seu tempo de execução @@ -33,12 +33,12 @@ Um modo seria contar o número de operações primitivas com diferentes tamanhos ## Tipos de Notação Assintótica -Na primeira seção desse documento, descrevemos como Notação Assintótica identifica o comportamento de um algoritmo +Na primeira seção deste documento, descrevemos como Notação Assintótica identifica o comportamento de um algoritmo a medida que o tamanho da entrada cresce. Imaginemos um algoritmo como uma função *f*, *n* como o tamanho da entrada e *f(n)* sendo o tempo de execução. Então, para dado algoritmo *f*, com entrada de tamanho *n*, você terá tempo de execução - *f(n)*. Isto resulta em um gráfico onde a coordernada Y é o tempo de execução -, a coordernada X representa o tamanho da entrada e os pontos representam o tempo + *f(n)*. Isto resulta em um gráfico onde a coordenada Y é o tempo de execução, + a coordenada X representa o tamanho da entrada e os pontos representam o tempo de execução para dado tamanho de entrada. Você pode representar a função, ou o algoritmo, com Notação Assintótica de várias @@ -49,7 +49,7 @@ não avalia o melhor caso, porque essas condições não são atingidas com freq Um bom exemplo disto seria em algoritmos de ordenação; especificamente, na adição de elementos à árvores. O melhor caso na maioria de algoritmos pode ser de apenas uma operação. Entretanto, na maioria dos casos, o elemento a ser adicionado terá -que percorrer a árvore de forma apropriada, o que pode causar a analise de um +que percorrer a árvore de forma apropriada, o que pode causar a análise de um ramo inteiro. Este é o pior caso, e isto é o que você está se preparando. @@ -63,16 +63,16 @@ Função Polinomial - an^z + . . . + an^2 + a*n^1 + a*n^0, onde *z* é uma const Função Exponencial - a^n, onde a é alguma constante ``` Estas são as funções básicas de crescimento usadas em várias notações. A lista - começa com a de crescimento mais lento (logarítima, a de execução mais rápida) + começa com a de crescimento mais lento (logarítmica, a de execução mais rápida) e segue para a de crescimento mais rápido (exponencial, de execução mais lenta). -Repare que enquando *n*, a entrada, cresce, cada uma dessas funções cresce mais -rápido que quadrático, polinimial e exponencial, comparadas com logaritma e linear. +Repare que enquanto *n*, a entrada, cresce, cada uma dessas funções cresce mais +rápido que quadrático, polinomial e exponencial, comparadas com logarítmica e linear. Uma nota extremamente importante para notações é tentar usar os termos mais simples. Isto significa descartar constantes e termos de ordem mais baixa, pois quando o tamanho da entrada cresce para o infinito (limites matemáticos), os termos de ordem mais baixa e constantes tornam-se irrelevantes. Por exemplo, se você tiver uma -constante muito grande, 2^9001, a simplificação não afeterá sua notação. +constante muito grande, 2^9001, a simplificação não afetará sua notação. Já que queremos as formas mais simples, mudemos nossa tabela um pouco... @@ -87,7 +87,7 @@ Função Exponencial - a^n, onde *a* é uma constante ### Big-O Big-O, também escrita como O, é uma Notação Assintótica para o pior caso. Digamos -*f(n)* seja o tempo de exeução de um algoritmo e *g(n)) um tempo de complexidade +*f(n)* seja o tempo de execução de um algoritmo e *g(n)) um tempo de complexidade arbitrário que você quer relacionar com seu algoritmo. *f(n)* é O(g(n)), se, para quando constante real c (c > 0), *f(n)* <= *c g(n)* para todo tamanho de entrada n (n > 0). @@ -116,7 +116,7 @@ Há alguma constante c que satisfaça a definição para todo n? 3log n + 100 <= 150 * log n, n > 2 (Indefinido em n = 1) ``` -Sim! A definição de Big-I for atentida, portante `f(n)` é `O(g(n))`. +Sim! A definição de Big-O foi atendida, portanto `f(n)` é `O(g(n))`. *Exemplo 2* @@ -146,7 +146,7 @@ Big-Omega, também escrita como Ω, é uma Notação Assintótica para o melhor Sinta-se livre para adicionar mais exemplos. Big-O é a notação primária usada para medir complexidade de algoritmos. ### Notas Finais -É difícil manter esse tipo de tópico curto e você deveria ler os livros e artigos listados abaixo. Eles cobrem muito mais profundamente definições e exemplos. Mais x='Algoritms & Data Structures' virá; teremos um documento sobre analisar código em breve. +É difícil manter esse tipo de tópico curto e você deveria ler os livros e artigos listados abaixo. Eles cobrem muito mais profundamente definições e exemplos. Mais x='Algorithms & Data Structures' virá; teremos um documento sobre analisar código em breve. ## Livros diff --git a/pt-br/awk-pt.html.markdown b/pt-br/awk-pt.html.markdown index 761f5294..9bf770fd 100644 --- a/pt-br/awk-pt.html.markdown +++ b/pt-br/awk-pt.html.markdown @@ -1,5 +1,6 @@ --- -language: awk +category: tool +tool: awk filename: learnawk-pt.awk contributors: - ["Marshall Mason", "http://github.com/marshallmason"] diff --git a/pt-br/clojure-pt.html.markdown b/pt-br/clojure-pt.html.markdown index 7e8b3f7b..b88d4eec 100644 --- a/pt-br/clojure-pt.html.markdown +++ b/pt-br/clojure-pt.html.markdown @@ -340,7 +340,7 @@ keymap ; => {:a 1, :b 2, :c 3} (def my-atom (atom {})) ; Atualize o atom com um swap!. -; swap! pega uma funçnao and chama ela com o valor atual do atom +; swap! pega uma função e chama ela com o valor atual do atom ; como primeiro argumento, e qualquer argumento restante como o segundo (swap! my-atom assoc :a 1) ; Coloca o valor do átomo my-atom como o resultado de (assoc {} :a 1) (swap! my-atom assoc :b 2) ; Coloca o valor do átomo my-atom como o resultado de (assoc {:a 1} :b 2) diff --git a/pt-br/cmake-pt.html.markdown b/pt-br/cmake-pt.html.markdown index bc3e7050..d11fe4f4 100644 --- a/pt-br/cmake-pt.html.markdown +++ b/pt-br/cmake-pt.html.markdown @@ -1,8 +1,9 @@ --- -language: cmake +category: tool +tool: cmake contributors: - ["Bruno Alano", "https://github.com/brunoalano"] -filename: CMake +filename: CMake-br translators: - ["Lucas Pugliesi", "https://github.com/fplucas"] lang: pt-br diff --git a/pt-br/coffeescript-pt.html.markdown b/pt-br/coffeescript-pt.html.markdown index 8b1094b1..7129a463 100644 --- a/pt-br/coffeescript-pt.html.markdown +++ b/pt-br/coffeescript-pt.html.markdown @@ -3,19 +3,20 @@ language: coffeescript contributors: - ["Tenor Biel", "http://github.com/L8D"] - ["Xavier Yao", "http://github.com/xavieryao"] + - ["Claudio Busatto", "http://github.com/cjcbusatto"] translators: - ["Miguel Araújo", "https://github.com/miguelarauj1o"] lang: pt-br filename: learncoffeescript-pt.coffee --- -CoffeeScript é uma pequena linguagem que compila um-para-um para o JavaScript -equivalente, e não há interpretação em tempo de execução. Como um dos sucessores -de JavaScript, CoffeeScript tenta o seu melhor para exibir uma saída legível, -bem-impressa e bom funcionamento dos códigos JavaScript em todo o tempo de +CoffeeScript é uma pequena linguagem que compila um-para-um para o JavaScript +equivalente, e não há interpretação em tempo de execução. Como um dos sucessores +de JavaScript, CoffeeScript tenta o seu melhor para exibir uma saída legível, +bem-impressa e bom funcionamento dos códigos JavaScript em todo o tempo de execução JavaScript. -Veja também [site do CoffeeScript](http://coffeescript.org/), que tem um tutorial +Veja também [site do CoffeeScript](http://coffeescript.org/), que tem um tutorial completo sobre CoffeeScript. ``` coffeescript @@ -23,35 +24,35 @@ completo sobre CoffeeScript. #Segue as tendências de muitas linguagens modernas #Assim, os comentários são iguais a Ruby e Python, eles usam símbolos numéricos. -### -Os comentários em bloco são como estes, e eles traduzem diretamente para '/ *'s e +### +Os comentários em bloco são como estes, e eles traduzem diretamente para '/ *'s e '* /'s para o código JavaScript que resulta... -Você deveria entender mais de semântica de JavaScript antes de continuar... +Você deveria entender mais de semântica de JavaScript antes de continuar... ### -# Tarefa: -numero = 42 #=> número var = 42; +# Tarefa: +numero = 42 #=> var numero = 42; oposto = true #=> var oposto = true; -# Condições: -numero = -42 if oposto #=> if (oposto) {número = -42;} +# Condições: +numero = -42 if oposto #=> if (oposto) {numero = -42;} -# Funções: +# Funções: quadrado = (x) -> x * x #=> var quadrado = function (x) {return x * x;} -preencher = (recipiente, líquido = "coffee") -> - "Preenchendo o #{recipiente} with #{líquido}..." +preencher = (recipiente, liquido = "coffee") -> + "Preenchendo o #{recipiente} with #{liquido}..." #=>var preencher; # -#preencher = function(recipiente, líquido) { -# if (líquido == null) { -# líquido = "coffee"; +#preencher = function(recipiente, liquido) { +# if (liquido == null) { +# liquido = "coffee"; # } -# return "Preenchendo o " + recipiente + " with " + líquido + "..."; +# return "Preenchendo o " + recipiente + " with " + liquido + "..."; #}; -# Alcances: +# Alcances: list = [1 .. 5] #=> lista var = [1, 2, 3, 4, 5]; # Objetos: @@ -79,7 +80,7 @@ alert "Eu sabia!" if elvis? #=> if(typeof elvis !== "undefined" && elvis !== null) { alert("Eu sabia!"); } # Compressão de Matrizes: -cubes = (math.cube num for num in list) +cubes = (math.cube num for num in list) #=>cubes = (function() { # var _i, _len, _results; # _results = []; @@ -99,8 +100,9 @@ eat alimento for alimento in comidas when alimento isnt 'chocolate' # if (alimento !== 'chocolate') { # eat(alimento); # } +``` ## Recursos adicionais - [Smooth CoffeeScript](http://autotelicum.github.io/Smooth-CoffeeScript/) -- [CoffeeScript Ristretto](https://leanpub.com/coffeescript-ristretto/read)
\ No newline at end of file +- [CoffeeScript Ristretto](https://leanpub.com/coffeescript-ristretto/read) diff --git a/pt-br/cypher-pt.html.markdown b/pt-br/cypher-pt.html.markdown index 7cfd8dcd..9b60f771 100644 --- a/pt-br/cypher-pt.html.markdown +++ b/pt-br/cypher-pt.html.markdown @@ -1,6 +1,6 @@ --- language: cypher -filename: LearnCypher.cql +filename: LearnCypher-br.cql contributors: - ["Théo Gauchoux", "https://github.com/TheoGauchoux"] diff --git a/pt-br/factor-pt.html.markdown b/pt-br/factor-pt.html.markdown index e3c8f4a9..b4b5c7f5 100644 --- a/pt-br/factor-pt.html.markdown +++ b/pt-br/factor-pt.html.markdown @@ -2,7 +2,7 @@ language: factor contributors: - ["hyphz", "http://github.com/hyphz/"] -filename: learnfactor.factor +filename: learnfactor-br.factor lang: pt-br --- diff --git a/pt-br/html-pt.html.markdown b/pt-br/html-pt.html.markdown index 5a4bc3bc..22b7836e 100644 --- a/pt-br/html-pt.html.markdown +++ b/pt-br/html-pt.html.markdown @@ -1,6 +1,6 @@ --- language: html -filename: learnhtml.txt +filename: learnhtml-br.txt contributors: - ["Christophe THOMAS", "https://github.com/WinChris"] translators: diff --git a/pt-br/less-pt.html.markdown b/pt-br/less-pt.html.markdown index 679a2ed2..f6cf2d71 100644 --- a/pt-br/less-pt.html.markdown +++ b/pt-br/less-pt.html.markdown @@ -1,6 +1,6 @@ --- language: less -filename: learnless.less +filename: learnless-br.less contributors: - ["Saravanan Ganesh", "http://srrvnn.me"] diff --git a/pt-br/make-pt.html.markdown b/pt-br/make-pt.html.markdown index 8e7603cc..cbdebde7 100644 --- a/pt-br/make-pt.html.markdown +++ b/pt-br/make-pt.html.markdown @@ -1,5 +1,6 @@ ---
-language: make
+category: tool
+tool: make
contributors:
- ["Robert Steed", "https://github.com/robochat"]
- ["Stephan Fuhrmann", "https://github.com/sfuhrm"]
diff --git a/pt-br/pascal-pt.html.markdown b/pt-br/pascal-pt.html.markdown new file mode 100644 index 00000000..3a37271a --- /dev/null +++ b/pt-br/pascal-pt.html.markdown @@ -0,0 +1,253 @@ +--- +language: Pascal +filename: learnpascal-pt.pas +contributors: + - ["Ganesha Danu", "https://github.com/blinfoldking"] + - ["Keith Miyake", "https//github.com/kaymmm"] +translators: + - ["Raul Almeida", "https://github.com/almeidaraul"] +lang: pt-br +--- + + +>Pascal é uma linguagem de programação estruturada, que recebeu este nome em homenagem ao matemático e físico Blaise Pascal. Foi criada em 1970 pelo suíço Niklaus Wirth,tendo em mente encorajar o uso de código estruturado. +fonte : [wikipédia](https://pt.wikipedia.org/wiki/Pascal_(linguagem_de_programa%C3%A7%C3%A3o)) + + + +Para compilar e executar um programa em Pascal, você pode usar o freepascal, +um compilador gratuito. [Faça o download aqui](https://www.freepascal.org/) + +```pascal +//Corpo de um programa em Pascal +//isso é um comentário +{ + isso também é um comentário, + mas com várias linhas +} + +//cabeçalho do programa +PROGRAM aprendendo_pascal; //<-- não esqueça o ponto e vírgula. O nome do +programa deve começar com uma letra. + +CONST + { + aqui você declara valores constantes + } +TYPE + { + aqui você declara tipos não nativos + } +VAR + { + aqui você declara variáveis + } + +//programa de fato +BEGIN + 80 + aqui ficam todas as instruções que não pertencem nem a funções + nem a procedimentos + + blocos de código começam com BEGIN e terminam com END + (como as chaves em C) + } +END. //o "end" no final do programa requer um ponto final. +``` + +```pascal +//formas de declarar uma variável +VAR a:INTEGER; +VAR b:INTEGER; + +VAR + a : INTEGER; + b : INTEGER; + +VAR a,b : INTEGER; +``` + +```pascal +PROGRAM Learn_More; +//agora, mais sobre tipos de dados e operações + +CONST + PI = 3.141592654; + GNU = 'GNU''s Not Unix'; + { a convenção é usar caixa alta para constantes + + constantes têm valores fixos que só podem ser alterados + antes da compilação + + constantes podem ser de qualquer tipo nativo (integer, real, boolean, + char, string) + +TYPE + vet_char : array [0..255] of CHAR; + // isso declara um novo tipo de variável, vet_char, com 256 caracteres + vet_multd : array of array of INTEGER; + // vetores de vetores são vetores multidimensionais + // use vetores de tamanho 0 (daí, usa-se alocação dinâmica) + // vetores do tipo vet_multd são de duas dimensões + +//declarando variáveis +VAR + int, c, d : INTEGER; + // três variáveis que guardam valores inteiros + // inteiros têm 16 bits (vão de -32768 a 32767) + r : REAL; + // uma variável que guarda um valor real + // reais vão de 3.4E-38 a 3.4E38 + bool : BOOLEAN; + // uma variável que guarda um valor booleano (verdadeiro ou falso) + ch : CHAR; + // uma variável que guarda um caractere + // caracteres têm 8 bits + str : STRING; + // STRING não é um tipo padrão, mas vem na maioria dos compiladores + // string é um vetor de caracteres com tamanho padrão de 255 elementos + s : STRING[50]; + // especificar o tamanho de uma string assim otimiza o uso de memória + my_str: vet_char; + // aqui, uma variável de um tipo personalizado declarado acima + my_2d : vet_multd; + // defina o tamanho de vetores dinâmicos antes de usá-los + +// outros tipos de dados (pascal é uma linguagem fortemente tipada) + + // tipos adicionais de inteiros + b : BYTE; // faixa [0..255] + shi : SHORTINT; // faixa [-128..127] + smi : SMALLINT; // faixa [-32,768..32,767] (inteiro padrão) + w : WORD; // faixa [0..65,535] + li : LONGINT; // faixa [-2,147,483,648..2,147,483,647] + lw : LONGWORD; // faixa [0..4,294,967,295] + c : CARDINAL; // longword + i64 : INT64; // faixa [-9223372036854775808..9223372036854775807] + qw : QWORD; // faixa [0..18,446,744,073,709,551,615] + + // tipos adicionais de reais + rr : REAL; // faixa depende da plataforma (8 bits, 16 bits, etc) + rs : SINGLE; // faixa [1.5E-45..3.4E38] + rd : DOUBLE; // faixa [5.0E-324 .. 1.7E308] + re : EXTENDED; // faixa [1.9E-4932..1.1E4932] + rc : COMP; // faixa [-2E64+1 .. 2E63-1] + +BEGIN + int := 1;// usa-se := para atribuir valores a variáveis + r := 3.14; + ch := 'a'; + str := 'apple'; + bool := true; + //pascal não é case-sensitive (não diferencia maiúsculas de minúsculas) + // uma opção de organização é usar maiúsculas para termos da linguagem + // (BEGIN, END, INTEGER, etc) e constantes + // aritmética + int := 1 + 1; // int deixa de ser 1 e passa a ser 2 + int := int + 1; // int = 2 + 1 = 3; + int := 4 DIV 2; //int = 2 (DIV é uma divisão inteira - ignora o resto) + int := 3 DIV 2; //int = 1 + int := 1 DIV 2; //int = 0 + + bool := true OR false; // bool = true + bool := false AND true; // bool = false + bool := true XOR true; // bool = false + + r := 3 / 2; // usa-se a "/" para divisões entre inteiros + r := int; // um real pode receber um valor inteiro (mas não o contrário) + + c := str[1]; //acessando elementos de um vetor: vetor[índice do elemento] + str := 'hello' + 'world'; //concatenção de strings + + my_str[0] := 'a'; { só se pode atribuir valores a vetores elemento + por elemento (não o vetor inteiro de uma vez) } + + // LAÇOS + WHILE (ch != 'a') DO + BEGIN + writeln('ch é diferente de a'); + IF (ch = 'c') THEN + writeln('ch é igual a c'); + END; + + SETLENGTH(my_2d,10,10); + // inicialização de um vetor com alocação dinâmica; my_2d vira um 10x10 + FOR c := 0 to 9 DO + { vetores começam em 0 e terminam em tamanho-1 + (exceto se, declarando o tipo, forem especificados valores diferentes) } + FOR d := 0 to 9 DO + // a variável usada em um laço FOR deve ter sido declarada no cabeçalho + my_2d[c,d] := c * d; + // acessam-se elementos de vetores multidimensionais com [d1, d2, d3...] + + +END. +``` + +```pascal +PROGRAM programacao_com_funcoes; + +VAR + i, inutil : INTEGER; + +{ OBS: diferença entre procedimento e função + função: realiza operações e retorna valor + procedimento: só realiza operações +} +//declarando e descrevendo uma função +FUNCTION fatorial_recursiva(CONST a: INTEGER) : INTEGER; +{ calcula a! recursivamente } + +// pode-se declarar variáveis locais para funções e procedimentos +// exemplo: +// VAR +// local_a : INTEGER; + +BEGIN + { O bloco ELSE só funciona se não houver ponto e vírgula no bloco do IF + exemplo: + IF a THEN + writeln('a'); + ELSE + writeln('b'); + Isso não permitiria que o programa compilasse } + + IF a >= 1 THEN + // o valor de retorno é atribuído como se a função fosse uma variável + fatorial_recursiva := a * fatorial_recursiva(a-1) + ELSE + fatorial_recursiva := 1; +END; // o END de funções e procedimentos recebe ponto e vírgula + +//declarando e descrevendo um procedimento +PROCEDURE salvainteiro(VAR i : INTEGER; inutil : INTEGER); +{ recebe entrada do usuário e salva na variável i + passagem de valor: + + POR REFERÊNCIA - "VAR i: integer"; implica que alterações na variável i + dentro da função são guardadas para o escopo de todo o programa + + POR VALOR - "inutil: integer"; implica que o valor do argumento é copiado + e alterações na variável inutil não são guardadas +} + +BEGIN + WRITE('Insira um inteiro: '); //escreve sem quebrar linha + READLN(i); //lê i com quebra de linha + inutil := 4; // inutil não terá seu valor alterado fora do procedimento. +END; + +BEGIN // programa principal + inutil := 3; + salvainteiro(i, inutil); + + // escrevendo i! + WRITELN(i, '! = ', factorial_recursion(i)); // escreve e quebra linha + // valores numéricos são automaticamente convertidos para texto na escrita + + // escrever valor de inutil (sempre 3, já que salvainteiro não a altera) + WRITELN('inutil = ', inutil); +END. + +``` + diff --git a/pt-br/python-pt.html.markdown b/pt-br/python-pt.html.markdown index 5afd46d0..82b70117 100644 --- a/pt-br/python-pt.html.markdown +++ b/pt-br/python-pt.html.markdown @@ -464,7 +464,7 @@ Humano.ronca() #=> "*arrrrrrr*" # Você pode importar módulos import math -print math.sqrt(16) #=> 4 +print math.sqrt(16) #=> 4.0 # Você pode importar funções específicas de um módulo from math import ceil, floor diff --git a/pt-br/python3-pt.html.markdown b/pt-br/python3-pt.html.markdown index ea0617f4..b72c732a 100644 --- a/pt-br/python3-pt.html.markdown +++ b/pt-br/python3-pt.html.markdown @@ -647,7 +647,7 @@ Human.grunt() # => "*grunt*" # Você pode importar módulos import math -print(math.sqrt(16)) # => 4 +print(math.sqrt(16)) # => 4.0 # Você pode importar apenas funções específicas de um módulo from math import ceil, floor diff --git a/pt-br/stylus-pt.html.markdown b/pt-br/stylus-pt.html.markdown new file mode 100755 index 00000000..804fa806 --- /dev/null +++ b/pt-br/stylus-pt.html.markdown @@ -0,0 +1,228 @@ +--- +language: stylus +filename: learnStylus-pt.styl +contributors: + - ["Salomão Neto", "https://github.com/salomaosnff"] + - ["Isaac Henrique", "https://github.com/Isaachi1"] +lang: pt-br +--- + +Stylus tem como propósito, adicionar funcionalidades às suas folhas de estilos CSS que te ajudam no desenvolvimento, sem que haja a quebra de compartibilidade entre os navegadores Web. +Entre elas estão variáveis, aninhamento, mixins, funções e muito mais. + +A sintaxe do Stylus é muito flexivel podendo utilizar a sintaxe padrão do CSS e deixando opcional o ponto e vírgula (;), dois pontos (:) e até mesmo as chaves ({ e }), tornando assim o seu código ainda mais legível. + +Stylus não fornece novas opções de estilos, mas dá funcionalidades que permitem deixar seu CSS muito mais dinâmico. + + +```scss + +/* Estilo de código +==============================*/ + +/* As chaves, ponto e vírgula, e dois pontos são opcionais no Stylus. */ + +body { + background: #000; +} + +body { + background: #000 +} + +body { + background #000 +} + +body + background #000 + +body + background: #000; + +body + background: #000 + + +// Comentários de linha única são removidos quando Stylus é compilado para CSS. + +/* Comentários multi-line são preservados. */ + + +/* Seletores +==============================*/ + +/* Selecionando elementos dentro de outro elemento */ +body { + background: #000000; + h1 { + color: #FF0000; + } +} + +/* Ou se preferir... */ +body + background #000000 + h1 + color #FF0000 + + +/* Obtendo a referência do elemento pai +==============================*/ +a { + color: #0088dd; + &:hover { + color: #DD8800; + } +} + + +/*Variáveis +==============================*/ + + +/* + É possível armazenar um valor CSS (tais como a cor) de uma variável. + Embora seja opcional, é recomendado adicionar $ antes de um nome de variável + para que você possa distinguir uma variável de outro valor CSS. +*/ + +$primary-color = #A3A4FF +$secondary-color = #51527F +$body-font = 'Roboto', sans-serif + +/* Você pode usar as variáveis em toda a sua folha de estilo. +Agora, se você quer mudar a cor, você só tem que fazer a mudança uma vez. */ + +body + background-color $primary-color + color $secondary-color + font-family $body-font + +/* Quando compilar ficaria assim: */ +body { + background-color: #A3A4FF; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + +/ * +Este é muito mais fácil de manter do que ter de mudar a cor +cada vez que aparece em toda a sua folha de estilo. +* / + + + +/*Mixins +==============================*/ + +/* Se você achar que você está escrevendo o mesmo código para mais de um +elemento, você pode querer armazenar esse código em um mixin. + +center() + display block + margin-left auto + margin-right auto + left 0 + right 0 + +/* Utilizando um mixin */ +body { + center() + background-color: $primary-color +} + +/* Apoś compilar ficaria assim: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #A3A4FF; +} + +/* Você pode usar mixins para criar uma propriedade estenográfica. */ + +size($width, $height) + width $width + height $height + +.rectangle + size(100px, 60px) + +.square + size(40px, 40px) + +/* Você pode usar um mixin como uma propriedade CSS. */ +circle($ratio) + width $ratio * 2 + height $ratio * 2 + border-radius $ratio + +.ball + circle 25px + + +/* Interpolação +==============================*/ + +vendor(prop, args) + -webkit-{prop} args + -moz-{prop} args + {prop} args + +border-radius() + vendor('border-radius', arguments) + +box-shadow() + vendor('box-shadow', arguments) + +button + border-radius 1px 2px / 3px 4px + +/* Funções +==============================*/ + +/* Funções no Stylus permitem fazer uma variedade de tarefas, como por exemplo, menipular algum dado. */ + +body { + background darken(#0088DD, 50%) // Escurece a cor #0088DD em 50% +} + +/** Criando sua própria função */ +somar(a, b) + a + b + +body + padding somar(10px, 5) + +/* Condições +==============================*/ +comparar(a, b) + if a > b + maior + else if a < b + menor + else + igual + +comparar(5, 2) // => maior +comparar(1, 5) // => menor +comparar(10, 10) // => igual + +/* Iterações +==============================*/ + +/** +Sintaxe de laço de repetição for: +for <val-name> [, <key-name>] in <expression> +**/ + +for $item in (1..2) /* Repete o bloco 12 vezes */ + .col-{$item} + width ($item / 12) * 100% /* Calcula a largula pelo número da coluna* + +``` + +Agora que você conhece um pouco sobre esse poderoso pré-processador de CSS, você está pronto para criar folhas de estilos mais dinâmicas. Para aprofundar seus conhecimentos visite a documentação oficial do stylus em http://stylus-lang.com. |