feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
GitHub
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Aplicar um estilo até que uma condição seja atendida com @while
|
||||
challengeType: 0
|
||||
forumTopicId: 301454
|
||||
dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A diretiva `@while` é uma opção com funcionalidade semelhante ao laço `while` do JavaScript. Isso cria as regras do CSS até que uma condição seja atendida.
|
||||
|
||||
O desafio `@for` deu um exemplo para criar um sistema de grid simples. Isso também pode funcionar com `@while`.
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@while $x < 13 {
|
||||
.col-#{$x} { width: 100%/12 * $x;}
|
||||
$x: $x + 1;
|
||||
}
|
||||
```
|
||||
|
||||
Primeiro, defina a variável `$x` e defina-a como 1. Em seguida, use a diretiva `@while` para criar o sistema de grid *enquanto* `$x` for menor que 13. Depois de definir a regra CSS para `width`, `$x` é incrementado por 1 para evitar um loop infinito.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use `@while` para criar uma série de classes com diferentes `font-sizes`.
|
||||
|
||||
Deve haver 5 classes diferentes de `text-1` até `text-5`. Em seguida, defina `font-size` como `15px` multiplicado pelo número de índice atual. Certifique-se de evitar um loop infinito!
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve usar a diretiva `@while`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@while /g));
|
||||
```
|
||||
|
||||
O código deve usar uma variável de índice que começa em um índice de 1.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$.*:\s*?1;/gi));
|
||||
```
|
||||
|
||||
O código deve incrementar a variável contadora.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
|
||||
```
|
||||
|
||||
A classe `.text-1` deve ter um `font-size` de `15px`.
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
A classe `.text-2` deve ter um `font-size` de `30px`.
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
A classe `.text-3` deve ter um `font-size` de `45px`.
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
A classe `.text-4` deve ter um `font-size` de `60px`.
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
A classe `.text-5` deve ter um `font-size` de `75px`.
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
$x: 1;
|
||||
@while $x < 6 {
|
||||
.text-#{$x}{
|
||||
font-size: 15px * $x;
|
||||
}
|
||||
$x: $x + 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Criar CSS reutilizável com mixins
|
||||
challengeType: 0
|
||||
forumTopicId: 301455
|
||||
dashedName: create-reusable-css-with-mixins
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Em Sass, um <dfn>mixin</dfn> é um grupo de declarações CSS que podem ser reutilizados em toda a folha de estilos.
|
||||
|
||||
Os recursos CSS mais recentes levam tempo antes de serem totalmente adotados e prontos para uso em todos os navegadores. Como recursos são adicionados aos navegadores, as regras CSS que os usam podem precisar de prefixos de fornecedores. Considere `box-shadow`:
|
||||
|
||||
```scss
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
É preciso muita digitação para reescrever esta regra para todos os elementos que têm uma `box-shadow`, ou para alterar cada valor para testar efeitos diferentes. Mixins são como funções para CSS. Veja como escrever um:
|
||||
|
||||
```scss
|
||||
@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 (o `$x`, `$y`, `$blur`, e `$c` no exemplo acima) são opcionais. Agora, a qualquer momento que uma regra `box-shadow` é necessária, apenas uma única linha que chama o mixin substitui a necessidade de digitar todos os prefixos do fornecedor. Um mixin é chamado com a diretiva `@include`:
|
||||
|
||||
```scss
|
||||
div {
|
||||
@include box-shadow(0px, 0px, 4px, #fff);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Escreva um mixin para `border-radius` e dê a ele o parâmetro `$radius`. Deve usar todos os prefixos de fornecedor do exemplo. Em seguida, use o mixin de `border-radius` para dar ao elemento `#awesome` um raio de borda de `15px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve declarar um mixin nomeado `border-radius` que tem um parâmetro chamado `$radius`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
O código deve incluir o prefixo do fornecedor `-webkit-border-radius` que usa o parâmetro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
O código deve incluir o prefixo do fornecedor `-moz-border-radius` que usa o parâmetro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
O código deve incluir o prefixo do fornecedor `-ms-border-radius` que usa o parâmetro `$radius`.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
```
|
||||
|
||||
O código deve incluir a regra geral `border-radius` que usa o parâmetro `$radius`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
|
||||
4
|
||||
);
|
||||
```
|
||||
|
||||
O código deve chamar o `border-radius mixin` usando a palavra-chave `@include`, definindo-o como `15px`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Estender um conjunto de estilos CSS para outro elemento
|
||||
challengeType: 0
|
||||
forumTopicId: 301456
|
||||
dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass tem um recurso chamado `extend` que faz com que seja fácil pegar emprestado as regras CSS de um elemento e construr a partir delas em outro.
|
||||
|
||||
Por exemplo, o bloco abaixo de regras CSS estiliza uma classe `.panel`. Tem um `background-color`, um `height` e um `border`.
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
background-color: red;
|
||||
height: 70px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
```
|
||||
|
||||
Agora você quer outro painel chamado `.big-panel`. Ele tem as mesmas propriedades de base que `.panel`, mas também precisa de um `width` e `font-size`. É possível copiar e colar as regras iniciais de CSS do `.panel`, mas o código se torna repetitivo à medida que você adiciona mais tipos de painéis. A diretiva `extend` é uma maneira simples de reutilizar as regras escritas para um elemento, e então adicionar mais para outro:
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@extend .panel;
|
||||
width: 150px;
|
||||
font-size: 2em;
|
||||
}
|
||||
```
|
||||
|
||||
O `.big-panel` terá as mesmas propriedades que `.panel` além dos novos estilos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Faça uma classe `.info-important` que estenda `.info` e também tenha um `background-color` definido como magenta.
|
||||
|
||||
# --hints--
|
||||
|
||||
A classe `info-important` deve ter um `background-color` definido para `magenta`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
A classe `info-important` deve usar `@extend` para herdar o estilo da classe `info`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
h3{
|
||||
text-align: center;
|
||||
}
|
||||
.info{
|
||||
width: 200px;
|
||||
border: 1px solid black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h3>Posts</h3>
|
||||
<div class="info-important">
|
||||
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
h3{
|
||||
text-align: center;
|
||||
}
|
||||
.info{
|
||||
width: 200px;
|
||||
border: 1px solid black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.info-important{
|
||||
@extend .info;
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h3>Posts</h3>
|
||||
<div class="info-important">
|
||||
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Aninhar CSS com Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301457
|
||||
dashedName: nest-css-with-sass
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass permite aninhar as regras CSS, o que é uma maneira útil de organizar uma folha de estilo.
|
||||
|
||||
Normalmente, cada elemento é direcionado a uma linha diferente para estilizá-lo, assim:
|
||||
|
||||
```scss
|
||||
nav {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
```
|
||||
|
||||
Para um grande projeto, o arquivo CSS terá muitas linhas e regras. Aqui é onde aninhar pode ajudar a organizar seu código colocando regras de estilo filho dentro dos respectivos elementos parentais:
|
||||
|
||||
```scss
|
||||
nav {
|
||||
background-color: red;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use a técnica de aninhamento mostrada acima para reorganizar as regras CSS para ambos os filhos do elemento `.blog-post`. Para fins de teste, o `h1` deve vir antes do elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve reorganizar as regras CSS para que o `h1` e `p` estejam aninhados no elemento pai `.blog-post`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
.blog-post {
|
||||
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blog-post">
|
||||
<h1>Blog Title</h1>
|
||||
<p>This is a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
.blog-post {
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blog-post">
|
||||
<h1>Blog Title</h1>
|
||||
<p>This is a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Dividir os estilos em partes menores com partials
|
||||
challengeType: 0
|
||||
forumTopicId: 301459
|
||||
dashedName: split-your-styles-into-smaller-chunks-with-partials
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>Partials</dfn> no Sass são arquivos separados que possuem segmentos de código CSS. Estes são importados e usados em outros arquivos Sass. Essa é uma ótima maneira de agrupar código semelhante em um módulo para mantê-lo organizado.
|
||||
|
||||
Nomes de partials começam com o caractere sublinhado (`_`), que diz para Sass que é um pequeno segmento de CSS e para não convertê-lo em um arquivo CSS. Além disso, os arquivos Sass terminam com a extensão de arquivo `.scss`. Para trazer o código partial para outro arquivo Sass, use a diretiva `@import`.
|
||||
|
||||
Por exemplo, se todos os seus mixins são salvos em uma partial chamada "\_mixins.scss", e eles são necessários no arquivo "main.scss", essa é a forma de como usá-los no arquivo principal:
|
||||
|
||||
```scss
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
Observe que o sublinhado e a extensão de arquivo não são necessários na instrução `import` - o Sass entende que é partial. Uma vez que um partial é importado para um arquivo, todas as variáveis, mixins e outro código estão disponíveis para uso.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Escreva uma declaração `@import` para importar uma partial chamada `_variables.scss` para o arquivo main.scss.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve usar a diretiva `@import` e não deve incluir o sublinhado no nome do arquivo.
|
||||
|
||||
```js
|
||||
assert(code.match(/@import\s+?('|")variables\1/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!-- The main.scss file -->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
@import 'variables'
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Armazenar dados com variáveis do Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301460
|
||||
dashedName: store-data-with-sass-variables
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Um recurso do Sass que é diferente do CSS está no fato de ele usar variáveis. Elas são declaradas e definidas para armazenar dados, semelhante ao JavaScript.
|
||||
|
||||
Em JavaScript, variáveis são definidas usando as palavras-chave `let` e `const`. Em Sass, variáveis começam com um `$` seguido do nome da variável.
|
||||
|
||||
Aqui está alguns exemplos:
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
```
|
||||
|
||||
Para usar variáveis:
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-family: $main-fonts;
|
||||
color: $headings-color;
|
||||
}
|
||||
```
|
||||
|
||||
Um exemplo onde variáveis são úteis é quando um certo número de elementos precisa ser da mesma cor. Se essa cor for alterada, o único local para se editar no código é no valor da variável.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crie a variável `$text-color` e defina-a como `red`. Em seguida, altere o valor da propriedade `color` dos elementos `.blog-post` e `h2` para a variável `$text-color`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve ter uma variável Sass declarada `$text-color` com o valor `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
|
||||
```
|
||||
|
||||
O código deve usar a variável `$text-color` para alterar a propriedade `color` para os itens `.blog-post` e `h2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
|
||||
```
|
||||
|
||||
O elemento `.blog-post` deve ter a propriedade `color` definida como red.
|
||||
|
||||
```js
|
||||
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Os elementos `h2` devem ter a propriedade `color` definida como red.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post, h2 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="header">Learn Sass</h1>
|
||||
<div class="blog-post">
|
||||
<h2>Some random title</h2>
|
||||
<p>This is a paragraph with some random text in it</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Header #2</h2>
|
||||
<p>Here is some more random text.</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Here is another header</h2>
|
||||
<p>Even more random text within a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
$text-color: red;
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post, h2 {
|
||||
color: $text-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="header">Learn Sass</h1>
|
||||
<div class="blog-post">
|
||||
<h2>Some random title</h2>
|
||||
<p>This is a paragraph with some random text in it</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Header #2</h2>
|
||||
<p>Here is some more random text.</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Here is another header</h2>
|
||||
<p>Even more random text within a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Usar @each para mapear sobre itens em uma lista
|
||||
challengeType: 0
|
||||
forumTopicId: 301461
|
||||
dashedName: use-each-to-map-over-items-in-a-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O último desafio mostrou como a diretiva `@for` usa valores de início e fim para iterar uma quantidade determinada de vezes. Sass também oferece a diretiva `@each` a qual itera sobre cada item em uma lista ou mapa. Em cada iteração, a variável é atribuída ao valor atual da lista ou do mapa.
|
||||
|
||||
```scss
|
||||
@each $color in blue, red, green {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
Um mapa possui uma sintaxe ligeiramente diferente. Exemplo:
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
Note que a variável `$key` é necessária para referenciar as chaves no mapa. Caso contrário, o CSS compilado teria nele `color1`, `color2` e assim por diante. Os dois exemplos de código acima são convertidos para os CSS seguintes:
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Escreva uma diretiva `@each` que passar por uma lista: `blue, black, red` e atribui cada variável à classe `.color-bg`, aonde a parte `color` altera para cada item. Cada classe deve definir a propriedade `background-color` para a respectiva cor.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve usar a diretiva `@each`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@each /g));
|
||||
```
|
||||
|
||||
A classe `.blue-bg` deve ter a propriedade `background-color` definida com o valor blue.
|
||||
|
||||
```js
|
||||
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
A classe `.black-bg` deve ter a propriedade `background-color` com o valor black.
|
||||
|
||||
```js
|
||||
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
A classe `.red-bg` deve ter a propriedade `background-color` com o valor red.
|
||||
|
||||
```js
|
||||
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@each $color in blue, black, red {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
$colors: (color1: blue, color2: black, color3: red);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Usar @for para criar um laço em Sass
|
||||
challengeType: 0
|
||||
forumTopicId: 301462
|
||||
dashedName: use-for-to-create-a-sass-loop
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A diretiva `@for` adiciona estilos em um laço, muito similar ao laço `for` em JavaScript.
|
||||
|
||||
`@for` é usado de duas maneiras: "começo ao fim" ou "começo até o fim". A principal diferença é que "começo **até o** fim" *exclui* o número final como parte da contagem, enquanto "começo ** ao ** fim" *inclui* o número final como parte da contagem.
|
||||
|
||||
Aqui está um exemplo de começo **ao** fim:
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 12 {
|
||||
.col-#{$i} { width: 100%/12 * $i; }
|
||||
}
|
||||
```
|
||||
|
||||
A parte `#{$i}` é a sintaxe para combinar uma variável (`i`) com texto para criar uma string. Quando o arquivo Sass é convertido para CSS, ele se parece com isto:
|
||||
|
||||
```scss
|
||||
.col-1 {
|
||||
width: 8.33333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 16.66667%;
|
||||
}
|
||||
|
||||
...
|
||||
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
Essa é uma maneira poderosa de criar um layout de grade. Agora você tem doze opções para a largura das colunas disponíveis como classes CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Escreva uma diretiva `@for` que recebe uma variável `$j` que vai de 1 **até** 6.
|
||||
|
||||
Isso deve criar 5 classes chamadas `.text-1` até `.text-5` onde cada um tem um `font-size` definido como 15px multiplicado pelo índice.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve usar a diretiva `@for`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@for /g));
|
||||
```
|
||||
|
||||
A classe `.text-1` deve ter um `font-size` de 15px.
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
A classe `.text-2` deve ter um `font-size` de 30px.
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
A classe `.text-3` deve ter um `font-size` de 45px.
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
A classe `.text-4` deve ter um `font-size` de 60px.
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
A classe `.text-5` deve ter um `font-size` de 75px.
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
.text-#{$i} { font-size: 15px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@for $i from 1 to 6 {
|
||||
.text-#{$i} { font-size: 15px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Usar @if e @else para adicionar lógica a seus estilos
|
||||
challengeType: 0
|
||||
forumTopicId: 301463
|
||||
dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A diretiva `@if` no Sass é útil para testar um caso específico - funciona exatamente como a instrução `if` em JavaScript.
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@if $bool == true {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Assim como em JavaScript, teste `@else if` e `@else` para mais condições:
|
||||
|
||||
```scss
|
||||
@mixin text-effect($val) {
|
||||
@if $val == danger {
|
||||
color: red;
|
||||
}
|
||||
@else if $val == alert {
|
||||
color: yellow;
|
||||
}
|
||||
@else if $val == success {
|
||||
color: green;
|
||||
}
|
||||
@else {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crie um mixin chamado `border-stroke` que recebe o parâmetro `$val`. O mixin deve verificar as seguintes condições usando `@if`, `@else if` e `@else`:
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
medium - 3px solid black
|
||||
heavy - 6px solid black
|
||||
```
|
||||
|
||||
Se `$val` não for `light`, `medium`, ou `heavy`, a borda deve ser ajustada para `none`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve declarar um mixin nomeado `border-stroke` que tem um parâmetro chamado `$val`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
O mixin deve ter uma instrução `@if` para verificar se `$val` é `light` e definir a `border` como `1px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
O mixin deve ter uma instrução `@else if` para verificar se `$val` é `medium` e definir a `border` como `3px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
O mixin deve ter uma instrução `@else if` para verificar se `$val` é `heavy` e definir a `border` como `6px solid black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
O mixin deve ter um comando `@else` para definir `border` para `none`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
#box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
@include border-stroke(medium);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
@mixin border-stroke($val) {
|
||||
@if $val == light {
|
||||
border: 1px solid black;
|
||||
}
|
||||
@else if $val == medium {
|
||||
border: 3px solid black;
|
||||
}
|
||||
@else if $val == heavy {
|
||||
border: 6px solid black;
|
||||
}
|
||||
@else {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
@include border-stroke(medium);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
```
|
||||
Reference in New Issue
Block a user