Build beautiful, responsive, and themed landing pages using SCSS variables. Learn to create dark mode, light mode, and more with a single codebase.
The Power of SCSS in Landing Page Design
Landing pages are the front doors of your digital presence. Whether it’s a product, service, or portfolio, a well-designed landing page can skyrocket conversions.
But what if you could switch between light and dark mode, apply seasonal themes, or adapt brand colors—without rewriting stylesheets?
That’s where SCSS variables and theming come in.
In this tutorial, you’ll learn how to:
- Set up a SCSS-powered landing page
- Use variables and maps to manage color schemes
- Switch themes dynamically (like dark/light mode)
- Keep your styles clean, responsive, and maintainable
Let’s dive into the magic of SCSS!
What Is SCSS and Why Use It?
SCSS (Sassy CSS) is a preprocessor that extends standard CSS with features like:
- Variables
- Nesting
- Mixins
- Functions
- Partials and imports
These features make SCSS perfect for large, scalable design systems—especially themeable landing pages.
SCSS vs CSS: What’s the Difference?
| Feature | CSS | SCSS |
|---|---|---|
| Variables | ❌ | ✅ |
| Nesting | ❌ | ✅ |
| Reusability (mixins) | ❌ | ✅ |
| Theming support | Manual | Efficient |
If you’re still styling with plain CSS, you’re missing out on superpowers!
Step 1: Set Up Your Project
Before we theme anything, let’s create a basic file structure:
/scss-landing-page/
│
├── index.html
├── /scss
│ ├── _variables.scss
│ ├── _themes.scss
│ ├── _layout.scss
│ └── main.scss
├── /css
│ └── style.css (compiled)Make sure Sass is installed:
npm install -g sassOr use Live Sass Compiler in VS Code.
Step 2: Define Global SCSS Variables
Create _variables.scss for shared tokens:
// _variables.scss
$font-stack: 'Segoe UI', sans-serif;
$border-radius: 10px;
$transition-speed: 0.3s;
$spacing-unit: 1rem;
Code language: PHP (php)Use these for consistent spacing and styling across all themes.
Step 3: Define SCSS Themes (Light, Dark, Custom)
Create _themes.scss with map-based themes:
// _themes.scss
$light-theme: (
background: #ffffff,
text: #1a1a1a,
primary: #0d6efd,
secondary: #6c757d
);
$dark-theme: (
background: #121212,
text: #f1f1f1,
primary: #0dcaf0,
secondary: #adb5bd
);
$custom-theme: (
background: #f0f9ff,
text: #1c2b36,
primary: #ff6f61,
secondary: #ffc107
);
Code language: PHP (php)These maps allow us to quickly swap colors across the entire site.
Step 4: Create a Reusable Theme Mixin
// _themes.scss continued
@mixin theme($theme) {
background-color: map-get($theme, background);
color: map-get($theme, text);
.btn-primary {
background-color: map-get($theme, primary);
color: #fff;
}
.btn-secondary {
background-color: map-get($theme, secondary);
color: #fff;
}
}
Code language: PHP (php)This mixin pulls from any theme and applies consistent styles.
Step 5: Apply the Themes in Layout
// _layout.scss
body.light-mode {
@include theme($light-theme);
}
body.dark-mode {
@include theme($dark-theme);
}
body.custom-mode {
@include theme($custom-theme);
}
Code language: PHP (php)Themes are now linked to body classes. Switching themes is as easy as toggling a class in JavaScript.
Step 6: Create the Landing Page HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Themed Landing Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="light-mode">
<section class="hero">
<h1>Build with SCSS Theming</h1>
<p>Switch between light, dark, and custom themes easily</p>
<a class="btn btn-primary" href="#">Get Started</a>
<button onclick="toggleTheme()">Switch Theme</button>
</section>
<script>
let current = 'light-mode';
function toggleTheme() {
const body = document.body;
body.classList.remove(current);
current = current === 'light-mode' ? 'dark-mode' : current === 'dark-mode' ? 'custom-mode' : 'light-mode';
body.classList.add(current);
}
</script>
</body>
</html>
Code language: HTML, XML (xml)Step 7: Compile Your SCSS
sass scss/main.scss css/style.css --watchMake sure you import everything inside main.scss:
@import 'variables';
@import 'themes';
@import 'layout';
body {
font-family: $font-stack;
transition: all $transition-speed ease;
padding: $spacing-unit;
}
Code language: CSS (css)Step 8: Make It Responsive
.hero {
text-align: center;
padding: 4rem 1rem;
@media (min-width: 768px) {
padding: 6rem 2rem;
}
h1 {
font-size: 2.5rem;
}
p {
margin-top: 1rem;
font-size: 1.1rem;
}
}
Use SCSS nesting and media queries for easy responsive styling.
Extra: Add Theme Transition Effects
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn {
transition: background-color 0.3s ease;
}
Code language: CSS (css)This makes the theme switch smooth and elegant
FAQs: People Also Ask
Real-World Use Cases for SCSS Theming
- 💼 Startup Website: One codebase, multiple branded themes for clients
- 🌙 Dark/Light Mode Portfolio: Showcases accessibility and modern UI
- 🎉 Seasonal Landing Pages: Easily apply festive themes like Christmas or Halloween
- 🎯 SaaS Product Page: Offer client-side theme customization with minimal code
Final Thoughts: Why SCSS Theming Is a Game-Changer
Designing a scalable, themeable landing page with SCSS means:
- Fewer headaches
- More consistency
- Happy users
And the best part? You don’t need a massive framework—just a smart Sass setup.
Bonus: Download the Starter Template
Want the code in a neat zip?
Master the Art of Web Design & Development — From Scratch to Pro
Learn HTML5, CSS3, JavaScript, Bootstrap, and responsive design techniques in one beginner-friendly, project-based course.
Discover more from Prime Inspire
Subscribe to get the latest posts sent to your email.
