"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO
Ayrıca dilerseniz çok başarılı bir e-kurs platfomu olan Udemy üzerindeki Udemy Hesabım dan da izleyebilirsiniz. Küçük notlar alabileceğiniz ve dilediğiniz kursu alma konusunda uzman olan, bu iş için yapılmış bu platform üzerinden de düzenli bir şekilde udemy ücretsiz SASS video kursu ‘ndan izleyebilirsiniz.
Bu videomda sizlerle Online SASS araçlarından bahsedeceğim. Beraberce Googling yaparak arayacağız ve bulduklarımızı inceleyeceğiz. Aslında videoda da görebileceğiniz gibi 2 adet site bulacağız. İlk göze çarpan siteler, tabii ki bu sitelerin yaptığı işi yapan bir örnek proje de yapabilirsiniz. Sonuçta SASS kodlarını derleyebileceğiniz SassScript desteği mevcut.
Aslında kurduğumuz visual studio extension’larınında yaptıkları aynı şekilde kodları çalıştırmak. Basit bir windows app ya da asp.net web app sizlerde yapabilirsiniz.
Bulduğumuz online araçlar ve sonrasında bulduğum diğerleri ile beraber aşağıdadır. Ayrıca bazı eğitim sitelerine de rastladık. Gerçekten faydalı olduğunu düşünüyorum. Hızlıca öğrenme ve alışkanlık kazanma açısından kullanabilirsiniz. Videomuzda da bu araçları nasıl kullandığımızı inceliyor olacağız.
Geçtiğimiz günlerde sizlerle paylaştığım Visual Studio 2013 Update 2 CTP 2 güncellemesi ile gelen birçok yenilikten SASS ile ilgili olanları inceleme fırsatı buldum. Gerek bu güncellemenin kurulumu gerekse yazıda sizlere bahsettiğim Web Essentials 2013 ‘ün bu yeni VS 2013 Update 2 CTP 2; community preview (topluluk öngörünüm) sürümü güncellemesi ile olan uyumsuzluğunun nasıl giderileceği, Web Essentials 2013 Nightly extension sürümünün Visual Studio 2013 ‘e yüklenmesi hakkında sizlere yeni bir video hazırladım.
Tabii ki Visual Studio 2013 Update 2 CTP 2 güncellemesinin Release (son hali) olmadığını belirtmekte fayda var. Bu güncelleme sonrasında kullandığınız bazı extension ve diğer araçlarda belirsiz hatalar görebilirsiniz. O sebeple sizin için kritik öneme sahip makinalarda kurmamanızı öneririm.
Sonrasında bu çalışıyordu ne oldu şimdi buna demeyin. Fakat önemli olmayan veya zaten kullandığım bir extension ya da tool yok dediğiniz makinalarda (pure installation) yenilikleri yaşayabilmeniz açısından yükleyebilirsiniz.
Tam ben SASS serisi videolarını bitirmişken, dün yapılan bir duyuruda SASS Project item ve editörü desteği de Visual Studio 2013 Güncellemesi ile geldi. Daha henüz deneme şansım olmadı fakat hemen haberi paylaşmak istedim.
Tabii ki bu güncelleme sadece SASS project item ve editörü için değil;
SASS Style Sheets – Project Item & Editor
JSON File – Project Item & Editor
Yeni web projesi oluştururken, uzak Azure kaynakları oluşturma seçeneği.
MVC/SPA Şablon değişiklikleri
LESS editör iyileştirmeleri
Knockout Intellisense güncellemesi
HTML, Razor, CSS, LESS, SASS sayfalarında yeni URL seçicisi.
Browser link için yeni özellikler
ASP.NET MVC 5.1.1
ASP.NET Web API 2.1.1
ASP.NET Web Pages 3.1.1
gibi yeniliklerle gelen bir güncelleme paketi. Bu arada belirtilmiş ki;
Web Essential 2013 is not compatible with the Update 2 CTP2. If you install Update 2 CTP2, after opening Visual Studio, you’ll get an error message “EditorExtensionsPackage” couldn’t be loaded. We hope to have a new version of Web Essentials out soon to support this release.
Yani; Web Essential 2013 şu an için Visual Studio 2013 Update 2 ile uyumlu değil. Hatta güncellemeyi kurduktan sonra “EditorExtensionsPackage” yüklenemedi şeklinde bir hata ile karşılaşacağınızdan bahsediyor. Fakat umuyorlarmış ki web essential 2013 ‘ün yeni versiyonunda bu sorun giderilecekmiş.
Yani yakın zamanda web essential 2013 ‘ünde yeni güncellemesi çıkacaktır.
Peki, SASS yeniliğine tekrar dönecek olursak, SASS dosya ve editör desteği ile beraber neler gelmiş;
Renklendirme
Değişken ve Mixins IntelliSense
Comment/uncomment(açıklama satırı yapma ve kaldırma)
Quick info(hızlı bilgi)
Formatting (sonunda 🙂 – metin formatı düzenleme CTRL + K + D ile yaptığımız şey)
Syntax validation (sözdizim hata kontrolü)
Outlining
Goto definition (Kaynağa gitme)
Color picker (Renk paleti)
Ayarlar ve dahası olarak belirtilmiş.
Bende inceledikten sonra hem seriyi toparlayıcı hem de güzel bir örnek ile bu yeni güncelleme ile gelenleri sizlere bir video’da paylaşabilirim.
SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere Visual Studio 2013 üzerinde incelediğim SASS desteği veren extension’ların yapabildikleri ve yapamadıklarından bahsedeceğim. Ayrıca Online Sass Compiler olan SASS Meister üzerinde derleme işlemini göstereceğim. Herhangi bir program kurmadan sass(scss) dosyalarını işleyebilirsiniz.
Bunların dışında ayrıca sass özelliklerinden PlaceHolder Selectors, @import url kullanımı, @media kullanımı kavramlarına örnekler ile değinmeye çalıştım.
Sass desteği veren visual studio 2012 – 2013 extension’ larına aşağıdaki adreslerden ulaşabilirsiniz.
SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS kullanımında Visual Studio kullanmadan nasıl scss dosyalarını derleme yapabileceğinizden bahsedeceğim.
Bu videomuza kadar yaptığımız tüm örneklerde visual studio IDE kullanarak SASS(scss) dosyalarımızı oluşturduk. Dosyamız üzerinde kaydetme işlemi yaptığımız anda gerekli derleme gerçekleşerek bize CSS dosyamızı oluşturuyordu. Peki elimizde Visual Studio yoksa hangi araçları kullanarak sass dosyalarımızı derleyebiliriz. Bunun için sass’ın sitesinde bir dizi program bulunmaktadır. Uygulama listesine install sayfadan erişebilirsiniz. Open Source(ücretsiz) ve Paid(ücretli) olarak uygulamalar listelenmektedir. Ben ücretsiz olan Koala app ‘i kullanıyorum. Fakat Scout ‘da ona benzer, onu da kullanabilirsiniz. Tüm open source(ücretiz) yazanları kullanabilirsiniz. Paid(ücretli) olanlarda da ücreti karşılığı gayet güzel özellikler gelmektedir.
Koala app ve scout uygulamalarının ikisini de kullanabilirsiniz. İkisinin de amacı derleme yapmak. Yani bir metin editörü içermiyorlar. Bilgisayarınızda bir klasör’ü program üzerine sürükleyip bıraktığınızda o klasörü proje olarak kabul ediyor ve içerisindeki dosyaları okuyor. Okuduğu dosyaları türlerine göre listeliyor. Klasör içindeki dosyalarınız da yapacağınız kodlamayı “Not Defteri” , “Notepad++” vs gibi metin editörleri ile yapıyorsunuz. Koala bu dosyaları sadece derleyerek size css çıktılarını üretiyor. Bu videoda sizlere kurulumdan kullanımına kadar nasıl yapıldığını izleyebilirsiniz.
SASS – Koala App Kurulumu ve Kullanımı
Video görüntüsünü alamazsanız video başlığındaki link’e tıklayarak youtube üzerinden izleyebilirsiniz.
SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde function directives ve control directives tanımlama ve kullanma gibi konulara değiniyor olacağım.
@function ile mixin kavramından farklı olarak değer döndüren fonksiyonlar tanımlıyor olacağız.
@if, @for, @each, @while gibi control directive ‘leri kullanarak koşullu stil ifadeleri, döngüler kullanarak bir seri stil’i oluşturma gibi konularda örnekleri aşağıdaki videodan izleyebilirsiniz.
Şuan’a kadar sizlere sunduğum toplam 9 adet SASS videosu olmuş. Bu videolara youtube kanalım üzerindeki oynatma listelerim ‘den, SASS oynatma listesi kısmından erişebilirsiniz.
Fakat önemli olmayan veya zaten kullandığım bir extension ya da tool yok dediğiniz makinalarda (pure installation) yenilikleri yaşayabilmeniz açısından yükleyebilirsiniz.
