Sass Mixins: Stil Sayfalarınızı KURU Tutun

Sass kullanmanın en sevdiğim avantajlarından biri, ön uç tasarım iş akışını otomatikleştirmeyi çok kolay hale getirmesidir. Dosyalarla çalışmak ve diğer görevleri otomatikleştirmek için birçok JavaScript aracı vardır, ancak Sass'ın yerleşik karıştırma yetenekleri, birinin modüler ön uç stil kodu yazmasına izin verir. Bu yazıda, web stillerinin yazımını otomatikleştirmek için en sevdiğim on Sass mixini listeledim.

Bunlar, üzerinde çalıştığım hemen hemen her web projesi için kullandığım Sass karışımları. Web'de bazı yararlı Sass karışımları içeren birçok ilginç makale var. Bourbon gibi daha küçük görevler için harika olan birkaç iyi Sass mixin kütüphanesi de var. Aşağıdaki karışımlardan bazılarını türettiğim bir başka harika mixin kütüphanesi Andy.

Bu makalede ele alacağım karışımlar aşağıdakilerle ilgilidir:

• Medya sorguları
• Renk temaları
• Merkezleme elemanları
• düzeltme
• Tutarlı yazı tipi boyutları
• Animasyon geçişleri
• retina görüntüleri
• Hızlı gradyanlar
• Harici yazı tipleri
• Hızlı dolgu/kenar boşlukları

Medya sorguları

Medya sorguları, stil sayfalarınıza kolayca özel kesme noktaları eklemenize ve farklı kesme noktaları için bir öğe içinde hızlı bir şekilde özel duyarlı davranış eklemenize olanak tanır. Bununla birlikte, çöp stil sayfası medya sorguları, özellikle de onları yolda tutmak söz konusu olduğunda, hızla baş ağrısına neden olabilir. Sass karışımları ile her şey değişebilir.

 $breakpoint-small: 600px; $breakpoint-med-small: 960px; $breakpoint-med: 1175px; @mixin screen($size, $type: max, $pixels: $breakpoint-small) { @if $size == 'small' { @media screen and ($type + -width: $breakpoint-small) { @content; } } @else if $size == 'med-small' { @media screen and ($type + -width: $breakpoint-med-small) { @content; } } @else if $size == 'med' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'large' { @media screen and ($type + -width: $breakpoint-med) { @content; } } @else if $size == 'custom' { @media screen and ($type + -width: $pixels + px) { @content; } } @else { @content; } }

Bunlar tanımlandığında, karışımlar aşağıdaki gibi kullanılabilir:

 .foo { @include screen(large) { width: 20%; } @include screen(med) { width: 40%; } @include screen(med-small) { width: 60%; } @include screen(small) { width: 80%; } @include screen(custom, max, 400) { width: 100%; } }

Tek başına veya Bootstrap gibi diğer ızgara çerçeveleriyle harika çalışır.

if ifadesi, karışıma sağlanan boyut adına bağlı olarak belirli bir ekran boyutuna ayarlanmış bir medya sorgusu yayacaktır. Bu, CSS niteliklerinizin davranışını buna göre kolayca ayarlamanıza olanak tanır. Ayrıca CSS niteliklerinizi ayarlamak istediğiniz noktayı özelleştirebilirsiniz. Genellikle, en duyarlı düzenler, içeriği ayarlamak için 3 veya 4 tanımlı ekran genişliği boyutuna bağlı kalır. Ekran boyutlarının, cihazların ve uygulamaların çeşitliliği her zaman genişlemektedir, ancak birçok web geliştiricisinin düzenleri için kullanacağı popüler bir eğilim vardır; telefonlar için küçük, tabletler için orta, dizüstü bilgisayarlar için büyük ve masaüstü bilgisayarlar için ekstra büyük ekran boyutları.

Başvuru için Bootstrap v3'te kullanılan medya noktaları şunlardır:

