SASS ile Modern CSS

Dil: Almanca

Sass ile modern CSS - Uygulamalı Eğitim

Her zaman CSS'de değişkenlerin ve döngülerin olmamasından rahatsız mı oldun? Bu artık bir son buluyor! Sass gibi CSS ön işleyicileri tam da bu tür özellikleri sunar. CSS kodunu daha verimli bir şekilde oluşturabilirsiniz. Bu eğitimde Sass ve popüler Compass çerçevesine de değinilecek ve Sass'ın kullanımını daha da geliştiren Compass'a dikkat çekilecek. Sass ve Compass'in sunduğu olanakları üç saat içinde öğrenin.

Bu üç saatlik video eğitimi ve web geliştirici Daniel Koch ile Sass ustası olun.
Değişkenleri tanımla, kendi mixin'lerini oluştur, renkler ve sayılarla deneyler yap ve son dokunuş olarak Compass'ı kullan.
CSS üretmeyi verimli bir şekilde öğren ve yeni bilgilerini gelecekteki projelerde uygula.

Adım adım profesyonel CSS gelişimine. Eğer CSS ise, o zaman modern ve Sass ile – Daniel Koch sana gösterir!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

DETAYLAR

Kullanıma uygun:
İçerik: 3 h Video Eğitimi
Lisans: özel ve ticari Kullanım hakları

Kategoriler

Web tasarımı, CMS ve geliştirme

Sevgiyle oluşturulmuştur:

Daniel Koch

Sass ile modern CSS

Ücretsiz

Sass ile modern CSS - 01 Bir Giriş

CSS derleme dilleri sayesinde CSS daha etkili bir şekilde yazılabilir. Bu derleme dilleri nedir, hangi türler bulunur ve neden Sass tercih edildiği bu video ile gösterilmektedir.

Sass ile modern CSS - 02 Kurulum

Sass kullanılmadan önce, onu yüklemek gereklidir. Ve bunun için bir gereklilik olan Ruby'dir. Her ikisi de - yani Ruby ve Sass'ın kurulumu - bu videoda gösterilmektedir. Sonrasında Sass yüklemesinin gerçekten başarılı olup olmadığını hemen test edebilirsiniz.

Sass ile modern CSS – 03 Ustalıkla Derleme

Sass dosyaları, gerçekten kullanılabilir hale gelmeleri için CSS dosyalarına dönüştürülmelidir. Watch komutu sayesinde tek tek dosyalardaki veya bütün klasörlerdeki değişiklikleri çok kolay bir şekilde tespit edebilirsiniz. Bu kadar.

Sass ile modern CSS – 04 dosyayı birleştirin

@import ile SCSS dosyaları içe aktarılıp bir araya getirilebilir. Dosya adının başına alt çizgi eklemekle ilgili olan her şey, bu videonun bir yönüdür.

Sass ile modern CSS - 05 değişken tanımlama ve kullanma

Sass ile modern CSS - 05 değişken tanımlamak ve kullanmak

Sass'ta değişkenlerin tanımlanma imkanı bulunmaktadır. Bu konsept geleneksel CSS'te mevcut olmasa da, Sass'ta stillerin etkili bir şekilde geliştirilmesi için harika bir araçtır.

Sass ile modern CSS – 06 Yerleşik ilkesi

Sass ile modern CSS – 06 Yuva Prensibi

Yerleştirme sayesinde, Sass sözdizimini CSS'de olduğundan daha sade tutmak mümkün olur. Ayrıca, iç içe geçme size kodu çok daha anlaşılır bir şekilde yazmanıza yardımcı olur.

Sass ile modern CSS - 07 Extend ile başarılı miras alım

Sass ile modern CSS - 07 Extend ile ustalıkla miras alma

@extend kullanımı, CSS özelliklerinin bir selektörden diğerine geçmesine olanak tanır. Bu da Sass dosyalarını sade tutmaya yardımcı olur.

Sass ile modern CSS - 08 modül ve yer tutucu seçicileri ile

Sass ile modern CSS - 08 yer tutucu seçicilerle modül

Yer tutucu seçici modüllerin tanımlanmasını sağlar. Bu modülerleştirme, Sass sözdiziminin farklı yerlerde dahil edilebilen mantıklı bloklara bölünmesine izin verir.

Sass ile modern CSS – 09 mixins tanımlamak

Sass ile modern CSS - 09 Mixin tanımlama

Mixinler, örneğin iş akışlarını büyük ölçüde basitleştirmenize olanak tanıyan işlevlerdir. Bu videoda, kendi mixinlerinizi nasıl tanımlayıp sonunda nasıl uygulayabileceğinizi gösterilmektedir.

Sass ile modern CSS - 10 Ebeveyn Eleman Seçici

Sass ile modern CSS - 10 Baba öğe seçicisi

Bu videoda bahsedilen seçici ile bir elemanın ebeveyn elemanına erişebilirsiniz. Bu seçici CSS'te bilindiği gibi yoktur, bu nedenle büyük bir değer sunar.

Sass ile modern CSS - 11 For döngüsüyle otomasyon

