CSS ön işlemlerini duymuş olabilirsiniz ve tüm vızıltıların ne hakkında olduğunu merak ediyor olabilirsiniz. Hatta duymuş olabilirsin şımarıklık veya AZ .
Kısacası, CSS'nizi ön işlemden geçirme, CSS kodu yazılırken yaygın olarak bulunan daha az tekrarlanan teknikler gerektiren ve daha iyi biçimlendirilmiş daha özlü stil sayfaları yazmanıza olanak tanır. Sonuç, daha dinamik stil ve web siteleri veya uygulamalar geliştirilirken kaydedilen çok miktarda zaman.
Eğer zaten CSS yazarsanız, CSS'nizi ön işlem yapmayı kolayca öğrenebilirsiniz. Sass'in kapsamını anladıktan sonra, neden daha önce hiç değişmediğinizi merak edeceksiniz.
Sass, CSS'ye benziyor ama siz bir kez dalış yaptığınızda bariz farklılıkları var. Sass'i yazmanın iki yolu var ve nihayetinde hangi tarzı tercih edeceğinize bağlı. Projelerimde girintili ve parantezli stili (.scss) kullanıyorum çünkü bir bloğun nerede bittiğini ve çok sayıda kodun iç içe geçtiğinde başladığını gerçekten görselleştirmek isterim. İşlendikten sonra Sass kodu, bir ön işleme motoru kullanılarak otomatik olarak geleneksel CSS'ye derlenir.
Sass'inizin kesintisiz ve düpedüz kolay olmasını sağlayan birçok uygulama var. Yüklemek için, makinenizde Ruby'nin kurulu olduğu sürece komut satırını kullanabilirsiniz. Komut satırında rahat değilseniz, başka seçenekler de vardır (bu konuyla ilgili daha fazla bilgi) ve eğer bu sizin başınızın üzerindeyse, Sass-lang.com'u kolayca adım adım nasıl yapacağınızı öğrenin. Sonunda, komut satırı veya uygulama olacak herhangi bir yöntemi kullanarak Sass kurulumu değişikliklerinizi izleyecek ve otomatik olarak sizin için geleneksel CSS'ye derleyecektir.
Gibi uygulamaları kullanmayı şiddetle tavsiye ederim Codekit , LiveReload veya karışım Mac’te Sass projesini sıfırdan ayarlamanıza yardımcı olacak veya Windows kullanıcısı iseniz PrePros . Codekit, önişlemci tercihim, web sitenizin hızlı ve etkin bir şekilde çalışmasını sağlamak için Sass'ımı ön işlemenin yanı sıra kodunuzun onaylanması ve küçültülmesiyle bana yardımcı oluyor. (Yaratma yeteneği Pusula veya Burbon Codekit'teki temel projeler de harika bir özelliktir, ancak bu makalenin kapsamı dışındadır.) Sass ile daha rahat edildikten sonra Sass projelerinizde Compass ve Bourbon'u nasıl kullanacağınızı kontrol edin.
Sass, Syntactically Awesome Stylesheets anlamına gelir ve tarafından oluşturuldu Hampton Catlin . Sass zaten bildiğiniz ve sevdiğiniz CSS koduna değişkenler, miksler ve yuvalama gibi yeni kavramlar sunar. Bu kavramlar nihayetinde CSS'nizi harika hale getirir, yazmak daha kolay ve daha dinamik. Tüm bu özellikler bir araya getirilmiş, herhangi bir tasarımcının veya geliştiricinin iş akışını hızlandırmıştır.
İnsanları sık sık karıştıran Sass yazmanın alternatif yolları. Sass'in diğer derslerini veya Sass dosyalarını Sass dosyaları için .SCSS veya .Sass uzantısını kullanarak göreceksiniz. Bu, görünen çıktıyı üreten kod yazmanın iki yolu olduğundan aşikar. Gördüğüm en yaygın olanı ve şu anda kullandığım yöntem .SCSS olarak bilinen parantezli sürümüdür. Başka bir yöntem, sivri elemanlardan ziyade girintiye daha çok dayanan ve beyaz alana bağımlı olan .Sass uzantısıdır. Bu sözdizimi ile CSS ve .SCSS sözdiziminde gördüğünüz gibi yarı-kolonlara veya parantezlere gerek yoktur.
Aşağıdaki örneğe bakın.
#container {width:960px;margin:0 auto;}#container p {color: black;}/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$blackTamam, şimdi Sass kurulumunu kendi projeleriniz için nasıl alacağınızı merak ediyorsunuzdur. Özellikle Codekit ya da yol boyunca size yardımcı olacak benzer bir uygulama kullanıyorsanız, işlem oldukça kolaydır.
Sass projesinin tipik bir dosya yapısı aşağıdaki taslak gibi görünüyor. Bu göz korkutucu görünebilir, ancak işlerin nasıl birlikte çalıştığı etrafında kafanızı sardığınız zaman iş akışınızın iyileşeceği konusunda söz veriyorum. Sonunda, tüm Sass'ınız, çalışma belgelerinize eklediğiniz dosya, HTML, PHP, vb. Olacak bir CSS dosyasına derlenir.
stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.Yapınızı nasıl ayarlayacağınız eninde sonunda size bağlıdır. Temel bir yapıyla başlayın ve kendi ihtiyaçlarınıza ve iş akışınıza ince ayar yapın.
Sass, SSS ve SCSS dosyalarını içe aktarmak için CSS @import kuralını genişletir. Tüm içe aktarılan dosyalar tek bir çıkışlı CSS dosyasına birleştirilir. Buna ek olarak, içe aktarılan dosyalarda tanımlanan tüm değişkenler veya karıĢımlar ana dosyaya taşınır, bu da herhangi bir dosyayı sanal olarak karıĢtırabilir ve eşleştirebilir ve tüm stillerinizin global düzeyde kalacağından emin olabilirsiniz.
@import, içe aktarmak için bir dosya adı alır. Son çare olarak Sass veya SCSS dosyaları seçtiğiniz dosya adıyla alınacaktır. Uzantı yoksa Sass, bu ada sahip bir dosyayı ve .scss veya .Sass uzantısını bulmaya çalışır ve içe aktarır.
Tipik bir Sass proje ayarınız varsa, bir temel dosya içinde bazı @import kurallarını göreceksiniz. Bu sadece, derlendiklerinde etkili bir şekilde senkronize olan birden fazla dosyaya sahip olmanızı sağlar, örneğin:
@import "main.scss";veya:
@import "main";@Partialsİçe aktarmak, ancak CSS'ye derlemek istemediğiniz bir SCSS veya Sass dosyanız varsa, aksi halde Kısmi olarak bilinen dosya adının başına bir alt çizgi ekleyebilirsiniz. Kod derlendiğinde Sass CSS'ye işlenirken kısmi olarak yok sayılır. Örneğin, _buttons.scss 'iniz olabilir, _buttons.css dosyası oluşturulamaz ve daha sonra "düğmeleri" @ işaretleyebilirsiniz ;
En iyi uygulama, bir kısmi dizini oluşturmak ve kısmi Sass dosyalarınızın tümünü bunun içine yerleştirmektir. Bunu yapmak, Sass'in izin vermediği çift dosya adlarına sahip olmayacağınızı garanti eder, örneğin, kısmi _buttons.scss ve dosya buttons.scss aynı dizinde bulunamaz. Kısmi kullanımı, küresel düzeyde organize olmanın harika bir yoludur. Dosyayı gönderdiyseniz, yazdığınız Sass tüm proje boyunca kullanılabilir. Genellikle kısmi olarak projemde kullanacağım karışımları veya değişkenleri oluştururum. İçeriklerine ve şekillendirdikleri öğelere göre onları adlandırıyorum.
CSS'deki değişkenler modern web geliştirmede bir atılımdır. Sass ile yazı tipleri, renkler, boyutlar, kenar boşluğu, dolgu vb. Gibi şeyler için değişkenler yaratabilirsiniz. Liste sonsuzdur. JavaScript veya PHP yazarsanız, kavram değişkenleri ve kuralları tanımlamak açısından oldukça benzerdir.
Peki neden değişkenleri kullanıyorsunuz? Kolay, değişkenler, HTML'deki bir sınıfa veya JavaScript'deki bir değişkene benzer şekilde bir öğeyi birden çok kez kullanmanıza olanak tanır. Örneğin, belirli bir arka plan rengiyle birden çok div tanımladığınızı varsayalım. Geleneksel hex kodu veya RGB hesaplaması yerine hatırlanması daha kolay olan değişkeni kullanabilirsiniz. Hatırlanması kolay bir ad ile bir değişken oluşturmak, daha az kopyalama ve yapıştırma ve daha verimli bir iş akışı sağlar. Aynı konsept, bir değişken her uygulanışında ve neredeyse her yerde Sass ile geçerlidir, örneğin bu .scss:
#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}bu .css dosyasında sonuçlanır:
#container {font-size: 12px;padding: 10px;color: #C0392B;}Değişkenler hakkındaki serin kısım, betik dillerinde kullanılanlara çok benzer olmalarıdır. Sass içindeki değişkenler, hem operasyonlar hem de fonksiyonlar içinde kullanılabilir. Standart matematik işlemleri (+, -, *, ve%) rakamlar için desteklenir. Renkler için Sass içine hafifliği, tonu, doygunluğu ve daha fazlasını hedefleyen fonksiyonlar vardır.
Bu işlevselliğe sahip olmak, kodunuzu her zamankinden daha dinamik hale getirir. Örneğin, sitenizin genel bağlantı rengini değiştirmek isterseniz, değişkeni kolayca değiştirebilirsiniz, yeniden derleyin ve siteniz dinamik olarak güncellenir. Yeniden kullanılabilir bir gezinme listesi için aşağıdaki başka bir örneğe bakın, bu .scss:
nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);} }} bu .css ile sonuçlanır:
nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}Yerleştirme, Sass'ı sevmem için büyük bir neden. Sonunda daha az kod satırı yazarsınız ve tüm kodunuzun iç içe biçimlendirme nedeniyle okunması kolaydır. (Aynı yerleştirme kavramı da LESS'de bulunur.)
İki tür yuvalama vardır:
Sass'da seçici yuvalama, HTML'yi nasıl yerleştireceğinize benzer:
Main Content
Sidebar Content
Yuvalama Sass sürümü:
#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}aşağıdaki CSS ile sonuçlanır:
#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}İkinci tür yuvalama, özellik yuvalandırmasıdır. Daha az satır kodla sonuçlanan öğeleri daha iyi hedeflemek için özellikleri aynı önekle yuvalayabilirsiniz, örneğin:
#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}bu CSS ile sonuçlanır:
#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}Tüm Sass özelliklerinden Mixins en güçlü olmak zorunda. Karışımlar bir değişkene benzer, ancak steroidler üzerindedir. Bir öğenin eksiksiz bir stilini tanımlayabilir ve bu stilleri projeniz boyunca yeniden kullanabilirsiniz.
Karışımlar , önceden oluşturduğunuz stillerden oluşan bir bloğu alan ve @include yönergesini kullanarak seçtiğiniz seçiciye uygulayan @mixin yönergesi kullanılarak tanımlanır . Aşağıda yatay gezinme menüsü oluşturmak için kullanılan ortak bir CSS kalıbı. Her navigasyon örneği için aynı kodu yazmak yerine, sadece bir mixin kullanın ve daha sonra gerektiğinde ekleyin. Bu konsept, düğmeler, tipografi, gradyanlar, vb. Gibi üst üste kullandığınız her şey için yapılabilir.
/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}Ve burada karışıma bir kod satırı ekliyoruz:
ul.navbar {@include navigate;}Bu derlenmiş CSS ile sonuçlanır:
ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}Dinamik olarak güncellemek için bağımsız değişkenler kullanan özelleştirilebilir karışımlar oluşturmaya kadar gidebilirsin. Bunun üzerine diğer karıĢımlar içerisindeki karıĢımları dahil edebilir veya karıĢımlar ve daha fazlası kullanarak fonksiyonlar yaratabilirsiniz. Bunların arkasındaki güç kesinlikle muazzam.
Daha önce bahsettiğim, önceden Compass ve Bourbon adı verilen bazı popüler önceden tanımlanmış mixin koleksiyonları var. Projenizde basit bir @import ile, web'de yaygın olarak kullanılan halihazırda üretilen karışıma erişebilirsiniz. Mevcut olan her şeyi kapsayacak kadar çok seçenek var ama denemek ve ellerinizi bir ekran dolusudan ziyade birkaç satır kodla geliştirmeye çalışan özel animasyonları veya geçişleri kirletmek kesinlikle eğlenceli. Karıştırıcılar, tarayıcı tanımlı önekleri CSS'nizde tekrar tekrar yazmak gibi hissetmezseniz, çapraz tarayıcı geliştirme işlemini kolaylaştırır.
Örneğin burada, özelleştirilmesine izin veren argümanlar içeren bir mixin oluşturuyoruz.
@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }derlendiğinde bize bu CSS'yi verir:
p {border-color: blue;border-width: lin;border-style: dashed;}Sass bir öğrenme eğrisine sahipken, metodları ve sözdizimini anladıktan sonra, tekrar standart CSS yazmaya geri dönmek istemeyeceğine inanıyorum.
Sass son derece güçlü ve ben sadece burada temelleri ele aldım. Geleneksel CSS ile, hepiniz projenin geliştirme aşamasında çok fazla zaman harcayan görevleri kopyalayıp yapıştırarak veya bulduk ve değiştirdik. Sass'ı deneyin ve gelecekteki projelerinizde etkili bir iş akışı oluşturmayı öğrenin.
Sass kullanıyor musunuz, yoksa farklı bir CSS önişlemcisini kullanıyor musunuz? Favori bir karışımın var mı? Yorumlarda bize bildirin.
Öne çıkan resim / küçük resim, kahraman görüntüsüne sıfır kullanır Shutterstock üzerinden.