Betül SARAL

Bilgisayar Mühendisi

Less Css NEDİR?

| Comments

  • LESS CSS Nedir?
  • Neden Less Css Kullanmalıyız ?
  • Less Css Kurulum Ve Kullanımı
  • Less Css Özellikleri

    • 1- LESS CSS Nedir?

    Less css adından da anlaşılacağı gibi css de daha az kod yazarak daha kısa zamanda çok iş yapmamızı sağlar. Ayrıca kodların daha düzenli ve anlaşılır bir biçime gelmesine de önemli bir rol oynar.

    2- Neden Less Css Kullanmalıyız ?

    Artık web uygulamaları basit veya küçük css dosyaları ile şekillendirilen uygulamalar olmaktan çıkıp daha karmaşık ve daha uzun stil dosyalarına dönüştüler.Kodlarımızın anlaşılır olması,belirli bir düzene sahip olması ve daha az yer kaplamasını sağlamak amacıyla less css yi kullanırız.

    3- Less Css Kurulum Ve Kullanımı

    A-)Linux ve Türevleri İçin

    Linux ve türevleri olan işletim sistemlerinde less css yi kurmak için ilk başta aşağıdaki 4 kod terminale girilir.

    Terminal 
    1
2
3
4
5
6
7

    $ sudo apt-get install rubygems1.8 ruby1.8-dev

$ sudo gem install rubygems-update

$ sudo gem update rubygems

$ sudo gem install less

    Kurulum tamamlandıktan sonra .less uzantılı belgemizi aşağıdaki komut sayesinde terminalden derlemiş oluruz.

    Terminal 
    1

    $ lessc deneme.less

    B-)Windows İçin

    Windows işletim sisteminde less css yi kullanmak için WİNLESS adında bir derleyici program kullanılır.Kullanıcının yaptığı .less uzantılı belge bu derleyicide seçilir ve derleme işlemi sonunda .less belgesiyle aynı isimde yeni bir css belgesi oluşur.

    4- Less Css Özellikleri

    A-)Değişkenler

    CSS de tekrar tekrar kullanmamız gereken değerleri bir değişkene atamamızı sağlar.

    1
2
3
4
5
6
7
8
9
10
11

    // LESS CSS					/* COMPİLED CSS */

	  @renk: #4D926F;			#header {
	  #header {	
									color: #4D926F;
		color: @renk;
	  } 						}
	  h2 { 						h2 {
									color: #4D926F;
		color: @renk;			}
	  }

    B-)Katmanlar

    Bir sınıfı başka bir sınıf içerisinde kullanabilme olanağı sağlar.

    1
2
3
4
5
6
7
8
9
10
11
12

    //LESS CSS							/* COMPİLED CSS */

	.bordered {  						#menu a {
	  border-top: dotted 1px			  	color: #111;
	  black;					  			border-top: dotted 1px black;
	border-bottom: solid 2px				border-bottom:		  		
		black;					  			solid 2px black;
	}						 			}
	#menu a {					
		color: #111;
		.bordered;
	}

    C-)İç İçe Kurallar

    Kodları iç içe yazarak daha anlaşılır bir hale getirebilriz.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    //LESS CSS					/*COMPİLED CSS */

   #header {						#header h1 {
	h1 {					 		 	font-weight: bold;
	font-size: 26px;			  			font-size: 26px;}
	font-weight: bold;
        }									#header p {
   p { font-size: 12px;				  			font-size: 12px;}
		a { text-decoration:				#header p a {
			none;					  			text-decoration:none;}
			&:hover { border-width: 1px     #header p a :hover{
					}				  			border-width:1px} 				
		}
     }
  }

    D-)Fonksiyonlar Ve Operatörler

    Fonksiyonlar üzerinde çarpma, çıkarma, toplama, bölme gibi işlemler yaparak değerleri yeniden ayarlayabiliriz.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    //LESS CSS						/*COMPİLED CSS */

@the-border: 1px;							#header {
@base-color: #111;								color:#333;
@red:  #842210;									border-left:1px;
#header {										border-right:2px;
	color: @base-color * 3;					}
	border-left: @the-border;		
	border-right: @the-border * 2;			#footer {
}												color:#114411;
												border-color:#7d2717;
#footer {									}
	color: @base-color + #003300;
	border-color: desaturate(@red, 10%);
}

    Comments