• maksimum genişlik: 767 piksel (767 piksel genişliğe kadar herhangi bir ekran)
• min-width: 768px (768px'ten geniş herhangi bir ekran)
• minimum genişlik: 992 piksel (992 pikselden geniş herhangi bir ekran)
• min-width: 1200px (1200 pikselden geniş herhangi bir ekran)

Renk Temaları

Sitenizde kullanılacak bir renk teması tanımlamak, aynı HTML öğelerinde aynı renkli CSS bölümlerine sahip olmaktan zaman kazanmanıza yardımcı olur. Tüm div düğmelerinizin 1 piksellik düz noktalı kenarlığa sahip olmasını istiyorsanız, bunu temanıza kolayca ekleyebilirsiniz. Bu Sass karışımı, istediğiniz kadar renk değişkeni ayarlamanıza ve istediğiniz kadar sınıfı etkilemenize olanak tanır. Bu, bir şey için renk seçenekleri sağlamak için veya aynı anda birçok öğenin rengini etkileyen bir özelliğiniz olduğunda yararlı bir araç olabilir. Burada Sass'ta renk temalarıyla çalışma hakkında daha fazla bilgi içeren harika bir makale var.

 @mixin theme($name, $color) { // Define colors in your theme $primary: $color; $secondary: lighten(adjust-hue($color, 20), 10%); // Add your classes with css colors added .#{$name} { .element { color: $primary; } .other-element { background: $secondary; } } }

Derinlemesine bir renk teması oluşturduğunuzda, doğru yapılırsa renkle ilgili stilinizin %70'ini ortadan kaldıracaksınız. Ayrıca bu .scss dosyasını diğer .scss dosyalarınızdan ayırmanızı ve tüm marka renk değişkenlerinizi aynı dosyaya dahil etmenizi öneririm.

Şu kadar basit bir satır:

 @include theme(theme-banana, yellow);

yayacak:

 .theme-banana .element { color: yellow; } .theme-banana .other-element { background: #bbff33; }

Merkezleme Elemanları

Düzeninize bağlı olarak, stillerinizde bir öğeyi hizalamanın birçok farklı yolu vardır. Aşağıdaki yöntem mutlak konumlandırma kullanır ve dikey, yatay veya her iki ortalanmış öğeyi tanımlamanıza olanak tanır. Ana öğenin pozisyonuna sahip olması gerekir: göreceli. Bu, bir öğenin ortalanmış konumunu 2 kısa kod satırında kolayca tanımlamanıza olanak tanır.

 @mixin center($position) { position: absolute; @if $position == 'vertical' { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @else if $position == 'horizontal' { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translate(-50%); } @else if $position == 'both' { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } }

 .foo { @include center(both); } .foo-parent { position: relative; }

Bu karıştırma, içeriği ortalamanın en çok yönlü yollarından biridir, ancak içeriğinizi ortalamanın birçok farklı yolu olduğunu ve bunun her zaman en iyi çözüm olmayabileceğini belirtmekte fayda var. Düzen stilinize ve tarayıcı uyumluluğuna bağlı olarak, içeriğinizi farklı bir şekilde ortalamak isteyebilirsiniz. Flexbox, hizalama için bir başka popüler ve çok kullanışlı araçtır, ancak şu anda eski tarayıcılar tarafından tam olarak desteklenmemektedir. Basit metin ve kap hizalaması, basit css özellikleri kullanılarak bu karıştırma olmadan kolayca yapılabilir. Bu, düzenler oluştururken ve diğer kapların içindeki kaplarla çalışırken size daha fazla yardımcı olacaktır.

düzeltme

Clearfix css özelliğini öğelere hızlı ve etkili bir şekilde uygulayın. Web'de birçok düzeltme çözümü var ve bu en iyi sonucu veriyor gibi görünüyor. Sass karışımı oluşturulduktan sonra kullanımı da kolaydır.

Bu karıştırma, sağa veya sola kayan içeriğiniz olduğunda ve aşağıya yeni içerik eklemek için kayan öğenin altındaki boşluğu temizlemek istediğinizde fayda sağlayacaktır.

 %clearfix { *zoom: 1; &:before, &:after { content: " "; display: table; } &:after { clear: both; } }

 .container-with-floated-children { @extend %clearfix; }

Tutarlı Yazı Tipi Boyutları

Tüm metin öğeleriniz için kullanmak üzere belgenizde bir rem yazı tipi boyutu ayarlayın. Bu, yazı tiplerini em yerine büyütüp küçültmenin daha iyi bir yoludur. em'i kullanmak, diğer CSS niteliklerine göre bileşik oluşturur, ancak rem yalnızca HTML belgenizde tanımladığınız boyuta göre yukarı veya aşağı ölçeklenir. Tüm tipografiniz için bir .scss dosyasını ayırmak ve varsayılan yazı tipi boyutlarınızı tanımlamak için aşağıdaki karışımı kullanmak, tipografi kodlama iş akışınızı büyük ölçüde otomatikleştirecektir.

 @function calculateRem($size) { $remSize: $size / 16px; @return $remSize * 1rem; } @mixin font-size($size) { font-size: $size; font-size: calculateRem($size); }

 p { @include font-size(14px) }

Bu karışım ayrıca rem'i desteklemeyen tarayıcılar için (IE8 ve altı) bir piksel yedeği oluşturur. Tarayıcı rem boyutlandırmayı desteklemediğinde, mixin, ayarladığınız ilk rem boyutunun piksel eşdeğerini hesaplar ve bir öğe için hem piksel hem de rem değerleri verir.

Animasyon

Animasyon özelliklerini hızlı bir şekilde tanımlayın ve bunları öğelerinize ekleyin. Şu anda, animasyon CSS özelliğinin hala satıcı öneklerine ihtiyacı var, bu yüzden bu onu da karışıma ekleyecektir.

 @mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; } } @mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

Karışımın ilk kısmı, tarayıcı uyumluluğu için gereken uygun satıcı öneklerini ekleyecektir. Sonraki bölüm, özel dizelerinizi ve özelliklerinizi girecek şekilde ayarlar. Karıştırmanın son bölümü, karıştırma adınızı oluşturacağınız (bu durumda: kararma) ve animasyondaki her bir ana karede ne olmasını istediğinizi tanımlayacağınız yerdir. Bu örnek kurulum çok basittir ve animasyon süresinin herhangi bir yüzdesine değişiklik ekleyebilirsiniz.

 // Define animation name, and properties @include keyframes(fade-out) { 0% { opacity: 1; } 90% { opacity: 0; } } // Add animation to element .element { width: 100px; height: 100px; background: black; @include animation('fade-out 5s 3'); }

Buradaki örnek, hedeflenen öğeyi animasyonun %0'ında (başlangıçta) alacak ve özelliği, animasyonun %90'ında tam opaklıktan (opaklık: 1;) hiç opaklığa sahip olmayan ve esasen kaybolan (opaklık: 0;) durumuna geçirecektir. . Bu nedenle, animasyonu 5 saniyelik bir zaman çizelgesine sahip olacak şekilde ayarlarsam, öğe 4,5 saniye sonra (5 saniyelik animasyonun %90'ı) kaybolacaktır. Mixin ("3") kullanımında tanımladığım son özellik, animasyonun tekrarlanma sayısıdır.

Retina Görüntüleri

Yüksek çözünürlüklü resimler göstermeyen cihazlar için bir geri dönüş ile sitenize yüksek çözünürlüklü resimler ekleyin. Retina görüntüleri kullanırken görüntüyü bozmadan mümkün olduğunca sıkıştırmanızı tavsiye ederim. Bunun için iyi bir araç TinyPNG'dir (PNG ve JPG'yi destekler).

 @mixin image-2x($image, $width, $height) { @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { background-image: url($image); background-size: $width $height; } }

Bu karıştırma, orijinal görüntüyü tanımlayan CSS özelliğiyle aynı noktaya bir kural eklemenize olanak tanır.

 div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px); }

