Online SCSS to CSS (Quick and Easy)

CSS Tutorials

// Sample SCSS Code for Demonstration
// 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;
    }
}

Processing