Sass ile Modern CSS - 11 Döngülerle Otomasyon

Sass, for döngülerinin kullanılmasını sağlar. Bu Sass'ta oldukça kolay çalışır ve örneğin kendi ızgara sistemini tanımlamak için kullanılabilir.

Sass ile modern CSS - 12 Each ve While Döngüsü

For- döngülerinin yanı sıra Sass'ta Each- ve While-döngüleri de kullanılabilir. Bu nasıl otomasyon için kullanılabilir, bu video göstermektedir.

Sass ile modern CSS - if ve else ile 13 durum kararı

Sass ile modern CSS - if ve else ile 13 karar

PHP ve JavaScript gibi dillerde, if ve else kullanarak farklı olaylara tepki verebilme imkanı bulunmaktadır. Bu tarz bir özellik gerçekten Sass'ta da bulunmaktadır. Bunun nasıl kullanılabileceği, bu video'da gösterilmektedir.

Sass ile modern CSS - 14 Matematik Operatörü

Sass'ta hesap yapabilirsiniz. Bu, yazı puntolarının tanımı açısından özellikle pratiktir. Ancak ilgili operatörler sayesinde kendi özelleştirilmiş ızgara sistemini de oluşturabilirsiniz.

Sass ile Modern CSS - 15 Renk Oyunu

Tabii ki Sass'ta renkler tanımlanabilir. Ancak Sass, bu alanda geleneksel CSS'den çok daha ileri gider. İlgili fonksiyonlar sayesinde renkler örneğin çok daha kolay bir şekilde manipüle edilebilir.

Sass ile modern CSS – 16 Compass

Compass Framework, Sass'ın olanaklarını çok daha fazla genişletir. Bu ilk video, Compass'ı nasıl kurabileceğinizi ve kullanabileceğinizi göstermektedir.

Sass ile modern CSS - 17 Compass ve CSS3.

Compass projesinin web sitesi, bu çerçeve ile çalışma konusunda merkezi bilgi kaynağıdır. CSS3 özellikleri üzerinden Compass'ın belgeleriyle nasıl çalışabileceğinizi göstereceğim.

Sass ile modern CSS - 18 Bullet eylem Compass'ta ve Susy'ye bir göz atın.

Sass ile modern CSS - 18 Bullet eyleminde Compass ve Susy'ye bir bakış.

Bir örnek, Compass ile nasıl kolaylıkla uygulanabileceğini gösteriyor. Bu serinin sonunda bir alternatif Sass çerçevesine de bir göz atılacak. Susy, ince bir Izgara-Sistemi sunuyor.

İçerik detayları

CSS'de verimli - Sass ile başlam: Uygulama öğreticisine başla

Sass, CSS geliştirmeyi devrim yarattı, çünkü artık CSS kodunu etkili bir şekilde yazmak mümkün. 18 dersle 3 saatlik derin bir dalışla Sass ve Sass çatısı Compass hakkında önemli her şeyi öğreneceksiniz.

Sass geliştirme ortamının kurulumu

CSS öğreticisi'nda Sass'e giriş yapmadan önce kurulum yapmanız gerekmektedir. Ancak endişelenmeyin - kurulum çok kolaydır. Ruby ve birkaç komut satırı komutu yeterli olacaktır ve artık gururla Sass geliştirme ortamının sahibisiniz. Daha önce Sass kurulumundan çekinenler için adım adım kurulum yapılacaktır. İlk test, hangi Sass sürümünün yüklendiğini gösterecektir.

Tiptik bir proje yapısı ile ilk adımlar

Sonrasında ilk adımlar geliyor: Sass ile başlayın! Söz dizimiyle ilk bakıştan sonra temel dil özellikleri gelir. Değişkenleri öğrenir, bir tipik proje yapısı görür ve Sass'ta hızla kendinizi bulursunuz.

Geliştirme: Döngüler ve If-Ifadeleri

Bu hazırlıklardan sonra, profesyonel geliştirme başlar: Sass'i özel kılan şeyler, hemen hemen JavaScript gibi gerçek betik dillerini anımsatan unsurlardır. Sass'te de döngüler tanımlanabilir ve If-Ifadeleri kullanılabilir. Bunlar, aslında Sass'ta mixinlerin tanımlanması için temel koşullardır. Bunlar, Sass ile çalışmayı, nihayetinde yani CSS ile çalışmayı önemli ölçüde kolaylaştıran güçlü fonksiyonlardır.

Compass: CSS ile çalışmayı basitleştirir

Bu eğitimin taçlandırma noktası Compass. Bu, Sass geliştirmeyi bambaşka bir seviyeye taşır, çünkü bu Sass çatısı, CSS ile çalışmayı önemli ölçüde kolaylaştıran sayısız araç ve fonksiyon sunar.

CSS ve Sass öğreticisinde neler öğreneceksiniz?

Sass fonksiyonlarını adım adım öğrenecek, girişten profesyonel araçlara kadar Compass ile çalışmayı öğreneceksiniz. Bu sayede mevcut olanı elde edecek ve bilginizi hemen uygulayabileceksiniz. CSS yazmak hiç bu kadar verimli olmamıştı!