Mixins and the & Selector

Learn how to use mixins and the & selector to create an interactive index card that flips when you hover.

Start[missing "en.views.course_landing_page.learn-sass.course_illustration" translation]
Mixins and the & Selector
Lesson 1 of 1
  1. 1

    In the next set of exercises, you'll use new Sass concepts to fix and add styles the notecard on the right so that it flips when you hover over it! Recall that, in CSS, a pseudo-element is used t...

  2. 2

    In 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....

  3. 3

    Mixins 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 [...] in this example: [...] In fact...

  4. 4

    Mixin 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...

  5. 5

    In 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 [...] statement. 3. When va...

  6. 6

    Sass 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. [...] ...

  7. 7

    In 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...

  8. 8

    Great 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 wor...

  9. 9

    This lesson has introduced you to some of the most powerful concepts Sass has to offer! Mixins* are a powerful tool that allow you to keep your code DRY. Their ability to take in arguments, as...

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo

Mixins and the & Selector

Start[missing "en.views.course_landing_page.learn-sass.course_illustration" translation]