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

Feat(curriculum): scss not sass (#38764)

Browse Source
This commit is contained in:
Oliver Eyton-Williams
2020-05-09 16:31:18 +02:00
committed by GitHub
parent b017ce192c
commit 5e56a9a938
9 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/templates/Challenges/rechallenge/transformers.js
View File

@ -177,7 +177,9 @@ function getBabelOptions({ preview = false, protect = true }) {
const sassWorker = createWorker(sassCompile); const sassWorker = createWorker(sassCompile);
async function transformSASS(element) { async function transformSASS(element) {
const styleTags = element.querySelectorAll('style[type="text/sass"]'); // we only teach scss syntax, not sass. Also the compiler does not seem to be
// able to deal with sass.
const styleTags = element.querySelectorAll('style[type~="text/scss"]');
await Promise.all( await Promise.all(
[].map.call(styleTags, async style => { [].map.call(styleTags, async style => {
style.type = 'text/css'; style.type = 'text/css';

4
curriculum/challenges/english/03-front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.english.md
View File

@ -60,7 +60,7 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
@ -81,7 +81,7 @@ tests:
<section id='solution'> <section id='solution'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
$x: 1; $x: 1;
@while $x < 6 { @while $x < 6 {
.text-#{$x}{ .text-#{$x}{

4
curriculum/challenges/english/03-front-end-libraries/sass/create-reusable-css-with-mixins.english.md
View File

@ -75,7 +75,7 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
@ -101,7 +101,7 @@ tests:
<section id='solution'> <section id='solution'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
@mixin border-radius($radius) { @mixin border-radius($radius) {
-webkit-border-radius: $radius; -webkit-border-radius: $radius;
-moz-border-radius: $radius; -moz-border-radius: $radius;

4
curriculum/challenges/english/03-front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element.english.md
View File

@ -58,7 +58,7 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
h3{ h3{
text-align: center; text-align: center;
} }
@ -92,7 +92,7 @@ tests:
<section id='solution'> <section id='solution'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
h3{ h3{
text-align: center; text-align: center;
} }

4
curriculum/challenges/english/03-front-end-libraries/sass/nest-css-with-sass.english.md
View File

@ -66,7 +66,7 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
.blog-post { .blog-post {
} }
@ -95,7 +95,7 @@ tests:
<section id='solution'> <section id='solution'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
.blog-post { .blog-post {
h1 { h1 {
text-align: center; text-align: center;

4
curriculum/challenges/english/03-front-end-libraries/sass/store-data-with-sass-variables.english.md
View File

@ -54,7 +54,7 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
.header{ .header{
@ -90,7 +90,7 @@ tests:
<section id='solution'> <section id='solution'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
$text-color: red; $text-color: red;
.header{ .header{

6
curriculum/challenges/english/03-front-end-libraries/sass/use-each-to-map-over-items-in-a-list.english.md
View File

@ -77,7 +77,7 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
@ -104,7 +104,7 @@ The solution requires using the $color variable twice: once for the class name a
### List Data type ### List Data type
```html ```html
<style type='text/sass'> <style type='text/scss'>
@each $color in blue, black, red { @each $color in blue, black, red {
.#{$color}-bg {background-color: $color;} .#{$color}-bg {background-color: $color;}
@ -124,7 +124,7 @@ The solution requires using the $color variable twice: once for the class name a
### Map Data type ### Map Data type
```html ```html
<style type='text/sass'> <style type='text/scss'>
$colors: (color1: blue, color2: black, color3: red); $colors: (color1: blue, color2: black, color3: red);

6
curriculum/challenges/english/03-front-end-libraries/sass/use-for-to-create-a-sass-loop.english.md
View File

@ -72,7 +72,7 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
@ -95,7 +95,7 @@ tests:
<section id='solution'> <section id='solution'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
@for $i from 1 through 5 { @for $i from 1 through 5 {
.text-#{$i} { font-size: 15px * $i; } .text-#{$i} { font-size: 15px * $i; }
@ -111,7 +111,7 @@ tests:
``` ```
```html ```html
<style type='text/sass'> <style type='text/scss'>
@for $i from 1 to 6 { @for $i from 1 to 6 {
.text-#{$i} { font-size: 15px * $i; } .text-#{$i} { font-size: 15px * $i; }

4
curriculum/challenges/english/03-front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.english.md
View File

@ -77,7 +77,7 @@ tests:
<div id='html-seed'> <div id='html-seed'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
@ -102,7 +102,7 @@ tests:
<section id='solution'> <section id='solution'>
```html ```html
<style type='text/sass'> <style type='text/scss'>
@mixin border-stroke($val) { @mixin border-stroke($val) {
@if $val == light { @if $val == light {
border: 1px solid black; border: 1px solid black;