instagram takipçi satın al

Etiketlenen üyelerin listesi

Toplam 1 adet sonuctan sayfa basi 1 ile 1 arasi kadar sonuc gösteriliyor

Konu: CSS’e yeni soluk, LESS’e giriş

  1. #1
    Albay - ait Kullanıcı Resmi (Avatar)
    Üyelik tarihi
    02.Eylül.2014
    Mesajlar
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS’e yeni soluk, LESS’e giriş

    Booking.com
    Aslında CSS ön-işleyicileri (preprocessor) veya derleyicileri ile tanışmam yeni değil. Bir iki senedir varlıklarından haberdarım ve zaman zaman da inceledim. Ama en başından beri – belki de bir çok geliştirici gibi – bunları kullanmaya direndim.

    Öncelikle SASS. Bence SASS’ın büyük problemi kullanıcı dostu olmamadı ve Ruby gerektirmesi. SASS kullanmak için ilk önce bilgisayarınıza Ruby kurmanız gerekiyor ve .less dosyalarını komut satırından teker teker derlemeniz gerekiyor. Bana biraz fazla iş gibi gözüktü. Ne de olsa en başından beri CSS’lerimi kendim bir tekst editöründe yazıyorum. CSS’i oturup yazmak varken eden bu fazladan işlere katlanayım ki? Diğer bir kişisel neden ise Ruby’den pek hoşlanmamam. Peki o zaman LESS‘e gelelim, LESS Javascript tabanlı ama uzun süre o da pek ilgimi çekmedi.


    İkinci bir neden ise bir çok geliştiricinin programcı olmaması. Programcı olmayan CSS guruları için değişkenler, mixinler ve diğer programlama yapıları pek rahat olmayabilir.


    Peki ne değişti. Öncelikle web’in kendisi değişti. Artık fluid, responsive design gibi kelimeler var. CSS dosyaları daha kalabalık ve karmaşık. İkinci bir neden ise LESS’in ve programlarının gelişmesi. Kişisel bir olay da Twitter’ın Bootstrap’inin (ve daha sonra HTML5 Boilerplate’in) içinde bir .less dosyası bulunmasıydı. Bunları görünce konuya biraz daha eğilmeye karar verdim. İçine girdikçe de LESS son derece kullanışlı ve dahası vazgeçilmez bir araç olmaya başladı.


    Öncelikle LESS için sayfanın içine gömülmüş bir Javascript derleyici veya Node.js gibi sunucu tarafında bir derleyici de kullanabilirsiniz. Fakat sayfa yüklenirken fazladan hem LESS javascript dosyasını yüklemek hem de bunu işlemek performans açısından çok iyi bir seçim değil. Öte yandan Node.JS kendi sunucunuz halinde pek de rahat bulunabilecek bri kurulum değil. Bu da bizleri LESS programlarına getiriyor. Bunlardan biri SimpleLESS.

    Mac, Windows ve Linux sürümleri mevcut. Benim şu anda kullandığım bir Mac programı olan LESS.app da diğer bir seçenek. İki program da odukça temiz tasarımlı ve kullanışlılar ve buna ek olarak derlenen CSS dosyalarını minimize de edebiliyorlar.

    LESS ile kısa bir tanışma


    Peki nedir bu LESS (ve CSS preprocessorlar) ve nasıl çalışır. Ufak bir giriş yapalım. Temel olarak LESS dosyasında CSS’e benzer bir dilde komutlar yazıyorsunuz ve LESS bunu sizin için CSS’e çeviriyor.

    Değişkenler;


    Değişkenler sık kullanılan özellikleri tek bir yerden yönetmenize izin verirler. Örneğin;


    PHP- Kodu:
    // LESS

    @color#4D926F;
    @font-serif'Times New Roman'Georgiaserif;
    @
    kalin-border3px solid black;

    #header { color: @color; }

    h2 color: @color; }

    p{
    border: @kalin-border;
    font-family: @font-serif
    }

    /* Derlenmiş CSS dosyası ise */

    #header{color: #4D926F}
    h2{color#4D926F}

    p{
      
    border3px solid black;
      
    font-family'Times New Roman'Georgiaserif;

    Mixin’ler

    Mixin’ler kısaca bir class’ın özelliklerini başka bir class içinde kullanmanıza olanak verirler. Örneğin;


    PHP- Kodu:
    // LESS
    .yuvarlak-kenar (@radius5px) {
      
    border-radius: @radius;
      -
    webkit-border-radius: @radius;
      -
    moz-border-radius: @radius;
    }

    #header {
      
    .yuvarlak-kenar;
    }

    #footer {
      
    .yuvarlak-kenar(10px);
    }

    // Derlenmiş CSS

    #header {
      
    border-radius5px;
      -
    webkit-border-radius5px;
      -
    moz-border-radius5px;
    }

    #footer {
    border-radius10px;
      -
    webkit-border-radius10px;
      -
    moz-border-radius10px;


    İçiçe Kurallar (Nested Rules)

    PHP- Kodu:
    // LESS
    #header {
      
    h1 {
        
    font-size26px;
        
    font-weightbold;
      }
      
    font-size12px;
        
    text-decorationnone;
          &:
    hover border-width1px }
        }
      }
    }

    /* Derlenmiş CSS */
    #header h1 {
      
    font-size26px;
      
    font-weightbold;
    }
    #header p {
      
    font-size12px;
    }
    #header p a {
      
    text-decorationnone;
    }
    #header p a:hover {
      
    border-width1px;


    Fonksiyon ve İşlemler

    PHP- Kodu:
    // LESS

    @cerceve1px;
    @
    taban-rengi#111;
    @kirmizi:     #842210;

    #header {
      
    color: @taban-rengi 3;
      
    border-left: @taban-rengi;
      
    border-right: @cerceve 2;
    }
    #footer { 
      
    color: @taban-rengi #003300;
      
    border-colordesaturate(@kirmizi10%);
    }

    /* Derlenmiş CSS */

    #header {
      
    color#333;
      
    border-left1px;
      
    border-right2px;
    }
    #footer { 
      
    color#114411;
      
    border-color#7d2717;


    Buraya kadar LESS’in temel olarak nasıl çalıştığını ve kısaca ne işe yaradığını görmüş oldunuz. Hemen denemeye başlayabilirsiniz. Eminim bir kere kullanmaya başladıktan sonra sizinde hayatınızı kolaylaştıracak.
    Konu Albay tarafından (05.Eylül.2014 Saat 12:23 ) değiştirilmiştir.

