Sass ile nasıl başlanacağı

Sos Diğer programlama dillerinden birçok özelliği, işlevler, değişkenler ve ilmekler gibi CSS'ye sunan güçlü bir araçtır.

Bu eğitimde SASS döngüleri, karıştırıcı ve fonksiyonları kullanarak sosyal simgeler oluşturacağız. Ayrıca SASS'ta mevcut güçlü yuvalama kullanıyoruz.

• Sass nedir?

SASS'umuzun bir listesini oluşturmak için SASS'umuzun bir listesini oluşturacağız, bu da sınıfnadı, yazı tipi referansı ve önce - ve daha sonra Araç İpucu.

Ve tekrar kullanılabilir medya sorguları oluşturmak ve bir piksel değerini bir EM değerine dönüştürmek için bir işlev oluşturmak için Mixins kullanacağız. Bunu yapmak için, baz font boyutumuz için de bir değişken yaratacağız.

Sisteminize ve oluşturma araçlarınıza bağlı olarak SASS'u kurmanın ve kullanmanın birkaç yolu vardır - daha fazla ayrıntı bulunabilir İşte - Ancak, SASS'umuzu olabildiğince basit tutmak için SASS'umuzu CSS'ye derlemek için Codepen'i kullanacağız.

Sass'ın gücünü gerçekten kullanmak ve kendinizi bir özgüllük ve karmaşıklığın karmaşasına sokmamak için, CSS'nin sağlam bir anlayışı gereklidir. Kullanacağımız Sass'ın özel lezzeti, SCS'ler (Sassy CSS), yani sass kodumuzda hala kıvırcık parantez kullanıyor olacağız.

Eğitim dosyalarını alın

Bu eğitim için örnek dosyaları indirmek için Fileilo , ücretsiz şeyler seçin ve öğreticinin yanındaki ücretsiz içerik seçin. Not: İlk kez kullanıcıların FileSilo'yu kullanmak için kaydolması gerekecektir.

01. CODEPEN CSS'nizi ayarlayın

Yapmamız gereken ilk şey Yeni bir kalem oluştur ve CODEPEN'deki CSS Editörünün varsayılan ayarlarının bir kısmını değiştirin. CSS ön işlemcisini SCSS'ye değiştirip normalize ve AutoPrefixer'ı açacağız.

02. Bir kod yazmaya başlayın

Şimdi her şeyi bir kod yazmaya başlayabiliriz. HTML editörünün içinde bir konteyner oluştururuz ve birbirimizi her simgelerimizin bağlantısını ve simgesini içeren bir dizi öğe oluştururuz.

Burada kullanılan isimler SASS listemizde CSS'de referans olarak kullanılacaktır. Ayrıca sınıf isimlerimiz için BEM adlandırma sözleşmesini de kullanacağız.

 & lt; div class = "social__container" & gt;
  & lt; div class = "social__item" & gt;
  & lt; bir hedef = "_ boş" href = "..."
  Sınıf = "Social__icon - Twitter" & gt;
  & lt; I sınıfı = "icon - twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Temel stilleri ayarlayın

