Sass ile Tema Oluşturma: Bir SCSS Eğitimi
Yayınlanan: 2022-03-11Sass ile stil sayfası geliştirme, yerleştirme özellikleri veya değişkenler gibi en temel özelliklerini kullanırken bile değerli zamandan tasarruf sağlar ve ön uç geliştiriciler için hayatı kolaylaştırır. CSS ön işlemcilerinin, web siteleri ve uygulamalar için stiller yaratmanın fiili yolu olarak geniş çapta benimsenmiş olması şaşırtıcı değildir; artık onlarsız yaşayamayız.
Temaya gelince; yani, düzenini korurken web sitenizin görünümünü ve verdiği hissi değiştirmek, Sass'ın karışımlar veya işlevler gibi özellikleri, yürümek yerine uçağa biniyormuş gibi hissettirebilir! Bu SCSS eğitiminde, minimal bir tema oluşturacağız ve CSS programlamamıza bazı süper güçler vermek için SCSS kullanacağız.
Temel Bir Karışım Yaklaşımı
Diyelim ki aşağıdaki düzene sahibiz:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> Bunun için birden fazla tema oluşturmamız istendi. Tema, tüm kaplar (ana kapsayıcı dahil) ve düğme için renkleri değiştirmelidir ve tema gövdedeki bir sınıf tarafından belirlenir veya bir "dış" kapsayıcı da olabilir:
<body class="theme-1">Renk şemamızı parametre olarak içerecek olan “themable” adında bir mixin oluşturalım.
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }Ardından temalarımızı oluşturmak için kullanın:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); Bu noktada zaten çok zaman kazandık, ancak bu yaklaşımla ilgili bazı sorunlar var:
Temaların normalde renklerin yanında birçok farklı özelliği vardır. Örneğin, Bootstrap temasını değiştirmek isteseydik, önceki "tarifi" izleyerek bir mixin yazmak, bakımı ve kodu okumak zor olurdu. Ayrıca, Sass'ın en iyi uygulamalarını gerçekten takip etmiyoruz - örneğin, onaltılık renk kodlarını doğrudan karışıma girmek.
Sass Haritaları ile Bir Stil Şeması Tasarlayın
Temelde anahtar dizine alınmış diziler gibi olan haritaların yardımıyla, temamız için daha semantik, anlamlı bir stil seti oluşturabiliriz; bu, meslektaş geliştiricilerimiz tarafından bakımı ve anlaşılması daha kolay olacaktır. Listeleri de kullanabiliriz, ancak kişisel olarak haritaları bu amaç için daha uygun buluyorum. Anahtarlar kendiliğinden açıklanabilirken listelerin anahtarları yoktur.
Yeni yaklaşımımız için harita, iç içe geçmiş bir harita olacaktır:
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); theme-1 şemamızın ve alt haritalarının her bir bölümüne erişmek istiyorsak, her biri arasında dolaşmak için @each yönergesini kullanırız:
@each $section, $map in $theme-1 $section , geçerli bölümün anahtarını döndürür ve $map , o anahtara karşılık gelen iç içe geçmiş haritayı döndürür.
Ardından, map-get işlevini kullanarak her bir haritanın özelliklerine, diyelim ki arka plan (bg) özelliğine erişebiliriz:
map-get($map, bg)Son olarak, harita yapımıza dayanan yeni karışımımızı birleştirerek istediğimiz kadar tema oluşturabiliriz:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … Ayrıca, düğme olmayan bölümlerin özelliklerini ayırt etmek için @if yönergesini kullandığımızı unutmayın.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }Bu şekilde, belirli özellikler ve hatta kurallar oluşturmak için bazı bölümler için farklı özellikler ekleyebilir veya tek bir değere sahip bir anahtarı diğerinden yuvalanmış bir harita ile ayırt edebiliriz.
Temamız, stil sayfamızın farklı bölümlerinde uygulanan çeşitli karışımlar tarafından kullanılan birçok haritadan da oluşabilir. Her şey temel düzenimizin karmaşıklığına ve tabii ki kişisel yaklaşımımıza bağlıdır.
Daha Fazla Optimizasyon
Sass, bizi daha da fazla işten kurtarmak için kullanışlı yerleşik işlevler sunar; örneğin, hsl, örneğin üzerine gelindiğinde bir düğmenin rengini hesaplamak için lighten veya darken gibi işlev görür.
Orijinal arka plan renginden bağımsız olarak, üzerine gelindiğinde arka planını aydınlatmak için düğme kodunu değiştirebiliriz. Bu sayede bu duruma başka bir renk eklemek zorunda kalmıyoruz.
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }Ayrıca, Sass modüllerinin kullanımı ile kodumuz daha da okunaklı ve ölçeklenebilir hale gelebilir; her tema haritası bir modülde yer alabilir ve ardından ana stil sayfamıza aktarılabilir.
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …Bu, modüllerin projeye şu şekilde yerleştirilmesini gerektirir:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
CSS'nizi KURULAMAK için Sass'ı kullanma hakkında daha fazla bilgi edinmek istiyorsanız, Toptaler Justin Brazeau ve Sass meraklısı arkadaşı, Sass Mixins : Stil Sayfalarınızı KURU Tutun adlı harika makalesinde tam da bunu tartışıyor.