Variables, Mixins, and Extending Selectors

Question 1

@extend directive

Answer 1

@extend allows you to extend the attributes from one class or id onto another selector

Question 2

When to use mixins vs. extends

Answer 2

mixins = arguments and advanced logic

extends = simple atributes

Question 3

Assign your own variable called “lime” and give it a value of #090.

Use the “lime” variable to set the color of every link/anchor tag on the site.

Set another variable called sidebar_width - its value should be 100px.

Set the width of the class .inner_sidebar to be half that of the sidebar_width variable.

Answer 3

$lime: #090;
$sidebar_width: 100px;

a {
color: $lime;
}

.inner_sidebar {
width: $sidebar_width / 2;
}

Question 4

Define a mixin called “button” that sets the background to be #369 and the color to be white.

Underneath your mixin definition, specify that all (a) tags should include the mixin.

Answer 4

@mixin button {
background: #369;
color: white;
}

a {
@include button;
}

Question 5

Write a new definition for the “button” mixin, which takes two arguments: $color and $size. The background should be set using the value in the $color variable, and the width should be set using the $size variable. The height should be half of the value in the $size variable.

Use the mixin on a class called .menu_button. Set the background color to be #369 and the size to be 50px.

Answer 5

@mixin button($color, $size) {
background: $color;
width: $size;
height: $size / 2;
}

.menu_button {
@include button(#369, 50px)
}

Question 6

Style the class .animals to have a background of #369. Use “extend” to apply those styles to a new class, .dogs.

Style a placeholder called “super_link”. Make the font-weight bold and the color red.

Now style a new class, .message_box. Nested inside, make sure all (a) tags within this class extend the “super_link” placeholder.

Answer 6

%super_link {
font-weight: bold;
color: red;
}

.animals {
background: #369;
}

.dogs {
@extend .animals;
}

.message_box {
a {
@extend %super_link;
}
}