updated portuguese file (#38483)

This commit is contained in:
Iván Franco
2020-04-12 17:37:21 +02:00
committed by GitHub
parent 99c2f0d4f5
commit e1e18fb764

View File

@ -7,7 +7,7 @@ localeTitle: Crie CSS Reutilizável com Mixins
---
## Description
<section id="description"> No Sass, um <code>mixin</code> é um grupo de declarações CSS que podem ser reutilizadas em toda a folha de estilo. Os novos recursos do CSS levam tempo antes de serem totalmente adotados e prontos para serem usados em todos os navegadores. Como os recursos são adicionados aos navegadores, as regras CSS que os usam podem precisar de prefixos de fornecedores. Considere &quot;box-shadow&quot;: <blockquote> div { <br> -webkit-box-shadow: 0px 0px 4px #fff; <br> -moz-box-shadow: 0px 0px 4px #fff; <br> -ms-box-shadow: 0px 0px 4px #fff; <br> box-shadow: 0px 0px 4px #fff; <br> } </blockquote> É muita digitação para reescrever esta regra para todos os elementos que possuem uma <code>box-shadow</code> , ou para alterar cada valor para testar diferentes efeitos. <code>Mixins</code> são como funções para CSS. Aqui está como escrever um: <blockquote> @mixin box-shadow ($ x, $ y, $ blur, $ c) { <br> -webkit-box-shadow: $ x, $ y, $ borrão, $ c; <br> -moz-box-shadow: $ x, $ y, $ borrão, $ c; <br> -ms-box-shadow: $ x, $ y, $ blur, $ c; <br> box-shadow: $ x, $ y, $ blur, $ c; <br> } </blockquote> A definição começa com <code>@mixin</code> seguido por um nome personalizado. Os parâmetros ( <code>$x</code> , <code>$y</code> , <code>$blur</code> e <code>$c</code> no exemplo acima) são opcionais. Agora, sempre que uma regra de <code>box-shadow</code> é necessária, apenas uma linha chamando o <code>mixin</code> substitui a necessidade de digitar todos os prefixos do fornecedor. Um <code>mixin</code> é chamado com a diretiva <code>@include</code> : <blockquote> div { <br> @include box-shadow (0px, 0px, 4px, #fff); <br> } </blockquote></section>
<section id="description"> No Sass, um <code>mixin</code> é um grupo de declarações CSS que podem ser reutilizadas em toda a folha de estilo. Os novos recursos do CSS levam tempo antes de serem totalmente adotados e prontos para serem usados em todos os navegadores. Como os recursos são adicionados aos navegadores, as regras CSS que os usam podem precisar de prefixos de fornecedores. Considere &quot;box-shadow&quot;: <blockquote> div { <br> -webkit-box-shadow: 0px 0px 4px #fff; <br> -moz-box-shadow: 0px 0px 4px #fff; <br> -ms-box-shadow: 0px 0px 4px #fff; <br> box-shadow: 0px 0px 4px #fff; <br> } </blockquote> É muita digitação para reescrever esta regra para todos os elementos que possuem uma <code>box-shadow</code> , ou para alterar cada valor para testar diferentes efeitos. <code>Mixins</code> são como funções para CSS. Aqui está como escrever um: <blockquote> @mixin box-shadow ($x, $y, $blur, $c) { <br> -webkit-box-shadow: $x $y $blur $c; <br> -moz-box-shadow: $x $y $blur $c; <br> -ms-box-shadow: $x $y $blur $c; <br> box-shadow: $x $y $blur $c; <br> } </blockquote> A definição começa com <code>@mixin</code> seguido por um nome personalizado. Os parâmetros ( <code>$x</code> , <code>$y</code> , <code>$blur</code> e <code>$c</code> no exemplo acima) são opcionais. Agora, sempre que uma regra de <code>box-shadow</code> é necessária, apenas uma linha chamando o <code>mixin</code> substitui a necessidade de digitar todos os prefixos do fornecedor. Um <code>mixin</code> é chamado com a diretiva <code>@include</code> : <blockquote> div { <br> @include box-shadow (0px, 0px, 4px, #fff); <br> } </blockquote></section>
## Instructions
<section id="instructions"> Escreva um <code>mixin</code> para <code>border-radius</code> e atribua a ele um parâmetro <code>$radius</code> . Deve usar todos os prefixos do fornecedor do exemplo. Em seguida, utilizar a <code>border-radius</code> <code>mixin</code> para dar o <code>#awesome</code> elemento de um raio de fronteira de 15 pixels. </section>