Blog
PCSS: Kısayol-yönelimli, Sunucu Taraflı CSS3 Önİşlemcisi
- Ayrıntılar
- Kategori: Bilişim
- 30 Aralık 2011 tarihinde yayınlandı.
- THEMT tarafından yazıldı.
"Daha az kodla CSS3 gücünü serbest b?rak ayr?ca s?n?f (class) birle?tirme, sunucu-tarafl? taray?c? özellikleri, varsay?lan birim ve de?i?kenler gibi özellikler" slogan?n? kullanan bir proje!
PCSS Nedir?
PHP ile geliştirilmiş, kolay ve hızlı bir şekilde CSS3 kodları yazmayı yada üretmeyi sağlayan bir araçtır.
PCSS Ne işe yarar?
Ön-Ekler
Sizi, -moz -webkit gibi tarayıcıya ön-eklerinden kurtarır. Böylece sadece CSS anahtarını yazabilirsiniz, PCSS sizin için ön-ekleri oluşturacaktır.
CSS dosyalarının boyutlarını ufaltır.
Siteler daha hızlı yüklenir ve trafik yoğunluğu düşer
Sınıfları Birleştirir
Aşağıdaki örnekte olduğu gibi sınıfları birleştirir.
.class{ BLOCK;
.subclass{ HIDE; }
}ve tarayıcıda sonuç aşağıdaki gibi olacaktır
.class{
display:block;
}
.class .subclass{
display:none;
}@font-face için kısa yolu sağlar
Aşağıdaki gibi bir tanımla sizi fazla @font-face tanımlarından kurtarır
fontface [fontname] [fontfiles]
Varsayılan birim ve de varsayılan resim dizinleri kullanmanızı sağlar
Bu işlemden sonra CSSde kullanılan her resim için "images/..." gibi gereksiz yere dizin bilgisi kullanmanız gerekmez
Verileri değişkenlerde tutmanıza izin verir
Değişkenler herhangi bir anda tanımlanabilir
&[variable_name] = [value];
Örnek
&mycolour = #fff;
&floatedbox = display:block; float:left;
Bir Kod Örneği
&mygreen = #f56;
&boxdefault = display:block; float:left;
unit em
imgdir css/images
#id { BLOCK; SIZE:80 80; BGPOS:80 0; BGIMG:image.gif; color:&mygreen; }
.class { BLOCK;
.css {
BOUNDS:10,20 20;
.aaa { &boxdefault; RADIUS:30; }
}
}FireFox tarayıcısındaki sonuç (Sunum için boşluklar ve yeni satırlar dahil edilmiştir)
#id { display:block; width:80em; height:80em; background-position:80em 0em; background-image:url(css/images/image.gif); color:mygreen; }
.class { display:block; }
.class .css { padding:10em; margin:20em 20em; }
.class .css .aaa { display:block; float:left; border-radius:30em; -moz-border-radius:30em; }PCSS sitesine gitmek ve daha fazla bilgi için tıklayın
Yazı tarafımca yazılmıştır, kaynak berlitme amaçlı bu sayfanın adresi belirtilirse, kullanmanızda sorun oluşmayacaktır.
