SASS Guide: Solved Conversion

/sass/guide is a reference for converting CSS files to SASS, so it has no graded runners. This notebook records the finished conversion from the guide’s leaderboard.css example.

Step 1: Original CSS

This is the starting assets/css/leaderboard.css from the guide:

.leaderboard-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.leaderboard-header h3 {
    margin: 0;
    color: white;
    font-size: 20px;
}

.leaderboard-content {
    padding: 16px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
}

.leaderboard-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

Step 2: Converted SCSS

Create _sass/open-coding/leaderboard.scss. The import gives the file access to the site color variables, and the selectors are nested with &:hover:

// ============================================
// LEADERBOARD WIDGET STYLES
// Converted from assets/css/leaderboard.css
// ============================================

@import "materials/main.scss";

// Local variables
$leaderboard-width: 400px;
$leaderboard-radius: 16px;
$leaderboard-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$item-radius: 8px;
$base-padding: 16px;

.leaderboard-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: $leaderboard-width;
    background: $leaderboard-gradient;
    border-radius: $leaderboard-radius;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    padding: $base-padding 20px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    h3 {
        margin: 0;
        color: $text;
        font-size: 20px;
    }
}

.leaderboard-content {
    padding: $base-padding;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: $item-radius;

    &:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

Step 3: Register the File

Add the new partial to _sass/open-coding/_main.scss so Jekyll compiles it:

// ... existing imports ...
@import "leaderboard";

Step 4: Conversion Checklist

• SCSS file created at _sass/open-coding/leaderboard.scss.
• @import "materials/main.scss"; added at the top for color variables.
• Repeated values replaced with local SASS variables.
• Related selectors nested, including &:hover.
• @import "leaderboard"; registered in _sass/open-coding/_main.scss.
• Old CSS file and any <link> references removed.
• Build and browser check completed.