Sublime Text 3 Less Kurulumu ve Bir Örnek

42-long-shadow-iconsBuralar ıssızlaştı biraz. Ben de en azından kurulumunu yapıp denemek istediğim bir Css Framework undan bahsedeyim dedim. Freelance olarak çalışıyorsak kendi alanımız dışında da arada bir iş alabiliyoruz. Bazen ihtiyaç olduğunda yapmamız gerek. Ve bu sıkıcı olmuyor arada bir PHP dışında arayüz geliştirmekte hem eğlenceli oluyor hem de ayrı bir deneyim daha kazandırıyor insana. Ben de PHP dışında aldığım arayüz işlerim de Css tarafında Less ile yazma kararı verdim. Yani tek bir özelliği, tekrar tekrar Css de yazmak yerine onu değişken olarak kullanmak yada her hangi bir sabit yapıyı fonksiyon içine alıp parametreleri, kullanıma göre vermek kolaylık sağlıyor. Bunun ile ilgili yaptığım örneği paylaşacağım. Yalnız Less ile ilgili bir anlatım yapmayacağım. Ben sadece Sublime Text 3 Less kurulumunda Türkçe bir kaynak olmadığından yararlı olabileceğini düşünüyorum. Ayrıca Less kullanım örnekleri ile ilgili linki sizle paylaşacağım.

  1. 1. Öncelik olarak Sublime Text ‘de eklenti kurulumu için ‘ CTRL + ” ‘ ile konsolu açarak Package Control ‘u yüklememiz gerekiyor. Bunun için konsola girilmesi gereken satırlar linkte mevcuttur.
  2. 2. Ardından ‘CTRL + Shif + P’ ile Package Control ‘u açarak Install Package yazarak çıkan seçeneği seçmeliyiz.
  3. 3. Sonrasında ise LESS yazarak Less Syntax i yüklemeliyiz.
  4. 4. Son olarak smart less build yükleyip Sublime Text ‘e reset atarak Less kullanımına başlayabiliriz.

Adımlarımız bu kadar. Şimdi ise UI PIXELS ‘den bir buton tasarımı indirmiştim. Yapıp konu olarak paylaşacaktım ama yapmışken Less kurulumuna da değinip öyle paylaşım yapayım dedim. İndirdiğim tasarımın linki ve yaptığım örneğin indirme ve demo linkini aşağıda bulabilirsiniz.

Demo  : 42-long-shadow-icons

UIPIXELS Tasarım Linki : Buton Tasarımı

HTML/CSS Halinin GitHub Linki : HTML/CSS Hali

Less Kullanımı İçin Kaynak : http://lesscss.org/

Yayınlayan

Bulut Üzer

Web ortamında gelişmesine yardımcı olan Yusuf Doru sayesinde şuan web developer olarak ilerlemekte.Web ve mobil ortamlarda uygulama geliştirmeye çalışmak da.Ayrı yeten de kişisel blogunda web ve php ile ilgili çalışmalarını ve deneyimlerini paylaşmayı hedeflemekte.

“Sublime Text 3 Less Kurulumu ve Bir Örnek” üzerine 6 yorum

  1. Hocam Anlatımınız için teşşekür ederim saollun sizin dediklerinizi uyguladım
    “Package Control: Install Package” tıklayıp eklentilere ulaşabiliyorum ama less syntax yoktur ve smart less luis yoktur yardımcı olablirseniz sevinirim.

    1. Teşekkür ederim. Geç dönüş için kusura bakmayın, şimdi 2. adımdan sonra LESS yazar yazmaz ilk başta çıkması gerekiyor kontrol ettim tekrardan yanlış olmasın diye. Aynı şey Smart Less Build içinde geçerli. Önceden kurmaya denemiş olabilir misin? Eğer denememişsen Less Syntax ve Smart Less Build ‘i linkler üzerinden indirebilirsin.
      LESS Syntax
      Smart LESS Build

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir