1.myclass {
2 font-weight: bold;
3 font-size: 90px;
4}
5
6.myotherclass {
7 @extend .myclass;
8 color: #000000;
9}
1.error:hover {
2 background-color: #fee;
3}
4
5.error--serious {
6 @extend .error;
7 border-width: 3px;
8}
1%blue-hr {
2 content: '';
3 position: absolute;
4 height: 1px;
5 max-width: 1550px;
6 width: calc(100% - 1.5rem);
7 left: 0;
8 right: 0;
9 margin: 0 auto;
10 background-color: #0086FF;
11}
12
13.blue-hr-top {
14 position: relative;
15
16 &::before {
17 @extend %blue-hr;
18 top: 0;
19 }
20}
1SCSS Syntax
2
3.button-basic {
4 border: none;
5 padding: 15px 30px;
6 text-align: center;
7 font-size: 16px;
8 cursor: pointer;
9}
10
11.button-report {
12 @extend .button-basic;
13 background-color: red;
14}
15
16.button-submit {
17 @extend .button-basic;
18 background-color: green;
19 color: white;
20}
21
22CSS Output
23
24.button-basic, .button-report, .button-submit {
25 border: none;
26 padding: 15px 30px;
27 text-align: center;
28 font-size: 16px;
29 cursor: pointer;
30}
31
32.button-report {
33 background-color: red;
34}
35
36.button-submit {
37 background-color: green;
38 color: white;
39}