Udemy ‘de SASS Prensipleri ve Visual Studio Eğitim Serisi

Ş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.

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 SASS video kursu ‘ndan izleyebilirsiniz.

• Eğitim izleme sürenizi,
• kaldığınız yerden devam edebilmenizi,
• notlar alabilmenizi,
• sorulan soruları görebileceğiniz,
• soru sorabileceğiniz,
• eğitimcinin paylaştığı duyuruları alabileceğiniz, görebileceğiniz

harika bir platform.. Sizlere de şiddetle öneriyorum.

SASS–Online SASS Derleyiciler

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.

SASS Öğreten Siteler;

• Code School
• LevelUp Tuts
• Lynda.com

Online SASS Derleyici Siteler;

• SASS Meister
• Write SASS Online
• SASS to CSS

 

SASS – VS 2013 Update 2 CTP 2 ile Gelen SASS Yenilikleri

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.

Visual Studio 2013 Yeni Web Özellikleri Duyurusu ve SASS Yenilikleri – Update 2 CTP2

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.

Kaynak ve daha fazla bilgi için bakınız;

Announcing new Web Features in Visual Studio 2013 Update 2 CTP2 – .NET Web Development and Tools Blog – Site Home – MSDN Blogs.

 

SASS – Bunlar da varmış dediklerim ve VS2013 Extension Detayları

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.

1. SassyStudio
2. Mindscape Web Workbench
3. Web Essentials 2012
4. Web Essentials 2013

 

SASS – Koala App Kurulumu ve Kullanımı

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 – Function & Control Directives

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.

 

SASS–Mixin & Extend

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Mixin(fonksiyon olarak düşünebilirsiniz) tanımlama ve kullanma, Extend(genişletme) gibi konulara değiniyor olacağım.

Mixin kavramında; bir fonksiyon gibi yazdığımız bir blok stil’i “@include” ifadesi ile çağırarak istediğimiz yere uygulanmasını sağlayabiliyoruz. Hatta oluşturduğumuz mixin için parametre tanımlayarak, parametrik olmasını da sağlayabiliyoruz.

Extend kavramında ise; stil özelliklerini inherit(miras) alabilmeyi sağlıyoruz. “@Extend” anahtar ifadesi ile extend edilen stiller bir araya gelerek css dosyada tanımlanıyorlar. Basitçe örnek vermek gerekirse; aşağıdaki gibi bir css dosya oluşturmak istiyorsak;

CSS:

.button, .button1, .button2 {
    /* button, button1, button2 için ortak stiller */
  color: #ddd;
  font-size: 12pt; }

.button1 {
    /* button1 için özelleştirilmiş stiller */
  border: 1px solid green; }

.button2 {
    /* button2 için özelleştirilmiş stiller */
  border: 1px solid black; }

Aşağıdaki gibi SASS dosyamızı kodlamamız ve .button1 ve .button2 isimli stilleri .button stilinden extend etmeli ve farklı özelliklerini yine içine tanımlamalıyız.

SCSS:

.button{
    color: #ddd;
    font-size: 12pt;
}

.button1
{
    @extend .button;
    border: 1px solid green;
}

.button2
{
    @extend .button;
    border: 1px solid black;
}

Böylece CSS kodundaki ilk stil’i (“.button, .button1, .button2”) elde etmiş oluruz. Özet olarak; @extend anahtarı kullanılan stiller @extend anahtarı ile kullanılan stil’le birleştirilerek css dosyada tanımlanırlar.

 

SASS – Partial & Imports

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Partial Files oluşturma ve bunları kullanma(import) gibi konulara değiniyor olacağım. Önceki videomuzda oluşturduğumuz kodlarımızın bir kısmını alarak partial bir SASS dosyasına taşıyacağız. Ardından bu dosyayı projemize ait olan, derlenerek css kodu oluşturan SASS dosyamıza import edeceğiz.

SASS – Variables & Nesting

SASS (Syntactically Awesome StyleSheets) serimizde, sıradaki video’da sizlere SASS üzerinde Variables(değişkenler) tanımlama ve kullanma, Nesting(iç içe yazma) gibi konulara değiniyor olacağım. “div” elementlerine SASS dosyası(.scss) ile oluşturduğumuz(aslında otomatik olarak oluşan) css dosyası ile stil vereceğiz.