CSS Editörüne geçiş yaparak, Font-Awesome dahil olmak üzere, baz yazı tipi boyutumuz ve sayfa için bazı temel stiller için bir değişken belirleyerek başlayacağız.

 @import URL (http://srt.lt/w8yt8);
// Değişkenler
$ Base-Font boyutu: 16px;
// temel stil
vücut {
  Yazı tipi boyutu: $ baz font boyutu;
  ...
} 

04. Temel bir işlev oluşturun

Daha sonra '$ Base-Font-Size' değişkenimizi kullanarak bir piksel değerini bir EM değerine dönüştürmek için temel bir işlev oluşturacağız.

SASS'teki fonksiyonlar, '@Function' kullanılarak, ardından işlevin adını ve işlevi gerçekleştirmek için kullanılan giriş kullanılarak oluşturulur.

Sonra beyanın içinde, işlevi kullanırken değeri çıkarmak için '@return'u kullanırız. Hesaplamayı çevreleyen '# {}' interpolasyon .

 // fonksiyonlar
@function px-to-em ($ piksel) {
@return # {$ piksel / $ taban-yazı tipi boyutu} em;
} 

05. Mixins yapın

Kurulumumuza devam ederek, bir EM değerini döndürmek için bir PX değerinde geçeceğimiz 'PX-EM' işlevimizi kullanarak basit mobil-ilk medya sorguları için miksler oluşturacağız.

Mixins, '@mixin' kullanılarak oluşturulur ve ardından Mixin için bir isim. Sonra beyanın içinde, daha sonra kodonumuzda ararken, karışımın içine koyduğumuz kodu çıkarmak için '@Content'i kullanıyoruz.

 @mixin viewport - büyük {
  @Media sadece ekran ve
  (Min-Genişlik: Px-to-em (1680px)) {
  @Content;
}}
@Mixin Viewport - Orta {
  @Media sadece ekran ve
  (Min-Genişlik: Px-to-em (1080px)) {
  @Content;
}} 

06. Bir Sass Listesi'ni ayarlayın

Kurulumumuzdaki son adım bir liste oluşturmaktır. SASS'taki listeler bir değişken kullanılarak oluşturulur; Bundan sonra kesin sözdizimi oldukça gevşek, çok çeşitli tanımlamanın yolları .

Değişkenin içinde, her bir simge için sınıf adını, Unicode değerini ve rengi tanımlayacağız, bunları bir virgülle, parantez içinde bir virgülle ayıracağız.

 $ icon listesi: (
  Vimeo "\ f27d" # 1Ab7ea,
  Twitter "\ F099" # 1DA1F2,
  ...
  Github "\ F113" # 333,
  RSS "\ f09e" # F26522
); 

07. Simgelerinizi üst üste görüntüleyin

Sosyal simgelerimizin satırda gösterilmesi için, kaplarının her birine bazı basit CS'ler ekleyeceğiz.

 .social__item {
  Ekran: satır içi blok;
  Marj-sağ: 0.05EM;
} 

08. Paylaşılan bir simge stili oluşturun

Biz çıktı olan CSS miktarını en aza indirmek için, 'simge' ile başlayan tüm sınıfları bulmak ve onlar için paylaşılan bir stil oluşturmak için bir CSS3 seçicisi kullanacağız.

 [Class ^ = "icon"] {
  Yazı Tipi ailesi: 'Fontawesome';
  Konuş: Yok;
  Yazı Tipi Tarzı: Normal;
  Yazı Tipi Ağırlığı: Normal;
  Font-Variant: Normal;
  Metin dönüşümü: Yok;
  Hat yüksekliği: 1;
  -Webkit-Font-Poothing: AntialiaSed;
  -MOZ-OSX-Font-Poothing: Gri tonlamalı; } 

09. Stil yukarı düğmesi arka planlar

Aynı yöntemi kullanarak, 'em' deki değerlerimizi tanımlayan düğmeler için de aynı şeyi yapacağız, daha sonra kapları kullanarak onları yeniden boyutlandırmamıza izin verir.

 [class ^ = "social__icon"] {
  Yazı tipi boyutu: 1EM; Genişlik: 2EM; Yükseklik: 2EM;
  Arka plan rengi: # 333;
  Beyaz renk;
  Metin Dekorasyonu: Yok;
  Sınır-yarıçap:% 100;
  Metin Hizası: Merkez;
  Ekran: Flex;
  Hizala-Öğeler: Merkez;
  Justify-Content: Center;
} 

10. Simgelerimiz için @ach Loop

Şimdi tüm temel stillerimize sahibiz. Her simgeye özgü CSS'yi oluşturmak için listemizi kullanabiliriz.

SASS'ta bir döngü oluşturmak için, '@ @ @ icon', '$ Unicode' ve '$ simge-arka plan' '' '' $ simge ',' $ Unicode 've' $ icon-background '- ardından' IN-Icon-Background '- ardından' @ 'i' listenin.

Döngü içinde '$ Unicode' değerini '$ Unicode' değerini 'önce' HTML'de oluşturduğumuz her simgenin Pseudo öğesi'ne uygulayacağız, daha önce oluşturduğumuz diğer stillerin tüm diğer stillerine dikkat etmenizi sağlıyor.

 @Each $ icon, $ Unicode, $ simge-arka plan
$ icon-list'de {
  .icon - # {$ icon} {
  & amp; :: önce {
  İçerik: $ Unicode;
  }
  }
} 

