Scss map-get and function

by Rijo R

SCSS

$colors: (
    primary: #005DFF,
    primary-light: lighten(#005DFF, 40%),
    primary-dark: darken(#005DFF, 40%),
    accent: #FFF6BB
);

$padding: 15px; 
$borders: 15px;

@function color($color-name) {
    @return map-get($colors, $color-name)
}

$desktop: 840px;

@mixin desktop {
    @media (min-width: #{$desktop}) {
        @content;
    }
}

body, html {
    height: 100%;
}

body {
    font-family: 'Montserrat';
    margin: 0;
    
    #bg {
        clip-path: polygon(100% 0, 100% 82%, 45% 100%, 0 100%, 0 0);
        background-color: color(primary);
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;

        @include desktop {
            clip-path: polygon(0 0, 75% 0, 55% 100%, 0% 100%);
        }
    }

    header a {
        color: #fff;
        text-decoration: none;
        padding: $padding;
        display: block;
        text-transform: uppercase;
    }
}

main {

    @include desktop {
        display: grid;
        grid-template-columns: 50% auto;
        grid-template-areas: 
            "primary card";
    }

    section#card {
        background: #fff;
        padding: 20px;
        margin: 1em auto;
        border-radius: $borders;
        box-shadow: 0 10px 30px rgba(0,0,0,.2);
        width: 80%;

        @include desktop {
            grid-area: card;
            height: fit-content;
            align-self: center;
            margin: 1em;
        }

        ul {
            list-style-type: none;
            margin: 0; padding: 0;

            li {
                margin-bottom: 10px;

                span {
                    position: absolute;
                    width: 30px;
                    height: 30px;
                    background-color: color(primary-light);
                    border-radius: 50%;
                    margin-right: 10px;
                }

                strong {
                    display: inline-block;
                    margin-left: max(40px);
                   ...