freeCodeCamp

4.6 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7dbd367417b2b2512bb6	Create Reusable CSS with Mixins	0		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);
}

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.

Tests

tests:
  - text: Seu código deve declarar um <code>mixin</code> chamado <code>border-radius</code> que tenha um parâmetro chamado <code>$radius</code> .
    testString: 'assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi), "Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.");'
  - text: Seu código deve incluir o <code>-webkit-border-radius</code> que usa o parâmetro <code>$radius</code> .
    testString: 'assert(code.match(/-webkit-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
  - text: Seu código deve incluir o prefixo de vendedor <code>-moz-border-radius</code> que usa o parâmetro <code>$radius</code> .
    testString: 'assert(code.match(/-moz-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
  - text: Seu código deve incluir o prefixo do <code>-ms-border-radius</code> que usa o parâmetro <code>$radius</code> .
    testString: 'assert(code.match(/-ms-border-radius:\s*?\$radius;/gi), "Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.");'
  - text: 'Seu código deve incluir a regra geral <code>border-radius</code> , que usa o parâmetro <code>$radius</code> .'
    testString: 'assert(code.match(/border-radius:\s*?\$radius;/gi).length == 4, "Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.");'
  - text: 'Seu código deve chamar o <code>@include</code> <code>border-radius mixin</code> usando a palavra-chave <code>@include</code> , configurando-a para 15px.'
    testString: 'assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\);/gi), "Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.");'

Challenge Seed

<style type='text/sass'>



  #awesome {
    width: 150px;
    height: 150px;
    background-color: green;

  }
</style>

<div id="awesome"></div>

Solution

// solution required

4.6 KiB Raw Blame History Unescape Escape