Konu Bilgileri

Bu Konuya Gözatan Kullanıcılar

Şu anda 1 kullanıcı bu konuyu görüntülüyor. (0 kayıtlı ve 1 misafir)

Benzer Konular

  1. Liseye giriş sınavında yeni gelişme.
    Konu Sahibi AkyaziLi Forum Eğitim Haberleri
    Cevap: 0
    Son Mesaj : 27.Kasım.2017, 16:32
  2. Cevap: 0
    Son Mesaj : 12.Ekim.2017, 15:09
  3. VR Simülatörü KATVR, VR Teknolojisinde Oyunlara Yeni Soluk Getiriyor
    Konu Sahibi VRDelisi Forum Teknoloji - Bilim Haberleri
    Cevap: 0
    Son Mesaj : 29.Ağustos.2017, 15:41
  4. Yeni Başlayanlar İçin Mutfağa Giriş ...
    Konu Sahibi Misal Forum Yiyecekler hakkında bilmeniz gerekenler
    Cevap: 3
    Son Mesaj : 10.Ocak.2016, 16:05
  5. Cevap: 0
    Son Mesaj : 15.Aralık.2015, 09:48

Bu Konu için Etiketler

Yetkileriniz

  • Konu Acma Yetkiniz Yok
  • Cevap Yazma Yetkiniz Yok
  • Eklenti Yükleme Yetkiniz Yok
  • Mesajınızı Değiştirme Yetkiniz Yok
  •  
sohbet odalari
ataşehir escort ümraniye escort ataşehir escort
antalya haber sex hikayeleri
ankara escort ankara escort ankara escort bayan kızılay escort ankara escort çankaya escort ankara otele gelen escort kayseri escort escort ankara çankaya escort kızılay escort ankara eskort

kaçak bahis siteleri yatirim bonusu veren siteler vegasslot ikili opsiyon bahis vegasslotyeniadresi.com vegasslotadresi.com vegasslotcanli.com getirbett.com getirbetgir.com tipobet venüsbet giriş venüsbet vegasslot