481 lines
29 KiB
JSON
481 lines
29 KiB
JSON
{
|
|
"name": "Sass",
|
|
"order": 4,
|
|
"time": "5 hours",
|
|
"helpRoom": "Help",
|
|
"challenges": [
|
|
{
|
|
"id": "587d7dbd367417b2b2512bb3",
|
|
"title": "Introduction to the Sass Challenges",
|
|
"description": [
|
|
[
|
|
"",
|
|
"",
|
|
"Sass, or \"Syntactically Awesome StyleSheets\", is a language extension of CSS. It adds features that aren't available using basic CSS syntax. Sass makes it easier for developers to simplify and maintain the style sheets for their projects.<br><br>Sass can extend the CSS language because it is a preprocessor. It takes code written using Sass syntax, and converts it into basic CSS. This allows you to create variables, nest CSS rules into others, and import other Sass files, among other things. The result is more compact, easier to read code.<br><br>There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout these challenges, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. Files using this syntax have the .scss extension.<br><br>The second and older syntax, known as the indented syntax (or sometimes just \"Sass\"), uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.<br><br>This section introduces the basic features of Sass.",
|
|
""
|
|
]
|
|
],
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeSeed": [],
|
|
"tests": [],
|
|
"type": "waypoint",
|
|
"challengeType": 7,
|
|
"isRequired": false,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.",
|
|
"In JavaScript, variables are defined using the <code>let</code> and <code>const</code> keywords. In Sass, variables start with a <code>$</code> followed by the variable name.",
|
|
"Here are a couple examples:",
|
|
"<blockquote>$main-fonts: Arial, sans-serif;<br>$headings-color: green;<br><br>//To use variables:<br>h1 {<br> font-family: $main-fonts;<br> color: $headings-color;<br>}</blockquote>",
|
|
"One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.",
|
|
"<hr>",
|
|
"Create a variable <code>$text-color</code> and set it to red. Then change the value of the <code>color</code> property for the <code>.blog-post</code> and <code>h2</code> to the <code>$text-color</code> variable."
|
|
],
|
|
"challengeSeed": [
|
|
"<style type='text/sass'>",
|
|
" ",
|
|
" ",
|
|
" .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>"
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/\\$text-color:\\s*?red;/g), 'message: Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.');",
|
|
"assert(code.match(/color:\\s*?\\$text-color;/g), 'message: Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.');",
|
|
"assert($('.blog-post').css('color') == 'rgb(255, 0, 0)', 'message: Your <code>.blog-post</code> element should have a </code>color</code> of red.');",
|
|
"assert($('h2').css('color') == 'rgb(255, 0, 0)', 'message: Your <code>h2</code> elements should have a </code>color</code> of red.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"Sass allows <code>nesting</code> of CSS rules, which is a useful way of organizing a style sheet.",
|
|
"Normally, each element is targeted on a different line to style it, like so:",
|
|
"<blockquote>nav {<br> background-color: red;<br>}<br><br>nav ul {<br> list-style: none;<br>}<br><br>nav ul li {<br> display: inline-block;<br>}</blockquote>",
|
|
"For a large project, the CSS file will have many lines and rules. This is where <code>nesting</code> can help organize your code by placing child style rules within the respective parent elements:",
|
|
"<blockquote>nav {<br> background-color: red;<br><br> ul {<br> list-style: none;<br><br> li {<br> display: inline-block;<br> }<br> }<br>}<br></blockquote>",
|
|
"<hr>",
|
|
"Use the <code>nesting</code> technique shown above to re-organize the CSS rules for both children of <code>.blog-post</code> element. For testing purposes, the <code>h1</code> should come before the <code>p</code> element."
|
|
],
|
|
"challengeSeed": [
|
|
"<style type='text/sass'>",
|
|
" .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>"
|
|
],
|
|
"tests": [
|
|
"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), 'message: Your code should re-organize the CSS rules so the <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> parent element.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"In Sass, a <code>mixin</code> is a group of CSS declarations that can be reused throughout the style sheet.",
|
|
"Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider \"box-shadow\":",
|
|
"<blockquote>div {<br> -webkit-box-shadow: 0px 0px 4px #fff;<br> -moz-box-shadow: 0px 0px 4px #fff;<br> -ms-box-shadow: 0px 0px 4px #fff;<br> box-shadow: 0px 0px 4px #fff;<br>}</blockquote>",
|
|
"It's a lot of typing to re-write this rule for all the elements that have a <code>box-shadow</code>, or to change each value to test different effects.",
|
|
"<code>Mixins</code> are like functions for CSS. Here is how to write one:",
|
|
"<blockquote>@mixin box-shadow($x, $y, $blur, $c){ <br> -webkit-box-shadow: $x, $y, $blur, $c;<br> -moz-box-shadow: $x, $y, $blur, $c;<br> -ms-box-shadow: $x, $y, $blur, $c;<br> box-shadow: $x, $y, $blur, $c;<br>}</blockquote>",
|
|
"The definition starts with <code>@mixin</code> followed by a custom name. The parameters (the <code>$x</code>, <code>$y</code>, <code>$blur</code>, and <code>$c</code> in the example above) are optional.",
|
|
"Now any time a <code>box-shadow</code> rule is needed, only a single line calling the <code>mixin</code> replaces having to type all the vendor prefixes. A <code>mixin</code> is called with the <code>@include</code> directive:",
|
|
"<blockquote>div {<br> @include box-shadow(0px, 0px, 4px, #fff);<br>}</blockquote>",
|
|
"<hr>",
|
|
"Write a <code>mixin</code> for <code>border-radius</code> and give it a <code>$radius</code> parameter. It should use all the vendor prefixes from the example. Then use the <code>border-radius</code> <code>mixin</code> to give the <code>#awesome</code> element a border radius of 15px."
|
|
],
|
|
"challengeSeed": [
|
|
"<style type='text/sass'>",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" #awesome {",
|
|
" width: 150px;",
|
|
" height: 150px;",
|
|
" background-color: green;",
|
|
" ",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div id=\"awesome\"></div>",
|
|
" "
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/@mixin\\s+?border-radius\\(\\s*?\\$radius\\s*?\\)\\s*?{/gi), 'message: Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.');",
|
|
"assert(code.match(/-webkit-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
|
"assert(code.match(/-moz-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
|
"assert(code.match(/-ms-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
|
|
"assert(code.match(/border-radius:\\s*?\\$radius;/gi).length == 4, 'message: Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.');",
|
|
"assert(code.match(/@include\\s+?border-radius\\(\\s*?15px\\s*?\\);/gi), 'message: Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"The <code>@if</code> directive in Sass is useful to test for a specific case - it works just like the <code>if</code> statement in JavaScript</code>.",
|
|
"<blockquote>@mixin make-bold($bool) {<br> @if $bool == true {<br> font-weight: bold;<br> }<br>}</blockquote>",
|
|
"And just like in JavaScript, <code>@else if</code> and <code>@else</code> test for more conditions:",
|
|
"<blockquote>@mixin text-effect($val) {<br> @if $val == danger {<br> color: red;<br> }<br> @else if $val == alert {<br> color: yellow;<br> }<br> @else if $val == success {<br> color: green;<br> }<br> @else {<br> color: black;<br> }<br>}</blockquote>",
|
|
"<hr>",
|
|
"Create a <code>mixin</code> called <code>border-stroke</code> that takes a parameter <code>$val</code>. The <code>mixin</code> should check for the following conditions using <code>@if</code>, <code>@else if</code>, and <code>@else</code>:",
|
|
"<blockquote>light - 1px solid black<br>medium - 3px solid black<br>heavy - 6px solid black<br>none - no border</blockquote>"
|
|
],
|
|
"challengeSeed": [
|
|
"<style type='text/sass'>",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" #box {",
|
|
" width: 150px;",
|
|
" height: 150px;",
|
|
" background-color: red;",
|
|
" @include border-stroke(medium);",
|
|
" } ",
|
|
"</style>",
|
|
"",
|
|
"<div id=\"box\"></div>"
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/@mixin\\s+?border-stroke\\s*?\\(\\s*?\\$val\\s*?\\)\\s*?{/gi), 'message: Your code should declare a <code>mixin</code> named <code>border-stroke</code> which has a parameter named <code>$val</code>.');",
|
|
"assert(code.match(/@if\\s+?\\$val\\s*?===?\\s*?light\\s*?{\\s*?border\\s*?:\\s*?1px\\s+?solid\\s+?black\\s*?;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@if</code> statement to check if <code>$val</code> is light, and to set the <code>border</code> to 1px solid black.');",
|
|
"assert(code.match(/@else\\s+?if\\s+?\\$val\\s*?===?\\s*?medium\\s*?{\\s*?border\\s*?:\\s*?3px\\s+?solid\\s+?black\\s*?;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is medium, and to set the <code>border</code> to 3px solid black.');",
|
|
"assert(code.match(/@else\\s+?if\\s+?\\$val\\s*?===?\\s*?heavy\\s*?{\\s*?border\\s*?:\\s*?6px\\s+?solid\\s+?black\\s*?;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is heavy, and to set the <code>border</code> to 6px solid black.');",
|
|
"assert(code.match(/@else\\s*?{\\s*?border\\s*?:\\s*?none\\s*?;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else</code> statement to set the <code>border</code> to none.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"The <code>@for</code> directive adds styles in a loop, very similar to a <code>for</code> loop in JavaScript.",
|
|
"<code>@for</code> is used in two ways: \"start through end\" or \"start to end\". The main difference is that \"start to end\" <em>excludes</em> the end number, and \"start through end\" <em>includes</em> the end number.",
|
|
"Here's a start <b>through</b> end example:",
|
|
"<blockquote>@for $i from 1 through 12 {<br> .col-#{$i} { width: 100%/12 * $i; }<br>}</blockquote>",
|
|
"The <code>#{$i}</code> part is the syntax to combine a variable (<code>i</code>) with text to make a string. When the Sass file is converted to CSS, it looks like this:",
|
|
"<blockquote>.col-1 {<br> width: 8.33333%;<br>}<br><br>.col-2 {<br> width: 16.66667%;<br>}<br><br>...<br><br>.col-12 {<br> width: 100%;<br>}</blockquote>",
|
|
"This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.",
|
|
"<hr>",
|
|
"Write a <code>@for</code> directive that takes a variable <code>$j</code> that goes from 1 <b>to</b> 6.",
|
|
"It should create 5 classes called <code>.text-1</code> to <code>.text-5</code> where each has a <code>font-size</code> set to 10px multiplied by the index."
|
|
],
|
|
"challengeSeed": [
|
|
"<style type='text/sass'>",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
"</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>"
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/@for /g), 'message: Your code should use the <code>@for</code> directive.');",
|
|
"assert($('.text-1').css('font-size') == '10px', 'message: Your <code>.text-1</code> class should have a <code>font-size</code> of 10px.');",
|
|
"assert($('.text-2').css('font-size') == '20px', 'message: Your <code>.text-2</code> class should have a <code>font-size</code> of 20px.');",
|
|
"assert($('.text-3').css('font-size') == '30px', 'message: Your <code>.text-3</code> class should have a <code>font-size</code> of 30px.');",
|
|
"assert($('.text-4').css('font-size') == '40px', 'message: Your <code>.text-4</code> class should have a <code>font-size</code> of 40px.');",
|
|
"assert($('.text-5').css('font-size') == '50px', 'message: Your <code>.text-5</code> class should have a <code>font-size</code> of 50px.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"The last challenge showed how the <code>@for</code> directive uses a starting and ending value to loop a certain number of times. Sass also offers the <code>@each</code> directive which loops over each item in a list or map.",
|
|
"On each iteration, the variable gets assigned to the current value from the list or map.",
|
|
"<blockquote>@each $color in blue, red, green {<br> .#{$color}-text {color: $color;}<br>}</blockquote>",
|
|
"A map has slightly different syntax. Here's an example:",
|
|
"<blockquote>$colors: (color1: blue, color2: red, color3: green);<br><br>@each $key, $color in $colors {<br> .#{$color}-text {color: $color;}<br>}</blockquote>",
|
|
"Note that the <code>$key</code> variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have <code>color1</code>, <code>color2</code>... in it.",
|
|
"Both of the above code examples are converted into the following CSS:",
|
|
"<blockquote>.blue-text {<br> color: blue;<br>}<br><br>.red-text {<br> color: red;<br>}<br><br>.green-text {<br> color: green;<br>}</blockquote>",
|
|
"<hr>",
|
|
"Write an <code>@each</code> directive that goes through a list: <code>blue, black, red</code> and assigns each variable to a <code>.color-bg</code> class, where the \"color\" part changes for each item.",
|
|
"Each class should set the <code>background-color</code> the respective color."
|
|
],
|
|
"challengeSeed": [
|
|
"<style type='text/sass'>",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" div {",
|
|
" height: 200px;",
|
|
" width: 200px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<div class=\"blue-bg\"></div>",
|
|
"<div class=\"black-bg\"></div>",
|
|
"<div class=\"red-bg\"></div>"
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/@each /g), 'message: Your code should use the <code>@each</code> directive.');",
|
|
"assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'message: Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.');",
|
|
"assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)', 'message: Your <code>.black-bg</code> class should have a <code>background-color</code> of black.');",
|
|
"assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)', 'message: Your <code>.red-bg</code> class should have a <code>background-color</code> of red.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"The <code>@while</code> directive is an option with similar functionality to the JavaScript <code>while</code> loop. It creates CSS rules until a condition is met.",
|
|
"The <code>@for</code> challenge gave an example to create a simple grid system. This can also work with <code>@while</code>.",
|
|
"<blockquote>$x: 1;<br>@while $x < 13 {<br> .col-#{$x} { width: 100%/12 * $x;}<br> $x: $x + 1;<br>}</blockquote>",
|
|
"First, define a variable <code>$x</code> and set it to 1. Next, use the <code>@while</code> directive to create the grid system <i>while</i> <code>$x</code> is less than 13.",
|
|
"After setting the CSS rule for <code>width</code>, <code>$x</code> is incremented by 1 to avoid an infinite loop.",
|
|
"<hr>",
|
|
"Use <code>@while</code> to create a series of classes with different <code>font-sizes</code>.",
|
|
"There should be 10 different classes from <code>text-1</code> to <code>text-10</code>. Then set <code>font-size</code> to 5px multiplied by the current index number. Make sure to avoid an infinite loop!"
|
|
],
|
|
"challengeSeed": [
|
|
"<style type='text/sass'>",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
"</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>",
|
|
"<p class=\"text-6\">Hello</p>",
|
|
"<p class=\"text-7\">Hello</p>",
|
|
"<p class=\"text-8\">Hello</p>",
|
|
"<p class=\"text-9\">Hello</p>",
|
|
"<p class=\"text-10\">Hello</p>"
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/@while /g), 'message: Your code should use the <code>@while</code> directive.');",
|
|
"assert(code.match(/\\$.*:\\s*?1;/gi), 'message: Your code should set an index variable to 1 to start.');",
|
|
"assert(code.match(/\\$(.*):\\s*?\\$\\1\\s*?\\+\\s*?1;/gi), 'message: Your code should increment the counter variable.');",
|
|
"assert($('.text-1').css('font-size') == '5px', 'message: Your <code>.text-1</code> class should have a <code>font-size</code> of 5px.');",
|
|
"assert($('.text-2').css('font-size') == '10px', 'message: Your <code>.text-2</code> class should have a <code>font-size</code> of 10px.');",
|
|
"assert($('.text-3').css('font-size') == '15px', 'message: Your <code>.text-3</code> class should have a <code>font-size</code> of 15px.');",
|
|
"assert($('.text-4').css('font-size') == '20px', 'message: Your <code>.text-4</code> class should have a <code>font-size</code> of 20px.');",
|
|
"assert($('.text-5').css('font-size') == '25px', 'message: Your <code>.text-5</code> class should have a <code>font-size</code> of 25px.');",
|
|
"assert($('.text-6').css('font-size') == '30px', 'message: Your <code>.text-6</code> class should have a <code>font-size</code> of 30px.');",
|
|
"assert($('.text-7').css('font-size') == '35px', 'message: Your <code>.text-7</code> class should have a <code>font-size</code> of 35px.');",
|
|
"assert($('.text-8').css('font-size') == '40px', 'message: Your <code>.text-8</code> class should have a <code>font-size</code> of 40px.');",
|
|
"assert($('.text-9').css('font-size') == '45px', 'message: Your <code>.text-9</code> class should have a <code>font-size</code> of 45px.');",
|
|
"assert($('.text-10').css('font-size') == '50px', 'message: Your <code>.text-10</code> class should have a <code>font-size</code> of 50px.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"<code>Partials</code> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.",
|
|
"Names for <code>partials</code> start with the underscore (<code>_</code>) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the <code>.scss</code> file extension. To bring the code in the <code>partial</code> into another Sass file, use the <code>@import</code> directive.",
|
|
"For example, if all your <code>mixins</code> are saved in a <code>partial</code> named \"_mixins.scss\", and they are needed in the \"main.scss\" file, this is how to use them in the main file:",
|
|
"<blockquote>// In the main.scss file<br><br>@import 'mixins'</blockquote>",
|
|
"Note that the underscore is not needed in the <code>import</code> statement - Sass understands it is a <code>partial</code>. Once a <code>partial</code> is imported into a file, all variables, <code>mixins</code>, and other code are available to use.",
|
|
"<hr>",
|
|
"Write an <code>@import</code> statement to import a <code>partial</code> named <code>_variables.scss</code> into the main.scss file."
|
|
],
|
|
"challengeSeed": [
|
|
"// The main.scss file",
|
|
"",
|
|
"",
|
|
"",
|
|
""
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/@import\\s+?('|\")variables\\1/gi), 'message: Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
],
|
|
"description": [
|
|
"Sass has a feature called <code>extend</code> that makes it easy to borrow the CSS rules from one element and build upon them in another.",
|
|
"For example, the below block of CSS rules style a <code>.panel</code> class. It has a <code>background-color</code>, <code>height</code> and <code>border</code>.",
|
|
"<blockquote>.panel{<br> background-color: red;<br> height: 70px;<br> border: 2px solid green;<br>}</blockquote>",
|
|
"Now you want another panel called <code>.big-panel</code>. It has the same base properties as <code>.panel</code>, but also needs a <code>width</code> and <code>font-size</code>.",
|
|
"It's possible to copy and paste the initial CSS rules from <code>.panel</code>, but the code becomes repetitive as you add more types of panels.",
|
|
"The <code>extend</code> directive is a simple way to reuse the rules written for one element, then add more for another:",
|
|
"<blockquote>.big-panel{<br> @extend .panel;<br> width: 150px;<br> font-size: 2em;<br>}</blockquote>",
|
|
"The <code>.big-panel</code> will have the same properties as <code>.panel</code> in addition to the new styles.",
|
|
"<hr>",
|
|
"Make a class <code>.info-important</code> that extends <code>.info</code> and also has a <code>background-color</code> set to magenta."
|
|
],
|
|
"challengeSeed": [
|
|
"<style type='text/sass'>",
|
|
" 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>"
|
|
],
|
|
"tests": [
|
|
"assert(code.match(/@extend\\s+?\\.info/g), 'message: Your code should use the <code>@extend</code> directive to extend the <code>info</code> class.');",
|
|
"assert($('.info-important').css('background-color') == 'rgb(255, 0, 255)', 'message: Your <code>info-important</code> class should have a <code>background-color</code> set to magenta.');",
|
|
"assert($('.info-important').css('width') == '200px', 'message: Your <code>info-important</code> class should inherit the styling from the <code>info</code> class.');"
|
|
],
|
|
"solutions": [],
|
|
"hints": [],
|
|
"type": "waypoint",
|
|
"releasedOn": "Feb 17, 2017",
|
|
"challengeType": 0,
|
|
"translations": {}
|
|
}
|
|
]
|
|
} |