11. @ BEDAVA RENKLERİMİZ İÇİN DOOP

Simgeler artık tüm çalışıyor ama biz hala geri dönüş arka plan rengimiz var. Bunu düzeltmek için listemize daha fazla kod ekleyeceğiz. Yukarıdaki gibi aynı yöntemi kullanarak '$ simge' adını ancak bu sefer 'sosyal__ison' sınıflarında ve '$ simge-arka plan' renginin içinde.

 @Each $ icon, $ Unicode, $ simge-arka plan
$ icon-list'de {
  ...
  .social__icon - # {$ icon} {
  Arka plan rengi: $ simge-arka plan;
  }
} 

12. Mixins kullanın

Daha önce yarattığımız miksülleri kullanarak ve "EM 'değerlerini kullanarak simgeleri tarzdığımız için, konteynere bir yazı tipi boyutunu uygulayabilir ve' @ @include 'kullanarak Media-Query Mixin'imizi ve ardından Mixinin adını kullanarak artırabiliriz. Medya sorgusuna dahil etmek istediğimiz kod.

 .social__container {
  Yazı tipi boyutu: 1EM;
  @include Viewport - Orta {
  Yazı tipi boyutu: 1.5EM;
  }
  @include viewport - büyük {
  Yazı tipi boyutu: 2EM;
  }} 

13. Etkileşim durumları ve yerleşik işlevler ekleyin

Düğmelere, fareyi veya klavyeyi kullanarak etkileşime girdiğinde, arka plan rengini değiştirerek düğmelerinize bazı etkileşimler ekleyebiliriz.

SASS bir dizi var Dahili renk fonksiyonları Arka plan rengini almamıza izin vererek listemizde ayarladık ve düğmeyi karartmak için siyahla karıştırın - etkileşime girdiğinde.

 Simge - # {$ icon} {
  Arka plan rengi: $ simge-arka plan;
  & amp;: Hover,
  & amp;: Odak,
  & amp;: aktif {
  arka plan rengi:
  karıştırın (siyah, $ simge-arka plan,% 15);
  }} 

14. Arka plan rengini geçiş

Arka plan renkleri arasındaki farkları canlandırmak için CSS'deki 'geçiş' özelliğini de kullanabiliriz. 'Tüm' değerini kullanabiliriz, ancak bu performans açısından pahalıdır ve farklı zamanlamalar ve zamanlama fonksiyonlarında farklı değerleri geçiş yapmamıza izin vermez.

 [Sınıf ^ = "Social__icon"]{
  ...
  Geçiş: arka plan rengi
  150ms kolaylıkla
  ;
} 

15. Daha fazla geçiş efekti ekleyin

Düğmelere ve en iyi bir değere 'göreceli' konumlandırma ve 'geçiş' mülkümüze 'üst' ekleyerek öğeleri daha fazla etkileşim için hazırlayabiliriz.

 [class ^ = "social__icon"] {
  Konum: Göreceli;
  Üst: 0;
  ...
  Geçiş: arka plan rengi
   150ms kolaylıkla,
    En iyi 250ms lineer
  ; } 

16. Düğmeleri etkileşim üzerine yukarı hareket ettirin

