--- id: 587d7fa5367417b2b2512bbd title: Extend One Set of CSS Styles to Another Element challengeType: 0 forumTopicId: 301456 dashedName: extend-one-set-of-css-styles-to-another-element --- # --description-- Sass has a feature called `extend` 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 `.panel` class. It has a `background-color`, `height` and `border`. ```scss .panel{ background-color: red; height: 70px; border: 2px solid green; } ``` Now you want another panel called `.big-panel`. It has the same base properties as `.panel`, but also needs a `width` and `font-size`. It's possible to copy and paste the initial CSS rules from `.panel`, but the code becomes repetitive as you add more types of panels. The `extend` directive is a simple way to reuse the rules written for one element, then add more for another: ```scss .big-panel{ @extend .panel; width: 150px; font-size: 2em; } ``` The `.big-panel` will have the same properties as `.panel` in addition to the new styles. # --instructions-- Make a class `.info-important` that extends `.info` and also has a `background-color` set to magenta. # --hints-- Your `info-important` class should have a `background-color` set to `magenta`. ```js assert( code.match( /\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi ) ); ``` Your `info-important` class should use `@extend` to inherit the styling from the `info` class. ```js assert( code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi) ); ``` # --seed-- ## --seed-contents-- ```html
This is an important post. It should extend the class ".info" and have its own CSS styles.
This is a simple post. It has basic styling and can be extended for other uses.
This is an important post. It should extend the class ".info" and have its own CSS styles.
This is a simple post. It has basic styling and can be extended for other uses.