iskm/learnxinyminutes-docs
1
0
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2025-04-27 07:33:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Translation into en

Browse Source
This commit is contained in:
Divay Prakash 2019-01-10 17:04:30 +05:30
parent 5ce3d12e39
commit 2442861c27
1 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
stylus.html.markdown
View File

@ -67,7 +67,7 @@ body
color #FF0000 color #FF0000
/* Obtendo a referência do elemento pai /* Getting parent element reference
==============================*/ ==============================*/
a { a {
color: #0088dd; color: #0088dd;
@ -77,47 +77,47 @@ a {
} }
/*Variáveis /* Variables
==============================*/ ==============================*/
/* /*
É possível armazenar um valor CSS (tais como a cor) de uma variável. You can store a CSS value (such as the color) of a variable.
Embora seja opcional, é recomendado adicionar $ antes de um nome de variável   Although it is optional, it is recommended to add $ before a variable name
para que você possa distinguir uma variável de outro valor CSS.   so you can distinguish a variable from another CSS value.
*/ */
$primary-color = #A3A4FF $primary-color = #A3A4FF
$secondary-color = #51527F $secondary-color = #51527F
$body-font = 'Roboto', sans-serif $body-font = 'Roboto', sans-serif
/* Você pode usar as variáveis em toda a sua folha de estilo. /* You can use variables throughout your style sheet.
Agora, se você quer mudar a cor, você só tem que fazer a mudança uma vez. */ Now, if you want to change the color, you only have to make the change once. */
body body
background-color $primary-color background-color $primary-color
color $secondary-color color $secondary-color
font-family $body-font font-family $body-font
/* Quando compilar ficaria assim: */ /* After compilation: */
body { body {
background-color: #A3A4FF; background-color: #A3A4FF;
color: #51527F; color: #51527F;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
} }
/ * / *
Este é muito mais fácil de manter do que ter de mudar a cor This is much easier to maintain than having to change color
cada vez que aparece em toda a sua folha de estilo. 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 /* If you find that you are writing the same code for more than one
elemento, você pode querer armazenar esse código em um mixin. element, you may want to store that code in a mixin.
center() center()
display block display block
@ -126,13 +126,13 @@ center()
left 0 left 0
right 0 right 0
/* Utilizando um mixin */ /* Using the mixin */
body { body {
center() center()
background-color: $primary-color background-color: $primary-color
} }
/* Apoś compilar ficaria assim: */ /* After compilation: */
div { div {
display: block; display: block;
margin-left: auto; margin-left: auto;
@ -142,7 +142,7 @@ div {
background-color: #A3A4FF; 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) size($width, $height)
width $width width $width
@ -154,7 +154,7 @@ size($width, $height)
.square .square
size(40px, 40px) size(40px, 40px)
/* Você pode usar um mixin como uma propriedade CSS. */ /* You can use a mixin as a CSS property. */
circle($ratio) circle($ratio)
width $ratio * 2 width $ratio * 2
height $ratio * 2 height $ratio * 2
@ -164,7 +164,7 @@ circle($ratio)
circle 25px circle 25px
/* Interpolação /* Interpolation
==============================*/ ==============================*/
vendor(prop, args) vendor(prop, args)
@ -181,48 +181,48 @@ box-shadow()
button button
border-radius 1px 2px / 3px 4px 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 { 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 */ /* Creating your own function */
somar(a, b) add(a, b)
a + b a + b
body body
padding somar(10px, 5) padding add(10px, 5)
/* Condições /* Conditions
==============================*/ ==============================*/
comparar(a, b) compare(a, b)
if a > b if a > b
maior bigger
else if a < b else if a < b
menor smaller
else else
igual equal
comparar(5, 2) // => maior compare(5, 2) // => bigger
comparar(1, 5) // => menor compare(1, 5) // => smaller
comparar(10, 10) // => igual compare(10, 10) // => equal
/* Iterações /* Iterations
==============================*/ ==============================*/
/** /*
Sintaxe de laço de repetição for: Repeat loop syntax for:
for <val-name> [, <key-name>] in <expression> for <val-name> [, <key-name>] in <expression>
**/ */
for $item in (1..2) /* Repete o bloco 12 vezes */ for $item in (1..2) /* Repeat block 12 times */
.col-{$item} .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.