Less Kurulum ve Örnekler

Discussion in 'Programming - Yazılım' started by Âlfonse, Nov 23, 2018.

  1. Âlfonse

    Âlfonse Kıdemli üye

    Mesajlar:
    198
    Likes Received:
    196
    Less,Css işlemlerini kolaylaştırır.Less üzerinden matematiksel işlemler yapılabilir,mixin vs gibi değerler kullanılabilir,değişken tanımlanabilir.

    Kurulum--

    Kurulumu cdn üzerinden anlatacağım.</head> etiketi üstüne;
    HTML:
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
    yapıştrmanız yeterli.


    Kullanım--

    Aynı şekilde bir less dosyamızı dahil edelim..
    HTML:
    <link rel="stylesheet/less" type="text/css" href="main.less" />
    Örnekler--

    Değişken oluşturmak için değişken başına @ koyuyoruz.
    Code:
    @bg: #FFF;
    #header{
    background:@bg;
    }
    İç içe yazım

    Less'de kolaylaştıran yöntem budur.Css de ayrı ayrı tanımlamak yerine less'de alt alta yazılabilir.

    Code:
    //Normalde
    .category{
      background:#000
    }
    .category ul li{
      float:left;
      margin-right:10px;
    }
    .category ul li a{
      color:#000;
    }
    .category ul li a:hover{
      color:red;
    }
    //Less ile
    .category{
      background:#000;
      ul li{
        float:left;
        margin-right:10px;
        a{
          color:#000;
          &:hover{color:red;}
        }
      }
    }
    Fonksiyonların Kullanımı..

    Örnek olarak bir rengi karartmak,aydınlatmak gibi fonksiyonları less ile yapabileceğiz.

    Code:
    .input{
    background: darken(@inputBg, 20%);
    }
    
    Bu kodumuzda da input class'ının background değerini inputBg değişkeninin değerinin %20 karartılmış olarak belirledik...

    Devamı için:
    Linkleri görebilmek için login-giriş yapman gerekiyor veya konuya like atman lazım
     
    ZadobaTR, Mectruy and Anarchosa like this.
  2. Owner
    Owner
    Âlfonse

    Âlfonse Kıdemli üye

    Mesajlar:
    198
    Likes Received:
    196
    Mixin Kullanımı
    ---


    İlk önce bu parametrenin amacından bahsedeyim..

    Bildiğiniz gibi bazen bazı kodlar da kullanılan şeyler bazı yerlerde de aynı olduğu için yazarken zorlanıyoruz.
    Artık bunun ile bir kod içeriğimizi başka içerikde çağırabiliyoruz.


    Hadi bunu daha yakında görelim.
    Code:
    .radius{
    border-radius:50%;
    }
    .block-header{
    .radius;
    color:white;
    }
    //Çıktı
    .block-header{
    border-radius:50%;
    color:white;
    }
     
    fadime58 likes this.
  3. nalbantmedia

    nalbantmedia Üye

    Mesajlar:
    15
    Likes Received:
    5
    farklı ilk defa duydum kodlamayı emeğine sağlık
     
    Âlfonse likes this.
  4. ZadobaTR

    ZadobaTR Üst Tabaka

    Mesajlar:
    45
    Likes Received:
    34
    Kardeşim süper anlatım olmuş, paylaşımın için eline yüreğine sağlık
     
    Âlfonse likes this.
  5. Owner
    Owner
    Âlfonse

    Âlfonse Kıdemli üye

    Mesajlar:
    198
    Likes Received:
    196
    Teşekkürler arkadaşlar
     
  6. fadime58

    fadime58 Üst Tabaka

    Mesajlar:
    46
    Likes Received:
    17
    Emeğinize sağlık
     
    Âlfonse likes this.
Loading...

Bu sayfayı Paylaş