Beispielvorlage – wird als externes File minified ausgegeben
Eine Zeit lang habe ich mit SCSS Partials gearbeitet. Die Organisation in einer Datei fällt mir persönlich leichter, da ich alles an einem Ort finde.
SCSS
/**
* global stylesheet
* projekt: [PROJEKT.TLD]
* author: galliweb | info@galliweb.ch
* updated: 02.06.26
*
* ---------------------------------------------------
*
* #vars
* #mixins
* #globals
* #utilities
* #forms
* #tabs
* #accordions
* #header
* #nav
* #footer
* #modals
* #typography
* #cookie
*
* ---------------------------------------------------
*/
/* #vars */
$1: 1px;
$375: 375px;
$376: 376px;
$480: 480px;
$481: 481px;
$620: 620px;
$768: 768px;
$769: 769px;
$1024: 1024px;
$1025: 1025px;
$1100: 1100px;
$1200: 1200px;
$1280: 1280px;
$1281: 1281px;
$col-white: #fff;
$col-black: #333;
$col-accent: orange;
/* #mixins */
@mixin max-1200 {
@media screen and (max-width: #{$1200}) {
@content;
}
}
@mixin max-1024 {
@media screen and (max-width: #{$1024}) {
@content;
}
}
@mixin max-768 {
@media screen and (max-width: #{$768}) {
@content;
}
}
@mixin max-620 {
@media screen and (max-width: #{$620}) {
@content;
}
}
@mixin min-1100 {
@media screen and (min-width: #{$1100}) {
@content;
}
}
@mixin min-769 {
@media screen and (min-width: #{$769}) {
@content;
}
}
@mixin mobile-s {
@media screen and (min-width: #{$1}) and (max-width: #{$375}) {
@content;
}
}
@mixin mobile {
@media screen and (min-width: #{$376}) and (max-width: #{$480}) {
@content;
}
}
@mixin tablet-s {
@media screen and (min-width: #{$481}) and (max-width: #{$768}) {
@content;
}
}
@mixin tablet {
@media screen and (min-width: #{$769}) and (max-width: #{$1024}) {
@content;
}
}
@mixin desktop-s {
@media screen and (min-width: #{$1025}) and (max-width: #{$1280}) {
@content;
}
}
@mixin desktop {
@media screen and (min-width: #{$1281}) {
@content;
}
}
/* ----------------------------------------------------------
#3 utility classes
---------------------------------------------------------- */