Mixins and the & Selector
Learn how to use mixins and the & selector to create an interactive index card that flips when you hover.
Start
Mixins and the & Selector
Lesson 1 of 1
- 1In the next set of exercises, you’ll use new Sass concepts to fix and add styles to the notecard on the right so that it flips when you hover over it! Recall that, in CSS, a pseudo-element is use…
- 2In addition to variables and nesting, Sass has multiple constructs that reduce repetition. In Sass, a mixin lets you make groups of CSS declarations that you want to reuse throughout your site….
- 3Mixins also have the ability to take in a value. An argument, or parameter, is a value passed to the mixin that will be used inside the mixin, such as $visibility in this example: @mixin backf…
- 4Mixin arguments can be assigned a default value in the mixin definition by using a special notation. A default value is assigned to the argument if no value is passed in when the mixin is includ…
- 5In general, here are 5 important facts about arguments and mixins: 1. Mixins can take multiple arguments. 2. Sass allows you to explicitly define each argument in your @include statement. 3. When v…
- 6Sass allows you to pass in multiple arguments in a list or a map format. For example, take the multiple properties needed to create the college-ruled stripes in the back of our notecard. @mixin …
- 7In Sass, string interpolation is the process of placing a variable string in the middle of two other strings. In a mixin context, interpolation is handy when you want to make use of variables…
- 8Great job! You’ve accomplished some fancy styling with mixins. Now it’s time to tie in how the & selector plays into mixins. Sass allows & selector usage inside of mixins. The flow works much like…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory