O şeylerden biri CSS Varsayılan olarak, kodu mantıksal bir şekilde yeniden kullanabileceğimiz programlama tarzı yapıların kullanımına sahip değildir, standart bir şekilde elde edebileceğimiz en fazla şey, etkilenmek istediğimiz etiketlerin içinde sınıflar ve gruplar oluşturmaktır. bu değişiklikler.
Bu yaklaşım, günün sonunda uzun stil sayfalarıyla sonuçlanacağımız anlamına gelir ve bu sonuç, Daha az.js, söz konusu yapraklara ulaşma şeklimiz değişirse, bu karışımlar ve yapıları manuel olarak geliştirmek zorunda kalmamak için bazı bileşenleri bildirip kullanabileceğimiz kalıtım.
Gereksinimler1- Bu öğreticiyi yürütmek için önceden bazı şeylere ihtiyacımız olacak, dosyalarımızı depolayabileceğimiz bir klasöre ihtiyacımız var. .az Y .css, gerektiğinde değişiklik yapabilmek için üzerinde izinlerimizin olması gerekir.
2- İşlevsel bir kuruluma sahip olmalıyız Daha az.jsolduğu gibi, tüm önkoşulları gibi Node.js Y npm, böylece oluşturulan stil sayfalarımızı derleyebiliriz.
3- Son olarak, kodu yapabilmek için bir metin düzenleyiciye de ihtiyacımız olacak, kullanabiliriz Yüce metin o NotePad ++, klasik not defteri de bizim için çalışsa da, bu tamamen kod veya gelişmiş işlevler konusunda yardım isteyip istemediğimize bağlıdır.
Bir Mixin ile CSS özelliklerini ayarlayınBilmemiz gereken ilk şeylerden biri karışımlar, özellikleri belirlememize yardımcı olan yöntemler olmalarıdır. CSS projemiz için, kodu yeniden kullanmamıza ve daha tutarlı stiller elde etmemize yardımcı olacak şekilde. Bir Mixin'in özelliği, kodumuzu derlerken Daha az Bu, bir Mixins stil sayfası oluşturulmadığı anlamında dikkate alınmaz, bu, onları tanımlarken parantezler ekleyerek elde edilir, bir Mixin'imiz olduğunda kaynak dosyasını içe aktarmalıyız ve bu şekilde değerleri basitçe alınır. sayfamıza dahil edeceğimiz ana sayfamıza aktarılır.
İlkimizi yaratmak karıştırma
bir oluşturalım karıştırma sahiplik kurmamızı sağlayan CSS bir elemanın kenarlarını yuvarlamak için HTML, bunun için aşağıdaki adımları izlemeliyiz:
1- Proje klasörümüzde adında bir dosya oluşturacağız. mixins.less, ve içine aşağıdaki içeriği yerleştireceğiz:
.rounded-edges () {border-radius: 7px; }2- Şimdi adında bir dosya oluşturacağız. proje.siz, sayfamızın farklı stillerinin uygulanacağı yolu burada belirleyeceğiz. HTML, birlikte çalışmaya alışmamız için Daha az birkaç kural oluşturacağız CSS nasıl olduğunu görebilmemiz için karışımlarBu dosyaya koymamız gereken kodu görelim.
@import "mixins.less"; @ başlık-arka plan rengi: mavi; @ içerik-arka plan rengi: yeşil; @ altbilgi-arka plan rengi: kırmızı; başlık {.yuvarlak kenarlar (); background-color: @ header-background-color; renk: kontrast (@ başlık-arka plan rengi); } p {.yuvarlak kenarlar (); arka plan rengi: @ içerik arka plan rengi; renk: kontrast (@ içerik-arka plan rengi); } altbilgi {.yuvarlak kenarlar (); arka plan rengi: @ altbilgi-arka plan rengi; renk: kontrast (@ altbilgi-arka plan rengi); }Gördüğümüz gibi, bir önceki adımda oluşturduğumuz dosyayı import ederek başlıyoruz, daha sonra değer olarak renk verdiğimiz 3 değişkeni oluşturuyoruz, son olarak elementler için sınıfları oluşturmaya başlıyoruz. HTML, yaptığımız ilk şey fonksiyonumuzu çağırmak Yuvarlak kenarlar()ve sonra değişkenlerle birlikte öğe renklerini atarız.
3- Bu adımda dosyayı oluşturacağız. HTML, aşağıdaki gibi bir yapıya sahip olduğu sürece istediğimizi adlandırabiliriz:
Daha Az La cabecera ile karışımlarGördüğümüz gibi, dosyamızın eklenmesini basitçe yaptık. .az aracı içeren .js olarak biz derleme yapmak zorunda kalmamak için bu seçeneği seçtik ancak bunun üretimde uygulanmaması gerektiğini unutmamalıyız. vücudunda HTML Stillerin uygulamasını görmek için CSS'de tanımladığımız farklı öğeleri oluşturuyoruz.İçerik
altbilgi
4- Son olarak, sonucu görmek istiyorsak, belgemizi aşağıdaki gibi bir tarayıcıda açmanız yeterlidir. Firefox ve böylece her şeyin nasıl göründüğünü görebiliriz, aşağıdaki resimde elimizde ne olduğunu görelim:
Biraz daha ileri gidersek ve tarayıcının yorumladığı kaynak kodu görürsek, farklı değişkenlerin ve karıştırma uygulandı, aslında kodla değiştirildi CSS, yani özelliği yalnızca bir kez yazmış olsak bile Daha az eşleşmenin karşılık geldiği yere yerleştirir, görelim:
Miras bizim tarzlarımız içinde
Miraslarla çalışmak bize yardımcı olan bir şeydir ve bunun nedeni, bazı özellikleri alt veya içerdiği öğelere aktaran üstün öğeler oluşturabilmemizdir, yani istediğimiz öğelerde tekrarlamak zorunda kalmayacağımız ortak özellikler vardır. onlara sahip olmak.
Her zaman olduğu gibi, kodu tekrar etmemenin amacı, bize iş ve zaman kazandırmanın yanı sıra, kaynakların tutarlılığı ve merkezileştirilmesi sayesinde hataları azaltmak ve kodumuzun sürdürülebilirliğini artırmaktır.
Kalıtımla çalışmanın en basit ama etkili yollarından biri iç içe öğelerdir, diyelim ki bir bölümümüz var. HTML ve eğer kullanırsak, içinde birkaç elementimiz olacak. CSS Klasik desek, o bölümün tüm unsurlarının bazı özellikleri var ama bunlar farklı, her stil için en az bir satır yapmak gerekecek, bakalım ne demek istiyoruz:
bölüm öğesi1 {içerik1: xx; } bölüm öğesi2 {içerik2: zz; }Gördüğümüz gibi, kalıtım ve yuvalama kullanırsak, ihtiyacımız olandan daha fazla kod yaparız. Daha az aşağıdaki gibi bir şey elde edebiliriz:
bölüm {eleman1 {içerik1: xx; } item2 {content2: zz; }}Gördüğümüz gibi, sadece daha az yazmıyoruz, aynı zamanda elde etmek istediğimiz şeyin temsili de çok daha mantıklı, bu da stillerimizde kullanacağımız öğeleri anlamamıza ve düzgün bir şekilde ayırmamıza yardımcı oluyor.
oluşturma iç içe stiller
Şimdi bir önceki noktada anlattıklarımızı uygulayacağız, bir dosya oluşturmalıyız. .az işi kurtarmak ve daha mantıklı hale getirmek için iç içe bir stil oluşturduğumuz yer. Bu görevi başarmak için aşağıdaki adımları izlemeliyiz:
1- Bir dosya oluşturalım.az ne arayabiliriz miras.less, burada iç içe stilleri oluşturacağız, bunu anlamak için yerleştireceğimiz kodu göreceğiz ve böylece konsept bize daha iyi gelecek.
bölüm {h1 {yazı tipi boyutu: 4em;} p {dolgu: 0 5px;}}Element için bir stil oluşturduğumuzu görüyoruz. Bölüm, ve bu her şey h1 veya P bu konteyner elemanı içinde, iç içe geçirdiğimiz yerleşik kurallarla çalışması gerekir.
2- Şimdi dosyamızı oluşturmalıyız HTML önceki alıştırmaya çok benzeyecek, eklenecek dosyaların adları ve içindeki yapı ne gibi değişiklikler olacak? vücut, ancak soyut bir şekilde görürsek aynı şeyden bahsediyoruz, koda bakalım.
Daha Az MirasBasitçe dosyamızı ekleyerek gördüğümüz gibi Daha az gerekli stilleri oluşturacağız, tarayıcıda nasıl göründüğünü görürsek aşağıdaki gibi bir şey elde edeceğiz:içeriğimiz
Ancak, ne olduğunu fark edersek CSS Yorumlandığında veya derlendiğinde oluşturduğumuz iç içe formun saygı görmediğini göreceğiz ancak derleyici bu iç içe olmayan formu doğrudan yaptığı için bu şekilde olmasından endişe etmemize gerek yok bakalım ne olacak. tarayıcımızın gördüğü kod şöyle görünür:
Bununla, gördüğümüz gibi bu öğreticiyi bitirebiliriz. Daha az sadece yazmak değil CSS farklı bir şekilde, bu farklılıkları faydalı kılmak, zamandan tasarruf etmemize, uygulamaları geliştirme ekibimiz için daha kolay hale getirmemize ve daha mantıklı düşünerek ve bileşenleri yeniden kullanarak emekten tasarruf etmemize neden oluyor. Tüm bunların bizim için en anlamlı yolu, bu çalışma şekline alışabilmemiz için bu örnekleri pratik ve gerçek durumlarda uygulamaya ve uygulamaya devam etmemizdir.
Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.
