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

SASS-Syntactically Awesome StyleSheets

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. Gülümseme 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.

kmb-udemy-reklam

Reklamlar

Web Essentials 2013 ile Dosyaları iç içe Gruplama

Introducing File Nesting extension for Visual Studio

Aslında bu özellik Visual Studio’nun içinde varsayılan olarak gelmektedir. Fakat çok daha basit çekilde grup yap / grup çöz şeklinde çalışmakta iken. Web Essentials 2013 ile birkaç farklı yetenek daha kazandırılmış.

  • Tek dosya seçip başka dosya ile gruplama
  • Seçilen klasör içindeki dosyaları dosya adına göre otomatik gruplama
  • Tüm proje genelinde eklenen dosyaları dosya adına göre otomatik olarak gruplama

şeklinde seçenekler bulunmaktadır.

Dosya sayısının fazlalaştığı projelerde hayat kurtaran bir şey olduğunu söyleyebilirim. Özellikle eklenen her yeni dosyanın otomatik olarak gruplanması tadından yenmez bir duygu oluşturmaktadır.

 

kmb-udemy-reklam

Web Essentials 2013’de Resim (image) Dosyaları ile Çalışmak

Working with images in Web Essentials 2013

Faydalı ve kullanışlı olduğunu düşündüğüm bir Web Essentials 2013 özelliğini sizlerle paylaşmak istiyorum. İngilizce bilmeseniz de video’ da gayet basit bir şekilde anlatılmış. Çok hoşunuza gidecek bir özellik, kullanmanız dileğimle.. Tabii ki sizde bu özelliğin çalışması için Visual Studio için Web Essentials 2013 extension’ ını kurmayı unutmayın.

Yaptıklarını kısaca özetlersek;

  • Bir yerlerden kopyaladığınız hafızadaki resimleri HTML’e yapıştırdığınızda ilgili dosyayı projeye ekliyor ve <img /> tag içine otomatik yazıyor.
  • Resimleri optimize ederek boyutlarını azaltıyor.
  • Resimleri base64 ‘e çeviriyor.
  • Resimleri base64’den Uri haline geri çeviriyor.
  • Resimleri base64’den dosya olarak kaydedebiliyor.
  • Birden çok resmi birleştirebiliyor. Ayrıca LESS, SASS, CSS, JSON kodlarını yazarak otomatik olarak site içindeki CSS dosyanıza import ediyor.
  • vs vs vs..

 

kmb-udemy-reklam

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

SASS-Syntactically Awesome StyleSheets

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

 

kmb-udemy-reklam