fix(curriculum): remove SASS from requirements
This commit is contained in:
@@ -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
|
||||
---
|
||||
|
||||
|
Reference in New Issue
Block a user