gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added SASS solutions, fixed typos, code formatting (#34792)

Browse Source 
* Added SASS solution and output CSS

* Fixed typo, added code formatting

The example code outputs for "start to end" and "start through end" were swapped. "1 to 3" does not include the end number, so should output "1 2", while "1 through 3" includes the end number, so should output "1 2 3"

* Added SASS solution and output CSS

* Added SASS solution

* Updated solution to full solution

Now includes all seed code, plus the changes needed to pass the tests, per @thecodingaviator [suggestion](https://github.com/freeCodeCamp/freeCodeCamp/pull/34792#pullrequestreview-210097979).

* Updated solution to full solution

Now includes all seed code, plus the changes needed to pass the tests, per @thecodingaviator suggestion https://github.com/freeCodeCamp/freeCodeCamp/pull/34792#pullrequestreview-210097979.

* Fixed Markdown syntax

Minor edit

* Updated solution to full solution

Now includes all seed code, plus the changes needed to pass the tests, per @thecodingaviator suggestion https://github.com/freeCodeCamp/freeCodeCamp/pull/34792#discussion_r263731937.
This commit is contained in:
Andrei Calinescu
2019-03-09 00:37:52 +09:00
committed by The Coding Aviator
parent 47441d9c1f
commit bf255ddb05
3 changed files with 112 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
guide/english/certifications/front-end-libraries/sass/use-each-to-map-over-items-in-a-list/index.md
View File

@ -3,8 +3,44 @@ title: Use @each to Map Over Items in a List
---
## Use @each to Map Over Items in a List
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/sass/use-each-to-map-over-items-in-a-list/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
## Solution
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
```sass
<style type='text/sass'>
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
@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>
```
The solution above will generate the following CSS:
```css
.blue-bg {
background-color: blue;
}
.black-bg {
background-color: black;
}
.red-bg {
background-color: red;
}
div {
height: 200px;
width: 200px;
}
```

49
guide/english/certifications/front-end-libraries/sass/use-for-to-create-a-sass-loop/index.md
View File

@ -27,7 +27,7 @@ Notice that the main difference is that "start to end" **excludes** the end numb
// some CSS
}
// 1 2
// 1 2 3
```
* For - to loop:
@ -36,7 +36,7 @@ Notice that the main difference is that "start to end" **excludes** the end numb
// some CSS
}
// 1 2 3
// 1 2
```
3. Guideline from [SASS Guideline](https://sass-guidelin.es/#loops)
@ -50,9 +50,52 @@ The `@for` loop might be useful when combined with CSS’ `:nth-*` pseudo-classe
}
}
```
Always use `$i` as a variable name to stick to the usual convention and unless you have a really good reason to, never use the to keyword: always use through. Many developers do not even know Sass offers this variation; using it might lead to confusion.
Always use `$i` as a variable name to stick to the usual convention and unless you have a really good reason to, never use the `to` keyword: always use `through`. Many developers do not even know Sass offers this variation; using it might lead to confusion.
Also be sure to respect those guidelines to preserve readability:
* Always an empty new line before `@for`;
* Always an empty new line after the closing brace (}) unless the next line is a closing brace (}).
## Solution
```sass
<style type='text/sass'>
@for $j from 1 through 5 {
.text-#{$j} { font-size: 10px * $j; }
}
</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>
```
The solution above will generate the following CSS:
```css
.text-1 {
font-size: 10px;
}
.text-2 {
font-size: 20px;
}
.text-3 {
font-size: 30px;
}
.text-4 {
font-size: 40px;
}
.text-5 {
font-size: 50px;
}
```

30
guide/english/certifications/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles/index.md
View File

@ -3,8 +3,32 @@ title: Use @if and @else to Add Logic To Your Styles
---
## Use @if and @else to Add Logic To Your Styles
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
## Solution
```sass
<style type='text/sass'>
@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;
}
}
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
#box {
width: 150px;
height: 150px;
background-color: red;
@include border-stroke(medium);
}
</style>
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
<div id="box"></div>
```