diff --git a/curriculum/challenges/portuguese/03-front-end-libraries/sass/create-reusable-css-with-mixins.portuguese.md b/curriculum/challenges/portuguese/03-front-end-libraries/sass/create-reusable-css-with-mixins.portuguese.md index e2b291fb42..f34d856ca9 100644 --- a/curriculum/challenges/portuguese/03-front-end-libraries/sass/create-reusable-css-with-mixins.portuguese.md +++ b/curriculum/challenges/portuguese/03-front-end-libraries/sass/create-reusable-css-with-mixins.portuguese.md @@ -7,7 +7,7 @@ localeTitle: Crie CSS Reutilizável com Mixins --- ## Description -
No Sass, um mixin é 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 "box-shadow":
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
É muita digitação para reescrever esta regra para todos os elementos que possuem uma box-shadow , ou para alterar cada valor para testar diferentes efeitos. Mixins são como funções para CSS. Aqui está como escrever um:
@mixin box-shadow ($ x, $ y, $ blur, $ c) {
-webkit-box-shadow: $ x, $ y, $ borrão, $ c;
-moz-box-shadow: $ x, $ y, $ borrão, $ c;
-ms-box-shadow: $ x, $ y, $ blur, $ c;
box-shadow: $ x, $ y, $ blur, $ c;
}
A definição começa com @mixin seguido por um nome personalizado. Os parâmetros ( $x , $y , $blur e $c no exemplo acima) são opcionais. Agora, sempre que uma regra de box-shadow é necessária, apenas uma linha chamando o mixin substitui a necessidade de digitar todos os prefixos do fornecedor. Um mixin é chamado com a diretiva @include :
div {
@include box-shadow (0px, 0px, 4px, #fff);
}
+
No Sass, um mixin é 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 "box-shadow":
div {
-webkit-box-shadow: 0px 0px 4px #fff;
-moz-box-shadow: 0px 0px 4px #fff;
-ms-box-shadow: 0px 0px 4px #fff;
box-shadow: 0px 0px 4px #fff;
}
É muita digitação para reescrever esta regra para todos os elementos que possuem uma box-shadow , ou para alterar cada valor para testar diferentes efeitos. Mixins são como funções para CSS. Aqui está como escrever um:
@mixin box-shadow ($x, $y, $blur, $c) {
-webkit-box-shadow: $x $y $blur $c;
-moz-box-shadow: $x $y $blur $c;
-ms-box-shadow: $x $y $blur $c;
box-shadow: $x $y $blur $c;
}
A definição começa com @mixin seguido por um nome personalizado. Os parâmetros ( $x , $y , $blur e $c no exemplo acima) são opcionais. Agora, sempre que uma regra de box-shadow é necessária, apenas uma linha chamando o mixin substitui a necessidade de digitar todos os prefixos do fornecedor. Um mixin é chamado com a diretiva @include :
div {
@include box-shadow (0px, 0px, 4px, #fff);
}
## Instructions
Escreva um mixin para border-radius e atribua a ele um parâmetro $radius . Deve usar todos os prefixos do fornecedor do exemplo. Em seguida, utilizar a border-radius mixin para dar o #awesome elemento de um raio de fronteira de 15 pixels.