1494a50123
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
54 lines
679 B
Markdown
54 lines
679 B
Markdown
---
|
|
title: Nest CSS with Sass
|
|
---
|
|
# Nest CSS with Sass
|
|
|
|
---
|
|
## Problem Explanation
|
|
- In Sass, nesting CSS rules allows to define hierarchy selectors.
|
|
- You can organize your style sheets by nesting CSS rules.
|
|
|
|
**Example:**
|
|
|
|
```scss
|
|
.title{
|
|
strong{}
|
|
em{}
|
|
}
|
|
|
|
// This will be compiled into:
|
|
|
|
.title{}
|
|
.title strong{}
|
|
.title em{}
|
|
```
|
|
|
|
|
|
---
|
|
## Hints
|
|
|
|
### Hint 1
|
|
|
|
- You may want to change the position of "}" at line 4.
|
|
|
|
|
|
---
|
|
## Solutions
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
```scss
|
|
<style type='text/sass'>
|
|
.blog-post {
|
|
h1 {
|
|
text-align: center;
|
|
color: blue;
|
|
}
|
|
p {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
```
|
|
</details>
|