// This code is designed as an example to illustrate various SCSS features.

​

// Define colors

$primary-color: #3498db;

$secondary-color: #2ecc71;

$light-gray: #ecf0f1;

$dark-gray: #95a5a6;

$font-stack: Helvetica, sans-serif;

​

// Mixin for text shadow

@mixin text-shadow($x-offset, $y-offset, $blur, $color) {

    text-shadow: $x-offset $y-offset $blur $color;

}

​

// Function to lighten colors

@function lighten-color($color, $amount) {

    @return lighten($color, $amount);

}

​

// Base styling

body {

    font-family: $font-stack;

    font-size: 16px;

    color: $dark-gray;

}

​

a {

    color: $primary-color;

​

    &:hover {

        color: lighten-color($primary-color, 10%);

    }

}

​

// Header styling

header {

    background: $primary-color;

    color: $light-gray;

    padding: 10px 0;

​

    h1 {

        margin: 0;

        font-size: 2.5rem;

        @include text-shadow(1px, 1px, 2px, darken($primary-color, 10%));

    }

}

​

// Navigation menu

nav {

    ul {

        list-style: none;

        padding: 0;

        display: flex;

​

        li {

            margin-right: 20px;

​

            &:last-child {

                margin-right: 0;

            }

        }

    }

}

​

// Main content

main {

    padding: 20px;

    background: $light-gray;

​

    article {

        margin-bottom: 20px;

        padding: 15px;

        background: white;

        border-radius: 5px;

​

        h2 {

            margin-top: 0;

        }

​

        p {

            line-height: 1.5;

        }

    }

}

​

// Footer

footer {

    background: $secondary-color;

    color: $light-gray;

    text-align: center;

    padding: 10px 0;

​

    p {

        margin: 0;

    }

}