SASS

CSS ile çok şey yapabilirsiniz - belki de düşündüğünüzden daha fazla - ancak saygın stil tabaka dilinin sınırlamaları vardır. Modern bir web projesinde, NPM modülleri, JavaScript Frameworks, ES6 ve daha fazlası ile, Vanilya CSS yazmak için geri dönmek için biraz anakronistik hissedebilir.

Neyse ki, orada CSS'ye derleyen diğer dilleri kullanmanıza izin veren seçenekler var. 'Ön İşlemciler' olarak adlandırılan bu araçlar, web oluşturma işleminizin içine girer ve seçtiğiniz uzatma dilinden kullanılabilir stil sayfaları oluşturur.

SASS (sözdizimsel olarak müthiş stil sayfaları) bu seçeneklerin en popülerlerinden biridir - rehberimizle daha fazla oku Sass nedir? SASS, sitelerinizin ve uygulamaların daha sürdürülebilir olmasına yardımcı olmak için CSS'de bulunmayan (şu anda) mevcut olmayan birçok değerli yeni dil özelliği ekler. Bunlar, kötüleşen ama aslında oldukça basit olan miks ve kontrol direktifleri gibi şeyler içerir ve bunlara bu eğitimde bakacağız. Bir şeyleri daha basit tutmak istiyorsanız, kullanabilirsiniz. Web Sitesi Oluşturucu .

• CHSS animasyonlarını yeniden oluşturmak için

Aslında, bir .scs dosyası uzantısı kullanan ve .Sass kullanan bir tane olan SASS için iki farklı sözdizim var. Eskiden daha fazla CSS gibi görünüyor (aslında, tüm .css dosyaları geçerli .SCSS dosyalarıdır), ikincisi CSS'nin parantezlerini ve noktalı virgülleri girinti ve yeni hatlar lehine ortadan kaldırır. .SCSS'ye odaklanacağız, ancak seçim sadece kişisel tercih içindir. Sitenizi Yükseltme? Emin ol ağ sağlayıcısı Servis ihtiyacınız olanı yapar ve Bulut depolama Sağ da.

Bu eğitim için dosyaları indirin (Sayı 282)

01. Derleyiciyi ayarlayın

Esas olarak SASS kullanarak bir derleyici gerektirir. Bunu yapmanın en basit yolu komut satırında olurdu. Bunu homebrew kullanarak yapabilirsiniz. SASS derleyicisi birkaç farklı dilde uygulanır ve Homebrew, hızlı olan DART versiyonunu yükleyecektir.

brew install sass/sass/sass

02. Bir Sass dosyası oluşturun

Derleyiciyi eylemde görmek için basit bir SASS dosyası oluşturmayı deneyelim. Sass'daki en basit konseptlerden biri, bir kez belirtilebilecek değişkenlerdir. Dolar önek ve daha sonra kodunuz boyunca kullanılır. Yaratacağız sass-input.scss .

 $ metin rengi: #cccccc;
vücut {
    Renk: $ metin rengi;
} 

03. Komut satırı derleme

Şimdi, .scss dosyasını CSS çıkışına dönüştürmek için komut satırındaki SASS derleyicisini çalıştırabiliriz. Değişkenlerin gittiğini ve tarayıcı tarafından kullanılabilir standart CSS sözdiziminden ayrıldığımız ve sadece tarayıcı tarafından kullanılabilecek standart CSS sözdizimi ile ayrıldığından haberdar olacağız.

 SASS SASS-INPUT.SCSS CSS-çıkış.csss 

04. Yapınızı otomatikleştirin

Bu harika, ama her değişiklik yaptığınızda SASS derleyicisini manuel olarak çalıştırmak istemiyorsunuz. Bir seçenek, bir dizideki dosyalardaki değişiklikleri dinlemek ve çıktıyı otomatik olarak farklı bir dizine (dosya adlarını koruyan) otomatik olarak yeniden derlemektir. Bu aynı zamanda, Kaynak .SCSS dosyanızı yerleşik CSS'nizden ayırmanızı etkili bir şekilde sağlar.

 MKDIR SRC
MKDIR SRC / SASS
mkdir halkı
MKDIR Public / CSS
SASS --WATCH SRC / SASS /: Public / CSS /

05. Sass Styling ile oyna

Şimdi Sass Styling ile oynamak için kullanabileceğimiz basit bir başlangıç ​​sitesine bakalım. Unspilled bir örnek sitesi klonlayarak başlayabiliriz. Dikkat edilmesi gereken kilit şey, HTML sayfamızın SASS hakkında hiçbir şey bilmemesidir. Bir sonraki oluşturacağımız tek bir CSS dosya giriş noktasına sahiptir.

 CD halk
curl -o index.html https: // RAW.
githubusercontent.com/simon-a-j/sass-
öğretici /
Master / Public / Index.HTML 

06. Ana stil sayfası

Styles.css'leri ana CSS giriş noktamız olarak kullanıyoruz, daha sonra diğer modülleri içe aktarmak için kullanacağız. Bu, SASS'u bu dosyayı oluşturmak için söylememiz gerektiği anlamına gelir, bu nedenle SRC / SASS klasörümüzde bir Styles.SCSS dosyası oluşturmamız gerekiyor. Eğer koşuyorsan sass --watch Daha önce olduğu gibi, bu otomatik olarak CSS'ye derlenir. kamu / css Sitenizin klasörünü yenilemek, değişikliklerini gösterecektir. Bazı değişiklikleri yapmayı ve HTML sayfasını tarayıcıya giderken yenilemeyi deneyin.

 // styles.scss
vücut {
  Yazı Tipi-Ailesi: Sans-Serif;
  Metin Hizası: Merkez;
}

07. Renk şemasını yönet

Sass'ın sitenin bir renk şemasını yönetmemize nasıl yardımcı olabileceğine bakalım. Bir web sayfası için beş veya altı renk paleti olması yaygındır. Bunları dışarıya verebiliriz _colours.scss . Alt çizgi öneki, SASS bunu yeni bir HTML dosyasına ('kısmi') derlememeyi söyler. Ancak onu biraz farklı bir şekilde kullanabiliriz.

 // _colours.scss
$ renk-birincil: # 231651;
$ renkli ikincil: # 2374AB;
$ renk ışığı: # d6fff6;
$ Renk-Highlight1: # 4dccbd;
$ Renk-Highlight2: # FF8484;

08. Renk değişkenlerini kullanın

Yeni kurduğumuz bu renk değişkenlerini kullanmak için, SASS'u içeriğini içe aktarmayı söyleyebiliriz. _colours.scss Ana stil sayfamıza. Bunu kullanarak bunu yapıyoruz @ithalat Beyan. Bunu yaptıktan sonra, değişkenlerin çıktı CSS dosyası içinde nasıl çözüldüğüne dikkat edin.

 // styles.scss
@import "_colours.scss";
vücut {
  Yazı Tipi-Ailesi: Sans-Serif;
  Metin Hizası: Merkez;
  Arka plan: Doğrusal gradyan (155deg,
$ renk-birincil 70%, $ renk-ikincil
% 70);
  Renk: $ renk ışığı;
  Min Yüksekliği: 100vh;
}
h1 {
    Renk: $ Renk-Highlight1;
}
h2 {
  Renk: $ Renk-Highlight2;
}

09. Yuva stilleri

SASS'in bir başka kullanışlı özelliği, stilleri yuva etme yeteneğidir. Yani, yalnızca bir ebeveyn öğesi içinde bu öğenin gerçekleşmesi durumunda uygulanan bir öğe için bir stil belirleyebilirsiniz. Bunu, başlıkta veya vücutta görünüp görünmeyeceğine bağlı olarak bağlantılarımızı ayarlamak için kullanalım.

 a {
  Renk: $ renk sekonder;
}
.profile-header {
  a {
    Yazı tipi boyutu: 16px;
    Marj-sol: 10px;
    Marj-sağ: 10px;
    Dolgu: 10px;
    Sınır-yarıçap: 5px;
    Renk: $ renk ışığı;
    Arka plan rengi: $ renk sekonder;
  }
}

10. Duyarlı ızgara yapın

Şimdi içeriğimizi duyarlı bir ızgara biçiminde düzenleyelim. SASS, bunu yönetmek için önemli ölçüde daha kolay hale getirmek için birkaç özelliğe sahiptir. Kırılmalarımızı belirtmek için değişkenleri kullanmanın yanı sıra, yuvalayabiliriz @media Diğer stiller içindeki sorgular, ekran boyutuna özgü davranışları çok daha okunabilir hale getirir.

 $ kesme noktası: 800px;
.profile-body {
  Ekran: Flex;
  Hizalama-Öğeler: Streç;
  haklı olarak içeriği: boşluk;
  Marj-Top: 32px;
  Marj-sol: 10vw;
  Marj-sağ: 10vw;
  @Media ekranı ve (maksimum genişlik:
$ breakpoint) {
      Esnek Yön: Sütun;
  }
}
.Profile-bölüm {
  arka plan rengi: $ renk vurgu1;
  Renk: $ Renkli-Birincil;
  Marj: 16px;
  Sınır-yarıçapı: 10px;
  Genişlik: 340px;
  .Profile-Content {
    Dolgu: 20px;
  }
  @Media ekranı ve (maksimum genişlik:
$ breakpoint) {
    Genişlik:% 100;
  }
}

11. Mixins'i tanıtın

Mixins, yeniden kullanılabilir stil sayfası işlevlerini tanımlamanın bir yolu olarak düşünebileceğiniz bir başka güçlü SASS özelliğidir. Bir karışım bir kez tanımlanır, parametreler alabilir ve daha sonra SASS kodunuzda herhangi bir yere çağrılabilir. Bunun için bir kullanım durumu, satıcı ön eki işlemektir. Bir CSS'nin eski tarayıcılarda çalışmasını istiyorsak, bu bir -Webkit Örneğin, krom ve safari önek. Bizim için bununla ilgilenen bir karışım tanımlayalım.

12. Mixins ve Değişkenler

Ayrıca, tanımladığımız bazı değişkenlerle birlikte, sayfanın çeşitli bölümlerinin daha zarif bir şekilde işlenmesi için birden fazla parametre ile bir karışım kullanabiliriz. Ön plan ve arka plan rengini tanımlayan bir karışım oluşturursak, bu, stil değişkenlerinin sonlu bir listesinden farklı bölümler için görünüşleri seçmemizi sağlayacaktır.

 $ Style1: (Ön Plan: $ Renkli Işık,
arka plan: $ renk sekonder);
$ Style2: (Ön Plan: $ Renkli Birincil,
arka plan: $ renk vurgu1);
$ Style3: (Ön plan: $ Renk-İlköğretim,
arka plan: $ renk vurgulama2);
@mixin içeriği tarzı ($ ön plan,
$ arka plan) {
  Renk: $ ön plan;
  Arka plan rengi: $ arka plan;
} 

13. Yeni Mixin'inizi kullanın

 .profile-başlığı {
  a {
    @include içerik tarzı ($ stil1 ...);
    // ... ...
  }
}
.Profile-bölüm {
    @ Include İçerik tarzı ($ stil2 ...);
  // ... ...
}

14. Mirasayı anlayın

Sass'ın bir başka çok güçlü özelliği kalıtımdır. Şu anda sayfamızdaki bağlantılar için iki farklı stilimiz var. CSS'yi kopyalamak ve yapıştırmak yerine, her ikisi de ortak stilleri kullanmak istiyorsak, neden her ikisi de tarafından uzatılabilen, '%' ile gösterilen bir yer tutucu sınıfı kullanmıyorsak, stillerini miras almalarına izin veriyor?

% Link-Shared {
  Yazı tipi boyutu: 16px;
  Marj-sol: 10px;
  Marj-sağ: 10px;
  Dolgu: 10px;
  Sınır-yarıçapı: 10px;
}

15. Sınıfları uzatın

Şimdi, sitemiz boyunca bağlantı stilini tanımlamak için link paylaşılan sınıfı genişletebiliriz. Bu oldukça zarif görünmeye başlıyor. Bir bağlantının genellikle bir kez nasıl göründüğünü, boyunca tekrar kullanmayı ve bir karışım kullanarak her bağlantı için renkleri belirleriz.

 .profile-başlığı {
  a {
    @ExtenD% link ile paylaşılan;
    @include içerik tarzı ($ stil1 ...);
  }
}
a {
  @ExtenD% link ile paylaşılan;
  @include içerik tarzı ($ stil3 ...);
}

16. Temayı değiştirin

Şimdi, SASS'un sitemizin temasını değiştirmek için ne kadar kolay olduğunu bir göz atalım. Mevcut renkler mükemmel olmayabilir. Renk değişkenlerini yalnızca değiştiremeyiz, ancak birincil olarak seçtiğimiz birincil renkle eşleşen renkler oluşturan bazı SASS işlevlerini de kullanabiliriz.

 // _colours.scss
$ renk-birincil: # 2E1F27;
$ renk sekonder: Lighten ($ renk-birincil,
% 25);
$ renk ışığı: Lighten ($ renk-birincil,
% 75);
$ Renk-Highlight1:
hafifletmek (tamamlayıcı ($ renk-birincil),% 50);
$ Renk-Highlight2:
hafifletmek (tamamlayıcı ($ renk sekonder),% 50);

17. Yeni bir renk seti seçin

Şimdi, site için tüm renk şemasını sadece yeni bir renk-birincil değeri belirterek değiştirebiliriz. _colours.scss dosya. Alternatif renklerle deneme yaparak bir deneyin. Ayrıca sass randomites (ancak bunun, sitenizin yapıldığı noktaya atıfta bulunduğunu hatırlayın, çalışma zamanı değil). Temada diğer renkleri birincilden türetmek için kullandığımız mantığı ayarlamayı da deneyebilirsiniz.

 $ Kırmızı: Rastgele (255);
$ yeşil: rastgele (255);
$ mavi: rastgele (255);
$ renk-birincil: RGB ($ kırmızı, $ yeşil, $ mavi); 

18. Kütüphaneler kullanın

Sass'ın modülü sistemi, üçüncü taraf kütüphanelerini minimum çabayla kullanmanın ve büyük çalışma zamanı dosyalarını son kullanıcılarınıza göndermeden kullanmanın çok basit olmasını sağlar. Sayfamızdaki nesneler için eğimli kenarlar oluşturmak için kullanabileceğimiz açılı kenarları kütüphanesini deneyelim.

 Git Clone https://github.com/josephfusco/
açılı kenarlar.git src / sass / açılı kenarlar

19. Açılı kenarlar karıştırılır

Açılı kenarları, renk şemumuz için yaptığımız gibi aynı şekilde ithal edebiliriz. Daha sonra kütüphaneyle birlikte gelen bir karışımla kullanılabilir. Profil bölüm sınıfımızda deneyelim.

 @import "açılı kenarlar / _angled-edges.scss";
.Profile-bölüm {
  @include açılı kenarı ("dış alt",
"Daha düşük sağ", $ renk vurgu1);
  @include açılı kenarı ("dış",
"Sağ üst", $ renk vurgu1);
  Marj: 120px 16px 120px 16px;
  // ... ...
}

20. Çıktı Biçimlendirme

Çıkış Sass'lara bakarak bitirelim. CSS dosyalarınızı değişiklik yaptıkça takip ediyorsanız, oldukça okunabilir olduklarını fark edeceksiniz. Bununla birlikte, daha az insan tarafından okunabilen, ancak yine de göndermeye hazır olan SASS Yapı Yoğunlaştırılmış CSS'ye de sahip olabilirsiniz. Bunu kullanarak bunu yapabilirsiniz. --style komut satırı bayrağı.

 SASS SRC / SASS /: Public / CSS / --style
sıkıştırılmış 

21. daha fazla sass

Şimdi SASS'ın birkaç özelliğini araştırdık ve sitemiz çok kötü görünmüyor. Umarım, Sass'ın daha korunabilir stil sayfaları geliştirmemize nasıl yardımcı olduğunu görmeye başlıyorsunuz. Dilin her özelliğini kapsamadık - onunla birlikte gönderilen daha birçok faydalı işlev var ve kontrol direktifleri gibi gelişmiş özellikler (örneğin @Eğer , @için ve @süre ) Genellikle karmaşık kütüphane işlevlerini oluşturmak için kullanılır. Genel olarak, umudunun tamamen stilistik bir tercih olduğunu unutmayın. İsterseniz saf CSS ile gördüğümüz her şeyi yapabilirsiniz, ancak işiniz daha karmaşık hale geldiğinden kesinlikle ön işleme hakkında düşünmelisiniz.

Bu makale başlangıçta 282'de yayınlandı. Web tasarımcısı . Satın almak Sayı 282 veya abone olun .

Daha fazla oku:

• 10 Şaşırtıcı Yeni CSS Teknolojileri
• Bugün denemek için 3 parlak yeni CSS özellikleri
• Büyük paralaks kaydırma web siteleri