[SASS] Nesting From CSS to SASS

SASS, UI Design

Now we start to implement nesting codes from your css project to a new sass project.

Nesting is for your dry and clean code. NO duplicated codes and much more readable.

I will show your how to do it below examples.

1. Header Nesting

Original Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.header {
    height: 95vh;
    background-image: linear-gradient(
        to right bottom,
        rgba($color-primary-light, 0.8),
        rgba($color-primary-dark, 0.8)),
    url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;
 
    clip-path: polygon(0 0, 100% 0,100% 75vh, 0 100%);
}
 
.header__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
}
 
.header__logo {
    height: 3.5rem;
}
 
.header__text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
Colored by Color Scripter
cs

Nested Codes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.header {
    height: 95vh;
    background-image: linear-gradient(
        to right bottom,
        rgba($color-primary-light, 0.8),
        rgba($color-primary-dark, 0.8)),
    url(../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;
 
    clip-path: polygon(0 0, 100% 0,100% 75vh, 0 100%);
 
    &__logo-box {
        position: absolute;
        top: 4rem;
        left: 4rem;
}
 
    &__logo {
        height: 3.5rem;
}
    &__text-box {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
}
}
Colored by Color Scripter
cs

2. Heading Primary

Original code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.heading-primary {
     color: $color-white;
     text-transform: uppercase;
 
     backface-visibility: hidden;
     margin-bottom: 6rem;
}
 
.heading-primary--main {
    display: block;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 3.5rem;
 
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
/* 
    animation-delay: 3s; 
    animation-iteration-count: 3;
    */
}
 
.heading-primary--sub {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1.6rem;
 
    animation: moveInRight 1s ease-out;
}
Colored by Color Scripter
cs

Nesting Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.heading-primary {
     color: $color-white;
     text-transform: uppercase;
 
     backface-visibility: hidden;
     margin-bottom: 6rem;
 
     &--cmain {
        display: block;
        font-size: 6rem;
        font-weight: 400;
        letter-spacing: 3.5rem;
        animation-name: moveInLeft;
        animation-duration: 1s;
        animation-timing-function: ease-out;
/* 
        animation-delay: 3s; 
        animation-iteration-count: 3;
        */
}
    &--sub {
        display: block;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 1.6rem;
        animation: moveInRight 1s ease-out;
}
}
Colored by Color Scripter
cs

3 Button

Let try on yourself this css code to nesting sass code! It's net easy but you could do it!

Original

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: inline-block;
    border-radius: 10rem;
    transition: all .2s ;
    position: relative;
    font-size: 1.6rem;
}
 
.btn:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 1rem 2rem rgba($color-black,.2);
}
 
.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1rem rgba($color-black,.2);
}
 
.btn--white {
    background-color: $color-white;
    color: $color-grey-dark;
}
 
.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 10rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
}
 
.btn--white::after {
    background-color: $color-white;
}
 
.btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}
 
.btn--animated {
    animation: moveInBottom .5s ease-out .75s;
    animation-fill-mode: backwards;
}
Colored by Color Scripter
cs

Answer Nesting Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.btn {
    &:link,
    &:visited {
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.5rem 4rem;
        display: inline-block;
        border-radius: 10rem;
        transition: all .2s ;
        position: relative;
        font-size: 1.6rem;
}
    &:hover {
        transform: translateY(-0.3rem);
        box-shadow: 0 1rem 2rem rgba($color-black,.2);
 
        &::after {
            transform: scaleX(1.4) scaleY(1.6);
            opacity: 0;
}
}
    &:active {
        transform: translateY(-1px);
        box-shadow: 0 0.5rem 1rem rgba($color-black,.2);
}
    &--white {
        background-color: $color-white;
        color: $color-grey-dark;
 
        &::after {
            background-color: $color-white;
}
}
    &::after {
        content: "";
        display: inline-block;
        height: 100%;
        width: 100%;
        border-radius: 10rem;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        transition: all .4s;
}
    &--animated {
        animation: moveInBottom .5s ease-out .75s;
        animation-fill-mode: backwards;
}
}
Colored by Color Scripter
cs

Did you write correct answer? Don't worry if you don't this is just studying session.

But you should know that this code is much more readable. Let's start to implement a Nesting code into your project Now!

July 11, 2021 Junsoo Park

Junsoo Park