Bu etkileşim için, oluşturmak için özel bir şey yoktur, bu nedenle kodu paylaşılan sınıfa ekleyebiliriz. Olumsuz bir üst değeri uygulayarak ve taslağın çıkarılmasıyla, hatta bir etkileşimin daha net bir görsel işaretine sahibiz.

 [class ^ = "social__icon"] {
  ...
  & amp;: Hover,
  & amp;: Odak,
  & amp;: aktif {
  Anahat: Yok;
  Üst: -0.25EM;
  }} 

17. Bir damla gölge ekleyin

Bir 'kutu-gölge' oluşturmak ve canlandırmak için aynı yöntemi de kullanabiliriz - etkileşime biraz daha derinlik ekleme - gölgenin dikey yüksekliğini, aynı zamanda en üst değeri ile değiştirir.

 Kutu gölgesi:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0.2);
& amp;: Hover,
& amp;: Odak,
& amp;: aktif {
  ...
  kutu-gölge:
  0 0.5EM 0.25EM -0.25EM RGBA (0,0,0,0.3);
} 

18. Araç ipuçlarını ekleyin

Kullanıcılarımız için daha fazla netlik eklemek için CSS ile kolayca araç ipucu ekleyebiliriz. Yapacağımız ilk şey, araç ipucu değerini listeye eklemektir. Gerekirse boşlukların kullanımına izin vermek için alıntılara yazdığınızdan emin olun.

 $ icon listesi: (
  Vimeo "Vimeo" "\ F27D" # 1AB7EA,
  Twitter "Twitter" "\ F099" # 1DA1F2,
  ...
  Github "Github" "\ F113" # 333,
  RSS "RSS" "\ F09E" # F26522,
); 

19. @Aach döngüsünü değiştirin

Listemize eklenmesi nedeniyle, araç ipucu değerini ('$ adı') dahil etmek için '@Each' döngüsünü değiştirmemiz gerekecek. Daha sonra bu ismi, düğmelerinizdeki 'Pseudo'nun Öncesi' unsurunun içeriği olarak verebiliriz.

 @Each $ icon, $ İsim, $ Unicode,
  $ icon-liste içinde $ simge-arka plan {
  ...
  .social__icon - # {$ icon} {
  ...
  & amp; :: önce {
  İçerik: '# {$ Name}';
  }
  }} 

20. Pseudo elemanından önce stil

Şimdi ekranda görüntülenen her bir öğenin adına sahibiz, bir arka plan rengini, dolgu ve diğer şekillendirme elemanları eklemenin yanı sıra, elemanı yerleştirmenin yanı sıra, geçişler için opaklık ve en iyi değerleri değiştirerek ve en iyi değerleri değiştirerek .

 & amp; :: önce {...
  Üst: -3.5EM;
  Opaklık: 0;
  geçiş:
  En iyi 250ms linear, opaklık 150ms lineer 150ms;
}
& amp; Hover, ... {...
  & amp; :: önce {
  Opaklık: 1;
  Üst: -2.5EM; }
} 

21. Pseudo elemanından sonra stil

Kullanacağız Css üçgenler Takım ipuçlarımızın altını oluşturmak için - tekrar geçişler için okuyan elemanı okuyan - opaklığı ve üst değerleri farklı zamanlamalarda geçirerek.

Bir gecikme ekleyerek, solma ve yere doğru hareket eden araç ipucudan oluşan bir animasyon elde ediyoruz.

 & amp; :: {...
  Üst: -1.9EM;
  Opaklık: 0;
  geçiş:
  En iyi 250ms linear, opaklık 150ms lineer 150ms;
}
& amp; Hover, ... {...
  & amp; :: sonra {
  Opaklık: 1;
  Üst: -0.9EM; }
} 

Kodepen öğretici adımları koleksiyonu bulunabilir İşte .

Bu makale başlangıçta Web Designer Magazine Sayı 264'te ortaya çıktı. Buradan satın al .

Daha fazla oku:

• Sass nedir?
• Hakkında bilmediğiniz 8 kodepen özellikleri
• Süper hızlı CSS için 5 ipucu