H O K K A
Haber Yazılımında Kampanya İncele
20 Ocak 2015

Sass ile Hızlı İş Akışı Önerileri

Sass ile css kullanımı daha etkin ve verimli bir hal almaktadır. Sass ile gelen daha kolay kod yapısı , değişken kullanımı gibi yenilikler daha verimli bir proje süreci sağlamaktadır.sass-ile-hizli-is-akisi-onerileri Kod yapıları bu sayede daha akılcı ve mantıksal bir şekilde düzenlenmektedir.
Öncelikle sass kullanırken işe yarayacak öğelerden birisi sublime text olmaktadır. Sublime text sayesinde kodlar tahmin fonksiyonu ile sizin hangi kodu yazacağınızı tahmin ederek ekrana girdiğiniz birkaç harften sonra aramalar yaparak altta bazı kod seçenekleri sunmaktadır. Örneğin ekrana “Console Write ” yazmanız gerekmektedir. “Conso” yazdığınız alt tarafta “Conso” ile başlayan kod kalıpları gelecektir. Yön tuşları ile yönlendirmeler yaparak kodun tamamını yazmadan daha hızlı bir şekilde kod yazmanız bu sayede mümkün olmaktadır.
Sublime text kullanırken işinize yarayacak bazı eklentiler bulunmaktadır. Bu eklentilerden bir taneside hayaku olmaktadır. Bu eklenti sayesinde sublime text kullanımınız daha verimli bir şekilde olacaktır. Daha hızlı ve daha verimli bir proje süreci için büyük bir önem teşkil eden bu eklenti sayesinde rahat bir şekilde  Css yazabilirsiniz.
Projenize grafiksel öğeler için bazı ekipmanlara ihtiyacınız olacaktır. Bu ekipmanlardan biri de kullandığınız platformdaki cetvel vb. araçlar olacaktır. Bu araçlar sayesinde daha düzenli ve şık çalışmalar yapmanız mümkün olacaktır. Ekranda düzensiz olan öğeler tasarım sonucunda çirkin bir görünüme neden olacaktır. Buda tasarım süreci için istenmeyen bir durumdur.
Bir diğer öneri ise fontlar olacaktır. Aşağıdaki kod satırlarından yardım alabilirsiniz.
Mixin
font-sizemixin ($ sizeValue: 1.6) {
font-size: ($ sizeValue * 10) + px;
font-size: $ sizeValue + rem;
}

Kullanımı
.element {
include font-size (1.8);
}
Sonuç
.element {
font-size: 18px;
font-size: 1.8rem;
}
Bir diğer öğe ise font-face olmaktadır . Css kullanımında mixin çok büyük bir öneme sahiptir. Css kullanımında büyük fayda sağlayan mixin font-face denilen ve iki değer bekleyen bir öğedir. Birincisi font-family adıdır ve ikincisi de yazının farklı dosya biçimlerinin yoludur.
Mixin
font-face ($ isim, $ url) {mixin
@ font-face {
font-family: # {$ name};
src: url (‘# {$ url} .eot’);
src: url (‘# {$ url} .eot # iefix’) formatında (“embedded-opentype”),
url (‘# {$ url} Ttf’) formatında (‘TrueType’),
url, biçimi (‘svg’) (‘# {$ url} ## {$ name} .svg’)
url (‘# {$ url} .woff’) formatında (‘woff’);

content;
}
}
Kullanımı
include font-face (‘simgeler’, ‘../fonts/icons/iconfont’);
Sonuç
@ font-face {
font-family: simgeler;
src: url (“../ yazı tipleri / simgeler / iconfont.eot”);
src: url (“../ yazı / icons / iconfont.eot # iefix”) formatında (“embedded-opentype”),
url (“../ yazı tipleri / simgeler / iconfont.ttf”) formatında (“TrueType”),
url (“../ yazı tipleri / icons / iconfont.svg # simgeler”) formatında (“svg”),
url (“../ yazı tipleri / simgeler / iconfont.woff”) formatında (“woff”);
}