Skip to content

Commit 9d205e3

Browse files
author
Pickra
committed
Mixins
1 parent 49fb92e commit 9d205e3

File tree

8 files changed

+68
-7
lines changed

8 files changed

+68
-7
lines changed

‎images/bamf.jpg

11.6 KB
Loading

‎images/firestar.jpg

10 KB
Loading

‎images/nightcrawler.jpg

18.4 KB
Loading

‎images/rogue.jpg

19.8 KB
Loading

‎images/wolverine-small.gif

26.5 KB
Loading

‎index.html

+3-6
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@
55
<title>SassyEgghead</title>
66
<link rel="stylesheet" href="css/main.css">
77
</head>
8-
<body>
9-
<div class="wolverine">
10-
<img src="images/wolverine.gif">
11-
<p class="wolverine-text">Wolverine</p>
12-
</div>
13-
</body>
8+
<body>
9+
<div class="new">Where are my styles?</div>
10+
</body>
1411
</html>

‎scss/main.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@import "built-in-functions/built-in-functions";
1+
@import "extends/extends";

‎scss/mixins/_mixins.scss

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
.character {
2+
text-align: center;
3+
width: 15rem;
4+
display: inline-block;
5+
margin: 0.5rem;
6+
7+
p {
8+
font-size: 1.5rem;
9+
padding-bottom: 0.5rem;
10+
}
11+
12+
img {
13+
margin-top: 1rem;
14+
border-radius: 25%;
15+
}
16+
}
17+
18+
@mixin make-transitions($transitions...) { transition: $transitions; }
19+
20+
@mixin make-character($base-color: #a83b24, $mix-color: #fffaa6, $border: null) {
21+
$light-color: lighten($base-color, 20%);
22+
$dark-color: darken($base-color, 35%);
23+
$cbc: complement($base-color);
24+
$clc: complement($light-color);
25+
$cdc: complement($dark-color);
26+
27+
background-image: linear-gradient($light-color, $base-color, $dark-color);
28+
border: $border;
29+
30+
&:hover { background-image: linear-gradient($clc, $cbc, $cdc); }
31+
&:hover &-text { color: transparentize(mix($base-color, $mix-color, 25%), .2); }
32+
33+
&-text {
34+
color: mix($base-color, $mix-color, 75%);
35+
}
36+
37+
img { @content; }
38+
}
39+
40+
@mixin media($min-width) {
41+
@media screen and (min-width: $min-width) { @content; }
42+
}
43+
44+
.wolverine {
45+
@include make-character($border: 5px solid brown, $mix-color: pink) {
46+
@include make-transitions(margin 1s, border-radius 1s, border 1s, transform 1s);
47+
48+
&:hover {
49+
margin-top: 5rem;
50+
border-radius: 50%;
51+
border: 10px solid green;
52+
transform: rotate3d(10, 0, 0, 360deg);
53+
}
54+
};
55+
}
56+
57+
.rogue { @include make-character(#0ab36d, #FFFE8A, 5px solid green); }
58+
.firestar { @include make-character(#DB233B, #e3fd00); }
59+
60+
.nightcrawler {
61+
@include make-character(#1d6098, #ffcef9) {
62+
@include media(800px) { content: url("../images/bamf.jpg"); }
63+
};
64+
}

0 commit comments

Comments
 (0)