From 5ce3d12e397f8ad11c8db03cdc3afc2a6ec625af Mon Sep 17 00:00:00 2001 From: Divay Prakash Date: Thu, 10 Jan 2019 16:16:34 +0530 Subject: Stylus translation into en --- stylus.html.markdown | 221 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 220 insertions(+), 1 deletion(-) diff --git a/stylus.html.markdown b/stylus.html.markdown index 571d5cb1..e35b8158 100644 --- a/stylus.html.markdown +++ b/stylus.html.markdown @@ -4,6 +4,225 @@ filename: learnStylus.styl contributors: - ["Salomão Neto", "https://github.com/salomaosnff"] - ["Isaac Henrique", "https://github.com/Isaachi1"] +translators: + - ["Divay Prakash", "https://github.com/divayprakash"] --- -TODO +Stylus is a dynamic stylesheet preprocessor language that is compiled into CSS. It aims to add functionality to CSS without breaking compatibility across web browsers. +It does this using variables, nesting, mixins, functions and more. + +Stylus syntax is very flexible. You can use standard CSS syntax and leave the semicolon (;), colon (:) and even the ({) and (}) optional, making your code even more readable. + +Stylus does not provide new style options, but gives functionality that lets you make your CSS much more dynamic. + +```scss + +/* Code style +==============================*/ + +/* Keys, semicolon, and colon are optional in Stylus. */ + +body { + background: #000; +} + +body { + background: #000 +} + +body { + background #000 +} + +body + background #000 + +body + background: #000; + +body + background: #000 + + +// Single-line comments are removed when Stylus is compiled into CSS. + +/* Multi-line comments are preserved. */ + + +/* Selectors +==============================*/ + +/* Selecting elements within another element */ +body { + background: #000000; + h1 { + color: #FF0000; + } +} + +/* Or if you prefer... */ +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 [, ] in +**/ + +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. -- cgit v1.2.3 From 2442861c2701b33c513584bb21898f812f9170e0 Mon Sep 17 00:00:00 2001 From: Divay Prakash Date: Thu, 10 Jan 2019 17:04:30 +0530 Subject: Translation into en --- stylus.html.markdown | 82 ++++++++++++++++++++++++++-------------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/stylus.html.markdown b/stylus.html.markdown index e35b8158..27dc3401 100644 --- a/stylus.html.markdown +++ b/stylus.html.markdown @@ -67,7 +67,7 @@ body color #FF0000 -/* Obtendo a referência do elemento pai +/* Getting parent element reference ==============================*/ a { color: #0088dd; @@ -77,47 +77,47 @@ a { } -/*Variáveis +/* Variables ==============================*/ -/* - É 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. +/* + You can store a CSS value (such as the color) of a variable. +  Although it is optional, it is recommended to add $ before a variable name +  so you can distinguish a variable from another CSS value. */ $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. */ +/* You can use variables throughout your style sheet. +Now, if you want to change the color, you only have to make the change once. */ body background-color $primary-color color $secondary-color font-family $body-font -/* Quando compilar ficaria assim: */ +/* After compilation: */ 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. +/ * +This is much easier to maintain than having to change color +each time it appears throughout your style sheet. * / -/*Mixins +/* 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. +/* If you find that you are writing the same code for more than one +element, you may want to store that code in a mixin. center() display block @@ -126,13 +126,13 @@ center() left 0 right 0 -/* Utilizando um mixin */ +/* Using the mixin */ body { center() background-color: $primary-color } -/* Apoś compilar ficaria assim: */ +/* After compilation: */ div { display: block; margin-left: auto; @@ -142,7 +142,7 @@ div { background-color: #A3A4FF; } -/* Você pode usar mixins para criar uma propriedade estenográfica. */ +/* You can use mixins to create a shorthand property. */ size($width, $height) width $width @@ -154,7 +154,7 @@ size($width, $height) .square size(40px, 40px) -/* Você pode usar um mixin como uma propriedade CSS. */ +/* You can use a mixin as a CSS property. */ circle($ratio) width $ratio * 2 height $ratio * 2 @@ -164,7 +164,7 @@ circle($ratio) circle 25px -/* Interpolação +/* Interpolation ==============================*/ vendor(prop, args) @@ -181,48 +181,48 @@ box-shadow() button border-radius 1px 2px / 3px 4px -/* Funções +/* Functions ==============================*/ -/* Funções no Stylus permitem fazer uma variedade de tarefas, como por exemplo, menipular algum dado. */ +/* Functions in Stylus allow you to perform a variety of tasks, such as recalling some data. */ body { - background darken(#0088DD, 50%) // Escurece a cor #0088DD em 50% + background darken(#0088DD, 50%) // Dim color #0088DD by 50% } -/** Criando sua própria função */ -somar(a, b) +/* Creating your own function */ +add(a, b) a + b body - padding somar(10px, 5) + padding add(10px, 5) -/* Condições +/* Conditions ==============================*/ -comparar(a, b) +compare(a, b) if a > b - maior + bigger else if a < b - menor + smaller else - igual + equal -comparar(5, 2) // => maior -comparar(1, 5) // => menor -comparar(10, 10) // => igual +compare(5, 2) // => bigger +compare(1, 5) // => smaller +compare(10, 10) // => equal -/* Iterações +/* Iterations ==============================*/ -/** -Sintaxe de laço de repetição for: +/* +Repeat loop syntax for: for [, ] in -**/ +*/ -for $item in (1..2) /* Repete o bloco 12 vezes */ +for $item in (1..2) /* Repeat block 12 times */ .col-{$item} - width ($item / 12) * 100% /* Calcula a largula pelo número da coluna* + width ($item / 12) * 100% /* Calculate row by column number */ ``` -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. +Now that you know a little about this powerful CSS preprocessor, you're ready to create more dynamic style sheets. To learn more, visit the official stylus documentation at http://stylus-lang.com. -- cgit v1.2.3 From aa21998323ce4ba75fb2961ffdd733de7f0e4787 Mon Sep 17 00:00:00 2001 From: Divay Prakash Date: Thu, 10 Jan 2019 17:07:51 +0530 Subject: Fix empty lines --- stylus.html.markdown | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/stylus.html.markdown b/stylus.html.markdown index 27dc3401..1c5ddd32 100644 --- a/stylus.html.markdown +++ b/stylus.html.markdown @@ -43,7 +43,6 @@ body body background: #000 - // Single-line comments are removed when Stylus is compiled into CSS. /* Multi-line comments are preserved. */ @@ -112,7 +111,6 @@ each time it appears throughout your style sheet. * / - /* Mixins ==============================*/ @@ -181,6 +179,7 @@ box-shadow() button border-radius 1px 2px / 3px 4px + /* Functions ==============================*/ @@ -197,6 +196,7 @@ add(a, b) body padding add(10px, 5) + /* Conditions ==============================*/ compare(a, b) @@ -211,6 +211,7 @@ compare(5, 2) // => bigger compare(1, 5) // => smaller compare(10, 10) // => equal + /* Iterations ==============================*/ @@ -222,7 +223,6 @@ for [, ] in for $item in (1..2) /* Repeat block 12 times */ .col-{$item} width ($item / 12) * 100% /* Calculate row by column number */ - ``` Now that you know a little about this powerful CSS preprocessor, you're ready to create more dynamic style sheets. To learn more, visit the official stylus documentation at http://stylus-lang.com. -- cgit v1.2.3