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

Murat Başeren ile Udemy ‘de SASS Prensipleri ve Visual Studio Ücretsiz 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.

Murat Başeren Udemy Dersleri

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.

kmb-udemy-reklam

SASS–Mixin & Extend

SASS-Syntactically Awesome StyleSheets

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.

 

kmb-udemy-reklam

SASS – Nedir? Visual Studio 2013 ile Entegrasyon

SASS-Syntactically Awesome StyleSheets

Syntactically Awesome StyleSheet…

SASS Nedir? ile SASS video serimize başlıyoruz. Sizlere bu video seri ile SASS ‘ın ne olduğu ve Visual Studio 2013 ile nasıl kullanılabileceğini anlatacağım. Serimizi takip eden videolarda da örneklerle beraber SASS ‘ın en belirgin özelliklerini size aktarıyor olacağım. SASS’ ı Visual Studio olmadan kullanmak isterseniz ücretli ya da ücretsiz(open source) uygulamaları bulunmaktadır. SASS ‘a ait sitedeki install başlığından bu uygulamaları görebilir ve ilgili web sayfalarına giderek indirebilirsiniz. Visual studio 2012 ve 2013 ile kullanmak isterseniz gerekli extension’ı kurmanız gerekmektedir. İster Visual Studio içindeki Tools –> Extension & Updates kısmından isterseniz de aşağıdaki web sayfasından SassyStudio isimli extension’ı indirerek kurabilirsiniz.

SASS dosyalarının uzantısı “.scss” şeklindedir. Visual studio kullanarak oluşturduğunuz bir web projesine sağ tıklayarak Add –> Add New Item diyerek Sass File ekleyebilirsiniz. Bir de Sass Partial File isimli bir dosya daha göreceksiniz. Bu dosyanın normal sass dosyadan farkı yoktur. Dosya adının başındaki “_”(alt çizgi) bu dosyanın önemli kısmıdır. Bu o dosyanın başka projelerde de kullanılabilecek olan bir kod parçası olarak işaretlendiğini belirtir. Yani Sass File’lara birden fazla daha önce yazmış olduğunuz sass partial file import edebilirsiniz.

Örnek bir SASS kodunu da giriş videosu yazımızda sizlerle paylaşmak istiyorum.

$yazi-tipim:    Helvetica, sans-serif; 
$ana-renk: #333;

body { 
    font: 100% $yazi-tipim; 
    color: $ana-renk; 
}

Buradaki kodlamada; sass file üzerinde değişken tanımlamayı görüyorsunuz. “$” simgesini değişken isminin önüne yazarak değişken tanımlıyoruz ve kullanırken de gene “$” simgesini kullanarak istediğimi yerde kullanıyoruz. Formül şu şekilde;

$[değişken_adı] : [değer] ;

Bu örnek sass dosyasını derlediğimizde(compile) – visual studio içinde kaydettiğimiz anda derlenmiş oluyor “.css” dosyamız oluşturuluyor.

body { 
    font: 100% Helvetica, sans-serif; 
    color: #333; 
}

Derleme sonrası; tanımladığımız değişkenleri kullandığımız yerde değişkenin değerlerinin yazıldığını görebilirsiniz. Tabii ki bu sass dosyalarının basit bir özelliği, çok daha fazlası ve gelişmiş yetenekleri var. Bunları ilerleyen videolarımızda sizlere anlatmaya çalışacağım. Bu giriş videosu için bu şekilde bir yazıyı yazarak da sizler için konuya giriş yapmış oluyorum. Video ile sizleri başbaşa bırakıyorum.

kmb-udemy-reklam