SASS–Mixin & Extend

SASS-Syntactically Awesome StyleSheets

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Mixin(fonksiyon olarak düşünebilirsiniz) tanımlama ve kullanma, Extend(genişletme) gibi konulara değiniyor olacağım.

Mixin kavramında; bir fonksiyon gibi yazdığımız bir blok stil’i “@include” ifadesi ile çağırarak istediğimiz yere uygulanmasını sağlayabiliyoruz. Hatta oluşturduğumuz mixin için parametre tanımlayarak, parametrik olmasını da sağlayabiliyoruz.

Extend kavramında ise; stil özelliklerini inherit(miras) alabilmeyi sağlıyoruz. “@Extend” anahtar ifadesi ile extend edilen stiller bir araya gelerek css dosyada tanımlanıyorlar. Basitçe örnek vermek gerekirse; aşağıdaki gibi bir css dosya oluşturmak istiyorsak;

CSS:

.button, .button1, .button2 {
    /* button, button1, button2 için ortak stiller */
  color: #ddd;
  font-size: 12pt; }

.button1 {
    /* button1 için özelleştirilmiş stiller */
  border: 1px solid green; }

.button2 {
    /* button2 için özelleştirilmiş stiller */
  border: 1px solid black; }

Aşağıdaki gibi SASS dosyamızı kodlamamız ve .button1 ve .button2 isimli stilleri .button stilinden extend etmeli ve farklı özelliklerini yine içine tanımlamalıyız.

SCSS:

.button{
    color: #ddd;
    font-size: 12pt;
}

.button1
{
    @extend .button;
    border: 1px solid green;
}

.button2
{
    @extend .button;
    border: 1px solid black;
}

Böylece CSS kodundaki ilk stil’i (“.button, .button1, .button2”) elde etmiş oluruz. Özet olarak; @extend anahtarı kullanılan stiller @extend anahtarı ile kullanılan stil’le birleştirilerek css dosyada tanımlanırlar.

 

kmb-udemy-reklam

Reklamlar

YazilimDevi.Com Profesyonel Eğitim Serisine Başlıyor !

Gerçekten C# öğrenmek ister misiniz?

 
Engin Demiroğ’dan C#’ı sıfırdan ama profesyonel bir yaklaşımla, bildiğiniz konularda bile “evet aslında halen öğrenecek şeyler varmış” dedirtecek detaylarla öğrenmek ister misiniz?
 
Bu eğitimde;
 
Kodu nasıl, ne için yazacağınızı öğreneceksiniz. Ezberci, buton altı, syntax bazlı kodlamadan uzak duracaksınız.
 
Asp.Net, Mobil veya Windows programlamanın bizim için aslında kullanıcı arayüzü kodlamaktan ileri gitmeyeceğini öğreneceksiniz. Böylece asıl önemli olanın arka planı(backend) sağlam kodlamak olduğunu göreceksiniz. Bu eğitim arka planı kodlamaya odaklanır.
 
Bugün yazdığınız kodu, uygulama yaşam döngüsünün her katmanında tekrar tekrar nasıl kullanacağınızı öğreneceksiniz.
 
Her konuyu gerçek hayat örnekleri ile detaylandıracaksınız.
 
Bu eğitim sonunda aslında işinizin bitmediğini, katetmeniz gereken bir yol olduğunu göreceksiniz. Fakat bu yolda doğru ilerlemeyi öğreneceksiniz.
 
Eğitim içeriği:
1.Saat: C# ve .Net Framework 4.0 Yeteneklerine Genel Bakış, Hedefler
2.Saat: Karar Yapıları ve Döngüler.
3.Saat: Değer(Struct,Enum) ve Referans(Class) Tipleri, Tip Dönüşümleri ve Bilinmeyen Yönleri
4.Saat: Metodlar ve C# 4.0,5.0 ile gelen mükemmel deneyimler
5.Saat: Temel ve İleri Hata Yakalama Teknikleri
6.Saat: Diziler, Koleksiyonlar
7.Saat: Generics
8.Saat:  OOP Teknikleri – Encapsulation,Inheritance,Interface,Abstraction,Polymorphism
9.Saat: Birkaç GoF Design Pattern ile OOP 1
10.Saat: Birkaç GoF Design Pattern ile OOP 2
11.Saat: Delegates and Events
12.Saat: LINQ
13.Saat: Reflection and Attribute
14.Saat: Asynchronous Programming
15.Saat: C# Memory Management
16.Saat: Çok Katmanlı Mimari Demosu
 
Eğitim Tarihi: 7-8 Nisan 2012 Saat: 09:00/18:00 arası Toplam 16 Saat.
Eğitim Ücreti: 300 TL + KDV
Eğitim Yeri: Ankara
Sorularınız için: info@yazilimdevi.com
 
Eğitime Nasıl Katılabilirsiniz?
Eğitim sınıfı 12 kişiyi geçmeyecekmiş. Bu açıdan info@yazilimdevi.com adresine eğitime katılmak istediğinizi belirten mail yollamanız gerekiyor. Adınızı ve soyadınızı ekleyiniz.
Sınıfta yer olmasına bağlı olarak olumlu veya olumsuz maili aldıktan sonra, size gönderilen banka hesabına 300 TL + KDV yatırmanızı isteyecekler.
 
Ayrıntılı bilgi ve kaynak için tıklayınız.