What does it do?
Code it
Find the Error
What does the SCSS selector DO?
Miscellaneous
100
What does the following code do?
(Assume that the p tag is already made in HTML)
$myrandomcolor: magenta;
p {
color: $myrandomcolor;
}
Makes all paragraph tags have the color magenta
100
Make a variable to express a color (green) that can be used many times on a website.
Then assign it to a premade p tag.
$coolcolor: green;
p {
color: $coolcolor;
}
100
Find the error in the code below (1):
/*makes all h1 the color turquoise*/
#h1 {
color: turquoise;
}
There is no need for a hashtag before the h1 tag. You can leave it as the tag name itself when declaring it in the code.
100
Misleading Question, Can you perform operations (math) in SCSS?
Yes, you can! In both SCSS and CSS, operators are really useful
100
What does SCSS stand for?
Sassy Cascading Style Sheets
200
$mycolors: (
primary: #f0f0f0;
accent: #84bef0;
);
h1 {
color: map-get($mycolors, primary);
}
p {
color: map-get($mycolors, accent);
}
Assign the primary color to the h1 selector using and the accent color to the p selector using map-get.
200
Make a variable called random color that sets one color for all paragraphs and all h1 tags.
$randomcolor: magenta;
h1 {
color: $randomcolor;
}
p {
color: $randomcolor;
}
200
Find the errors in the code below (2):
%randomcolor: red;
h1 {
randomcolor;
}
There are two errors in the code:
1) The % should be a $.
2) When declaring the randomcolor variable in the h1, there should be a $ before the variable name.
200
What does @extend do?
@extend allows you to take the properties of one element and add it to another selector. If you have two elements that are in the same SCSS file, then you can use @extend to share the styling of one element to another. This function allows other elements to inherit properties of one element.
200
What is a CSS preprocessor?
A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are many CSS preprocessors, such as SASS, which make the CSS structure more readable and easier to maintain. Also, these preprocessors include added functionality which can be very helpful in many instances.
300
p {
color: blue;
background-color: green;
font-size: 30px;
}
h1 {
@extend p;
font-family: helvetica;
}
Extend the properties of the paragraph selector to the h1 selector.
300
Make a map called "mycolor" with a primary and accent color.
primary "green" and accent "blue"
$mycolor: (
primary: green,
accent: blue
);
300
Find the errors in the code below (3):
&mixed width{
#width: 50px;
}
.box {
&include width;
}
Errors (3)
1) It should be @mixin instead of &mixed.
2) Instead of the "#" in property, it should be a "$".
3) &include should be @include
300
What does @function do?
@function can allow you to create a function(kind of like in javascript) and call it anywhere in your website
300
What are key value pairs mainly used for in SCSS?
They are mainly used for maps (map-get) and keys.
400
@function double($size){
@return $size*2;
}
h1{
font-size: double(12);
}
The function double multiplies the font-size of 12 by 2.
400
Nest a ul selector inside a p selector inside a nav selector.
nav{
p{
ul{
}
}
}
400
Find the errors in the code below when importing a partial (2):
@import _test;
1. Should not be _test, instead should just be test
2. Need quotes around the name "test"
400
What does @mixin do?
In order to call the mixin to use the block of code inside of it what do you use
@mixin allows you to create a block of code you can reuse anywhere in your file
Use @include
400
Does SCSS Nesting have any particular benefit? If yes, what?
Yes, allows you to organize your code and can allow you to do stuff that you couldn't have done with CSS, such as making only the paragraph tags inside of a div the color red.
500
@mixin par-text {
color: white;
background-color: blue;
font-family: "poppins";
margin: 50px;
padding: 10px;
}
p.text {
@include par-text;
border:5px solid black;
}
Include the mixin of par-text in the text class of paragraph tag.
500
Create a function that adds 5 to the margin measurement for paragraph selectors.
@function margin5($init) {
@return $init + 5;
}
p {
margin: margin5(15);
}
500
Find the errors in the code (3):
@function double $num {
return: $num*2;
1. Should be parenthesis around $num since it is the parameter
2. Should be @return instead of return:
3. Missing closing brace
500
What does @include do?
@include - adds a mixin and all of its properties to another selector
500
What is @import used for?
IT is used to add partials to your main SCSS file