Komola est un site web élégant conçu pour présenter une collection de produits artisanaux. Ce projet a été développé dans le cadre d'un exercice pour mettre en pratique les compétences en SCSS (Sass).
L'objectif principal était d'utiliser efficacement les variables en SCSS pour créer un système de design cohérent et facilement maintenable. L'utilisation de mixins et de fonctions a permis d'optimiser le code et d'améliorer la réutilisabilité des styles.
// Variables de couleurs
$primary-color: #ff6b6b;
$secondary-color: #4ecdc4;
$accent-color: #f7d488;
$text-dark: #2d3436;
$text-light: #f5f5f5;
// Variables de typographie
$font-primary: 'Montserrat', sans-serif;
$font-secondary: 'Open Sans', sans-serif;
$font-size-base: 16px;
// Breakpoints pour le responsive
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;Exemple de variables SCSS utilisées dans le projet Komola
// Mixin pour les transitions fluides
@mixin smooth-transition($property: all, $duration: 0.3s, $timing: ease) {
transition: $property $duration $timing;
}
// Mixin pour les media queries
@mixin respond-to($breakpoint) {
@if $breakpoint == sm {
@media (min-width: $breakpoint-sm) { @content; }
} @else if $breakpoint == md {
@media (min-width: $breakpoint-md) { @content; }
} @else if $breakpoint == lg {
@media (min-width: $breakpoint-lg) { @content; }
}
}Mixins personnalisés pour simplifier le code et améliorer la maintenabilité
Structure des pages et contenu sémantique
Préprocesseur CSS avec variables, mixins et fonctions
Explorez le site Komola et découvrez comment les variables SCSS ont été utilisées pour créer un design cohérent et facilement modifiable. Admirez la fluidité des transitions et l'ergonomie de l'interface.