Skip to content

Instantly share code, notes, and snippets.

@intersim
Last active June 4, 2022 05:20
Show Gist options
  • Save intersim/892601df6835805ea26ea6e36d3b0db8 to your computer and use it in GitHub Desktop.
Save intersim/892601df6835805ea26ea6e36d3b0db8 to your computer and use it in GitHub Desktop.
/*
Here are some short exercises to give you extra practice writing SCSS, and especially with refactoring regular CSS into SCSS.
You can double-check your SCSS by plugging it into Sassmeister, and see if the compiled CSS matches the starting point code:
http://www.sassmeister.com/
The Sass documentation is a great resource and can be found here: http://sass-lang.com/documentation/
*/
/*
Example - Write the following CSS using nested rules:
*/
a {
text-decoration: none;
}
a::hover {
text-decoration: underline;
}
/*
Solution:
*/
a {
text-decoration: none;
&::hover {
text-decoration: underline;
}
}
/*
Now it's your turn!
Write the following CSS using an SCSS mixin:
*/
.box-square {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
}
.box-rounded {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
/*
Write the following rules using SCSS's nesting syntax:
*/
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
/*
Write the following CSS using the SCSS "extends" keyword:
*/
.success {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: green;
}
.error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: red;
}
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
border-color: yellow;
}
/*
Write the following CSS using an SCSS "each" directive and a "map" (similar to an object in JS)
*/
h1 {
color: darkorange;
}
h2 {
color: royalblue;
}
h3 {
color: springgreen;
}
/*
Write the following CSS using the SCSS "extends" keyword and variables representing the color values:
*/
a.twitter {
min-width: 100px;
padding: 1em;
border-radius: 1em;
background: #55acee;
color: #fff;
}
span.facebook {
min-width: 100px;
padding: 1em;
border-radius: 1em;
background: #3b5998;
color: #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment