Sass Pratik Kullanımı
Sass , Söz Dizimi İyi A Stil Sayfaları'nın kısaltmasıdır. Sass ve temel olarak CSS'ye daha esnek stiller yazmamıza yardımcı olan bir uzantısıdır. Anlaşılması ve bakımı daha kolay, daha büyük ve karmaşık stil sayfalarını daha net yapmamıza yardımcı oluyor. Değişkenler, mixins, yuvalama gibi özellikler sayesinde kod daha organize, böylece daha hızlı çalışmamızı sağlıyoruz.
-
Hammer
-
CodeKit
-
Compass
-
Koala
İleriye gitmeden önce, sass'ın iki sözdizimi ile karıştırılmadığından emin olmak istiyoruz . Bunlar, kodu yazmak için iki farklı yoldan ibarettir. Her ikisi de aynı çıktıyı üretir. Tavsiye ediyoruz ve bu makalede .scss sözdizimini kullanacağız.
Değişkenler
Değişkenler güçlüdür çünkü kodları hızlı bir şekilde değiştirmenize izin verirler. Bir değişkeni tanımlarken belirli bir değeri depolarız, değişkenler için kabul edilebilir değerler sayıları, dizeleri, renkleri, boşlukları, listeleri ve haritaları içerir.
Sass'ta bir değişkeni ilan etmek için, $ 'yi takip ederek değişken adını, bu durumda mavi, bir iki nokta üst üste ve ardından bu değişkenin değerini izleyebilirsiniz.
Değişkenleri hareket halinde görelim:
Bu, değişkenleri kullanmak için basit bir yaklaşım. Değişkenlerle daha gelişmiş şeyler yapabilirsiniz, ancak bu öğreticide bunu kapsamayacaktır.
Yuvalama
Sass, CSS kurallarının birbiri içine yerleştirilmesini sağlar. Yuvalanma, CSS'nizi düzenlemek ve yapılandırmak için mükemmel bir yoldur ve gereksiz yere tekrar etmenizi önler. Bu nedenle, bu özelliğin ne kadar güçlü olduğunu gösteren bir örnek görebilirsiniz:
Tavsiyemiz dörtten fazla seviyenin yuvalanmaması, kodun karışıklığa neden olabileceği ve sorunlara neden olabileceği için basit ve temiz tutun.
Devralma Uzatın
Kalıtım, kurnazın en kullanışlı özelliklerinden biridir ve kullanımı genişleterek, CSS özelliklerinin kümelerini bir diğerinden paylaşalım. Benzer şekilde şekillendirilmiş unsurlara ihtiyaç duyduğumuzda uzatma kullanılmalı ve yine de bazı ayrıntılar farklıdır. Örneğin, iki düğme yapalım, birincil ve ikincil düğmeler.
Sass aynı bildirimleri tekrar etmek yerine seçicileri birleştirdi, böylece bize değerli belleğimizden tasarruf sağladı.
Katmalar
Mixins, diğer harika bir özelliğidir. Temel olarak, bir mixin, web sitemiz için yeniden kullanmak istediğimiz CSS bildirimleri grupları oluşturmamızı sağlar. Değerleri bağımsız değişken olarak aktarabiliriz ve mixin'imizin daha esnek olmasını sağlayacaktır.
Sass, @mixin karışımı tanımlamak için @include yönergeyi ve bunları kullanma yönergesini kullanır. border-radius Düğmeler için kullanabileceğimiz basit bir basit mixin oluşturalım.
Bu özellik, tüm tarayıcılarda çalışmak için önek gerektiriyorsa, mixins'i etkili bir şekilde kullanır. Bu, sass için temel bir giriş . Sass, inanılmaz şeyler yapmamıza yardımcı olan son derece güçlü bir araçtır.