Önceden, bunun için tek CSS çözümü medya sorguları kullanmaktı ve bu çözüm çok daha temiz ve daha kolay. Bu karışım hakkında daha fazla düşünce ve fikir için bu makaleye göz atın.

Hızlı Degradeler

Yalnızca başlangıç ​​rengini, bitiş rengini ve degrade türünü tanımlayan degradeleri kolayca ekleyin. Tüm degrade özelliklerini ekleyin ve gerektiği gibi seçebilirsiniz. Degrade türü, dikey degrade, yatay degrade veya radyal (küre şeklinde) degrade arasından seçim yapmanızı sağlar.

 @mixin background-gradient($start-color, $end-color, $orientation) { background: $start-color; @if $orientation == 'vertical' { background: -webkit-linear-gradient(top, $start-color, $end-color); background: linear-gradient(to bottom, $start-color, $end-color); } @else if $orientation == 'horizontal' { background: -webkit-linear-gradient(left, $start-color, $end-color); background: linear-gradient(to right, $start-color, $end-color); } @else { background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color); background: radial-gradient(ellipse at center, $start-color, $end-color); } }

Artık gradyanları uygulamak için çeşitli satıcı öneklerini ve parametre siparişlerini hatırlamanız gerekmeyecek.

 .foo { @include background-gradient(red, black, 'vertical'); }

