fix(curriculum): remove SASS from requirements
This commit is contained in:
Valeriy S
Stuart Taylor
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: تطبيق نمط حتى يتم استيفاء الشرط معwhile
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: عش المغلق مع ساس
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: ''
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 应用样式直到满足@while的条件
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Mixins创建可重用的CSS
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 将一组CSS样式扩展到另一个元素
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Sass嵌套CSS
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Partials将您的样式拆分为较小的块
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用Sass变量存储数据
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用@each映射列表中的项目
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用@for创建Sass循环
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 使用@if和@else将逻辑添加到您的样式
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
@ -66,23 +63,21 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
The solution requires using the $color variable twice: once for the class name and once for setting the background color. You can use either the list or map data type.
|
||||
|
||||
### List Data type
|
||||
```js
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
|
||||
|
||||
@each $color in blue, black, red {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
@ -95,15 +90,15 @@ The solution requires using the $color variable twice: once for the class name a
|
||||
```
|
||||
|
||||
### Map Data type
|
||||
```js
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
|
||||
|
||||
$colors: (color1: blue, color2: black, color3: red);
|
||||
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
@ -113,7 +108,6 @@ The solution requires using the $color variable twice: once for the class name a
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
---
|
||||
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Aplicar um estilo até que uma condição seja satisfeita com @while
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crie CSS Reutilizável com Mixins
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Estenda um conjunto de estilos CSS para outro elemento
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Nest CSS com Sass
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Dividir seus estilos em pedaços menores com parciais
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Armazenar dados com variáveis Sass
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use @each para mapear itens em uma lista
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use @for para criar um loop Sass
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use @if e @else para adicionar lógica aos seus estilos
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Применить стиль до тех пор, пока условие не встретится с @while'
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Создать многоразовый CSS с помощью Mixins
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Расширение одного набора стилей CSS для другого элемента
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Nest CSS с Sass
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Разделите свои стили на мелкие куски с частицами
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Сохранять данные с помощью переменных Sass
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Использовать @each для сопоставления элементов в списке
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Используйте @ для создания петли Sass
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: 'Используйте @if и @else, чтобы добавить логику в свои стили.'
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: Apply a Style Until a Condition is Met with @while
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Aplicar un estilo hasta que se cumpla una condición con @while
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: Create Reusable CSS with Mixins
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crea CSS reutilizable con Mixins
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: Extend One Set of CSS Styles to Another Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Extiende un conjunto de estilos CSS a otro elemento
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Nest CSS with Sass
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Nest CSS con Sass
|
||||
@ -11,24 +8,24 @@ localeTitle: Nest CSS con Sass
|
||||
|
||||
## Description
|
||||
<section id="description">
|
||||
Sass permite anidamiento (<code>nesting</code>) de reglas CSS, que es una forma útil de organizar una hoja de estilo. Normalmente, cada elemento se escribe en una línea diferente para darle estilo así:
|
||||
Sass permite anidamiento (<code>nesting</code>) de reglas CSS, que es una forma útil de organizar una hoja de estilo. Normalmente, cada elemento se escribe en una línea diferente para darle estilo así:
|
||||
|
||||
```html
|
||||
nav {
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
|
||||
nav ul {
|
||||
nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Para un proyecto grande, el archivo CSS tendrá muchas líneas y reglas. Aquí es donde el <code>nesting</code> puede ayudar a organizar su código al colocar reglas de estilo secundarias dentro de los respectivos elementos principales:
|
||||
|
||||
Para un proyecto grande, el archivo CSS tendrá muchas líneas y reglas. Aquí es donde el <code>nesting</code> puede ayudar a organizar su código al colocar reglas de estilo secundarias dentro de los respectivos elementos principales:
|
||||
|
||||
```html
|
||||
nav {
|
||||
background-color: red;
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: Split Your Styles into Smaller Chunks with Partials
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Divide tus estilos en trozos más pequeños con parciales
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Store Data with Sass Variables
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Almacenar datos con variables Sass
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: Use @each to Map Over Items in a List
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Utilice @each para asignar sobre elementos en una lista
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: Use @for to Create a Sass Loop
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Usa @for para crear un Sass Loop
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: Use @if and @else to Add Logic To Your Styles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.10.9/sass.sync.min.js'
|
||||
raw: true
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Use @if y @else para agregar lógica a sus estilos
|
||||
|
||||
Reference in New Issue
Block a user