Skip to content

Commit d1134aa

Browse files
irfanzainudinirfanzainudin
committed
Issue freeCodeCamp#50155: Rewrite of Create Reusable CSS with Mixins module
1 parent c075247 commit d1134aa

File tree

1 file changed

+125
-54
lines changed

1 file changed

+125
-54
lines changed

‎curriculum/challenges/english/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md

Lines changed: 125 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -10,83 +10,138 @@ dashedName: create-reusable-css-with-mixins
1010

1111
In Sass, a <dfn>mixin</dfn> is a group of CSS declarations that can be reused throughout the style sheet.
1212

13-
Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider `box-shadow`:
13+
Here is an example: Say you want to define individual styles for some headings.
1414

15-
```scss
16-
div {
17-
-webkit-box-shadow: 0px 0px 4px #fff;
18-
-moz-box-shadow: 0px 0px 4px #fff;
19-
-ms-box-shadow: 0px 0px 4px #fff;
20-
box-shadow: 0px 0px 4px #fff;
15+
```html
16+
<style type='text/scss'>
17+
h1 {
18+
margin: 10px;
19+
padding: 20px;
20+
color: red;
2121
}
22+
23+
#another-heading {
24+
margin: 20px;
25+
padding: 40px;
26+
color: blue;
27+
}
28+
29+
.yet-another-heading {
30+
margin: 10px;
31+
padding: 30px;
32+
color: orange;
33+
}
34+
</style>
35+
36+
<h1>Title</h1>
37+
<h2 id="another-heading">
38+
Another heading
39+
</h2>
40+
<h3 class="yet-another-heading">
41+
Yet Another Heading
42+
</h3>
2243
```
2344

24-
It's a lot of typing to re-write this rule for all the elements that have a `box-shadow`, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one:
45+
It's a lot of typing to re-write the rules for all the elements, or to change each value to test different effects. Mixins are like functions for CSS. Here is how to write one:
2546

2647
```scss
27-
@mixin box-shadow($x, $y, $blur, $c){
28-
-webkit-box-shadow: $x $y $blur $c;
29-
-moz-box-shadow: $x $y $blur $c;
30-
-ms-box-shadow: $x $y $blur $c;
31-
box-shadow: $x $y $blur $c;
48+
@mixin heading-style($h-margin, $h-padding, $h-color){
49+
margin: $h-margin;
50+
padding: $h-padding;
51+
color: $h-color;
3252
}
3353
```
3454

35-
The definition starts with `@mixin` followed by a custom name. The parameters (the `$x`, `$y`, `$blur`, and `$c` in the example above) are optional. Now any time a `box-shadow` rule is needed, only a single line calling the mixin replaces having to type all the vendor prefixes. A mixin is called with the `@include` directive:
55+
We can now re-write the HTML code above like this:
56+
57+
```html
58+
<style type='text/scss'>
59+
@mixin heading-style($h-margin, $h-padding, $h-color){
60+
margin: $h-margin;
61+
padding: $h-padding;
62+
color: $h-color;
63+
}
64+
65+
h1 {
66+
@include heading-style(10px, 20px, red);
67+
}
68+
69+
#another-heading {
70+
@include heading-style(20px, 40px, blue);
71+
}
72+
73+
.yet-another-heading {
74+
@include heading-style(10px, 30px, orange);
75+
}
76+
</style>
77+
78+
<h1>Title</h1>
79+
<h2 id="another-heading">
80+
Another heading
81+
</h2>
82+
<h3 class="yet-another-heading">
83+
Yet Another Heading
84+
</h3>
85+
```
86+
87+
The definition starts with `@mixin` followed by a custom name. A mixin’s name can be any custom name as long as it doesn’t begin with --. The parameters (the `$h-margin`, `$h-padding`, and `$h-color` in the example above) are optional. Now any time you want to define individual styles for some headings, only a single line calling the mixin replaces having to type all the individual style codes. A mixin is called with the `@include` directive:
3688
3789
```scss
38-
div {
39-
@include box-shadow(0px, 0px, 4px, #fff);
90+
h1 {
91+
@include heading-style(10px, 20px, red);
4092
}
4193
```
4294
4395
# --instructions--
4496
45-
Write a mixin for `border-radius` and give it a `$radius` parameter. It should use all the vendor prefixes from the example. Then use the `border-radius` mixin to give the `#awesome` element a border radius of `15px`.
97+
Write a mixin named `shape` and give it 3 parameters: `$w`, `$h`, and `$b-color`. Then use the `shape` mixin to give the `#square` element a width and height of `50px`, and the color `red`. For the `#rect-a` element a width of `100px`, a height of `50px`, and the color `blue`. Finally, for the `#rect-b` element a width of `50px`, a height of `100px`, and the color `orange`.
4698
4799
# --hints--
48100
49-
Your code should declare a mixin named `border-radius` which has a parameter named `$radius`.
101+
Your code should declare a mixin named `shape` which has 3 parameters: `$w`, `$h`, and `$b-color`.
50102
51103
```js
52-
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
104+
assert(code.match(/@mixin\s+?shape\s*?\(\s*?\$w,\s*?\$h,\s*?$b-color\s*?\)\s*?{/gi));
53105
```
54106
55-
Your code should include the `-webkit-border-radius` vendor prefix that uses the `$radius` parameter.
107+
Your code should include the `width` rule that uses the `$w` parameter.
56108
57109
```js
58110
assert(
59-
__helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
111+
__helpers.removeWhiteSpace(code).match(/width:\$w;/gi)
60112
);
61113
```
62114
63-
Your code should include the `-moz-border-radius` vendor prefix that uses the `$radius` parameter.
115+
Your code should include the `height` rule that uses the `$h` parameter.
64116
65117
```js
66118
assert(
67-
__helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
119+
__helpers.removeWhiteSpace(code).match(/height:\$h;/gi)
68120
);
69121
```
70122
71-
Your code should include the `-ms-border-radius` vendor prefix that uses the `$radius` parameter.
123+
Your code should include the `background-color` rule that uses the `$b-color` parameter.
72124
73125
```js
74-
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
126+
assert(__helpers.removeWhiteSpace(code).match(/background-color:\$b-color;/gi));
75127
```
76128
77-
Your code should include the general `border-radius` rule that uses the `$radius` parameter.
129+
Your code should call the `shape` mixin using the `@include` keyword for the `#square` element, setting it to a width and height of `50px`, and the color `red`.
78130
79131
```js
80-
assert(
81-
__helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
82-
4
83-
);
132+
assert(code.match(/@include\s+?shape\(\s*?50px,\s*?50px,\s*?red\s*?\)\s*;/gi));
133+
```
134+
135+
Your code should call the `shape` mixin using the `@include` keyword for the `#rect-a` element, setting it to a width of `100px`, a height of `50px`, and the color `blue`.
136+
137+
```js
138+
assert(code.match(/@include\s+?shape\(\s*?100px,\s*?50px,\s*?blue\s*?\)\s*;/gi));
84139
```
85140
86-
Your code should call the `border-radius mixin` using the `@include` keyword, setting it to `15px`.
141+
Your code should call the `shape` mixin using the `@include` keyword for the `#rect-b` element, setting it to a width of `50px`, a height of `100px`, and the color `orange`.
87142
88143
```js
89-
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
144+
assert(code.match(/@include\s+?shape\(\s*?50px,\s*?100px,\s*?orange\s*?\)\s*;/gi));
90145
```
91146
92147
# --seed--
@@ -95,38 +150,54 @@ assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
95150
96151
```html
97152
<style type='text/scss'>
153+
#square {
154+
width: 50px;
155+
height: 50px;
156+
background-color: red;
157+
}
98158
159+
#rect-a {
160+
width: 100px;
161+
height: 50px;
162+
background-color: blue;
163+
}
99164
100-
101-
#awesome {
102-
width: 150px;
103-
height: 150px;
104-
background-color: green;
105-
106-
}
165+
#rect-b {
166+
width: 50px;
167+
height: 100px;
168+
background-color: orange;
169+
}
107170
</style>
108171
109-
<div id="awesome"></div>
172+
<div id="square"></div>
173+
<div id="rect-a"></div>
174+
<div id="rect-b"></div>
110175
```
111176
112177
# --solutions--
113178
114179
```html
115180
<style type='text/scss'>
116-
@mixin border-radius($radius) {
117-
-webkit-border-radius: $radius;
118-
-moz-border-radius: $radius;
119-
-ms-border-radius: $radius;
120-
border-radius: $radius;
121-
}
122-
123-
#awesome {
124-
width: 150px;
125-
height: 150px;
126-
background-color: green;
127-
@include border-radius(15px);
128-
}
181+
@mixin shape($w, $h, $b-color) {
182+
width: $w;
183+
height: $h;
184+
background-color: $b-color;
185+
}
186+
187+
#square {
188+
@include shape(50px, 50px, red);
189+
}
190+
191+
#rect-a {
192+
@include shape(100px, 50px, blue);
193+
}
194+
195+
#rect-b {
196+
@include shape(50px, 100px, orange);
197+
}
129198
</style>
130199
131-
<div id="awesome"></div>
200+
<div id="square"></div>
201+
<div id="rect-a"></div>
202+
<div id="rect-b"></div>
132203
```

0 commit comments

Comments
 (0)