Harici Yazı Tipleri

CSS font-face özelliğini kullanarak bir dizine kolayca font ekleyebilir ve tüm font türlerini dahil edebiliriz. Yazı tipi dosyalarını kullanırken, farklı tarayıcıların dosya türleriyle farklı uyumlulukları vardır. Bu karıştırma, bir dizindeki herhangi bir ilgili yazı tipi dosyasını kullanarak bunu çözmeye yardımcı olur.

Herhangi bir yazı tipi dosyasını bir dizine ekleyin ve seçtiğiniz klasördeki tüm dosyaları alacak olan stillerinize “@include” etiketini ekleyin.

 @mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { @font-face { font-family: quote($font-name); src: url($file-name + '.eot'); src: url($file-name + '.eot?#iefix') format('embedded-opentype'), url($file-name + '.woff') format('woff'), url($file-name + '.ttf') format('truetype'), url($file-name + '.svg##{$font-name}') format('svg'); font-weight: $weight; font-style: $style; } }

Bu karışım, geriye dönük uyumluluk için gerekli olan tek geçici çözümler de dahil olmak üzere, alternatif yazı tipi biçimi URL'lerini tanımlamaya özen gösterecektir.

Hızlı Dolgu ve Kenar Boşlukları

Bunu kullanmamın ana nedeni, zaman zaman padding-left gibi belirli bir padding özelliğini atlayacağım ve onu tanımlamak istemiyorum. Sass özelliğini null kullanarak, dolgu özelliklerini atlayabilirsiniz. Aynı kurallar marjlar için de geçerlidir.

 //Padding mixin @mixin padding($top, $right, $bottom, $left) { padding-top: $top; padding-right: $right; padding-bottom: $bottom; padding-left: $left; } //Margin mixin @mixin margin($top, $right, $bottom, $left) { margin-top: $top; margin-right: $right; margin-bottom: $bottom; margin-left: $left; }

Karıştırma daha sonra stil sayfalarınız boyunca bir dizi dolgu* ve kenar boşluğu-* özelliğini değiştirmek için kullanılabilir. Bu karışımı herhangi bir öğeye hızlı bir şekilde dahil edebilir ve yalnızca eklemek istediğiniz dolgu/kenar boşluklarını tanımlayabilirsiniz. Doldurma ve kenar boşlukları, öğelere eklenen en çok kullanılan CSS stillerinden biridir ve bunun gibi küçük bir zaman tasarrufu, hızla eklenecektir.

 // Usage definition @include padding(top, right, bottom, left); @include margin(top, right, bottom, left); // Usage 1 @include padding(1px, 2px, 3px, 4px,); @include margin(1px, 2px, 3px, 4px); // Output 1 // padding: 1px 2px 3px 4px; // margin: 1px 2px 3px 4px; // Usage 2 (with null properties) @include padding(1px, null, 3px, 4px); @include margin(1px, 2px, null, 4px); // Output 2 // padding-top: 1px; // padding-bottom: 3px; // padding-left: 4px; // margin-top: 1px; // margin-right: 2px; // margin-left: 4px;

Sarmak

Bu makalede özetlenenler gibi Sass karışımlarını kullanmak, iş akışınızı daha verimli hale getirmenin harika bir yoludur. Tezlere özel karışımlar, genel web görevlerine daha az zaman harcamanıza yardımcı olacak ve projenin daha dikkatli ve yetenekli içgörü gerektiren diğer yönlerine odaklanmanız için size daha fazla zaman tanıyacaktır.

Sass'ı kurmak ve onunla çalışmak birkaç yolla yapılabilir ve projenize bazı kitaplıkları kurmak için komut istemini kullanmayı gerektirir. Sass'ı kurmanın bir yolu - burada ana Sass web sitesinde belirtildiği gibi - Ruby'yi kullanmaktır ve bir başka popüler yol da Node.js'yi kullanmaktır.

Sass'ın faydaları otomasyonun ötesine geçer ve proje stil sayfalarınızı kolayca oluşturmanıza ve yönetmenize yardımcı olabilir. En temel web projelerinin bazılarında bile binlerce satırlık CSS kodu olabilir. Sass, bu kodu her biri kendi odağına sahip daha yönetilebilir bitlere bölmenin harika bir yoludur.