ژ.ب ١٣٨٢

بزۆکە ستایڵی نووسینی CSS بە ناوی Less CSS بناسە بۆ باشتر و خێراتر نووسینی CSS


تکایە تێبینی ئەوە بکە ئەم بابەتە بۆ ئەو خوێنەرانەیە کە لەگەڵ نووسینی CSS دا ڕاهاتوون و چۆنیەتی کارکردنی CSS ـیان لاڕوونە. ئەگەر تا ئێستا بە شێوەیەکی پێویست کارت لەگەڵ CSS نەکردووە پێشنیار دەکەم بابەتی فێربوونی CSS بخوێنیتەوە و دواتر بەردەوام بیت لە خوێندنەوەی ئەم بابەتە.

https://www.webchin.org/v3-images/babet/less-css/less-css-intro-image.png

Less CSS بریتییە لە ستایڵێکی بزۆک کە کێشەی سادەیی و دووبارە کردنەوەی کۆد لە CSS چارەسەر دەکات. لە CSS ی ئاساییدا ناتوانین تایبەتمەندیی وەک Variable بەکار ببەین و لە درێژایی پرۆژەکەمان دووبارە بانگیان بکەینەوە، بەڵام بە هاوکاری Less کە ستایڵێکی بزۆکە بۆ نووسینی فرمانەکانی CSS دەتوانین Variable, Mixin و جۆرەکانی دیکەی بزۆک بوونی کۆدەکانمان بنووسین.

بۆ باشتر پێناسەکردنی Less بە نموونەیەکی سادە دەست پێدەکەین.

ئەگەر بە شێوەی ئاسایی بمانەوێت ڕەنگی نووسین بگۆڕین کە چەندین کلاسی جیاوازی CSS بەکار ببات، وەک نموونەی خوارەوە،

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Demo</title>
    <style>
    .deq1{
        color: #f70404;
    }
    .deq2{
        color: #f70404;
        font-size: 1em;
    }
    .deq{
        color: #f70404;
        font-weight: bold;
    }
    </style>
</head>
<body>
    <div class="deq1">دەقێک</div>
    <div class="deq2">دەقێکی دیکە</div>
    <div class="deq3">دەقی سێیەم</div>
</body>
</html>

لە نموونە کۆدی سەرەوە ڕەنگی سوورمان بەکار بردووە لە هەر سێ کلاسی CSS دا، ئەگەر دواتر بمانەوێت دەستکاری بکەین دەبێت پێویستە لە هەر ٣ شوێنەکەدا کۆدی ڕەنگەگە بگۆڕین. بەڵام ئەگەر CSS ـەکەمان بە Less بنووسین، بە شێوازی خوارەوە دەبێت.

@sur: #f70404;
@qebare: 1em;
@bold: bold;

.deq1{
    color:@sur;
}
.deq2{
    color:@sur;
    font-size:@qebare;
}
.deq2{
    color:@sur;
    font-weight:@bold;
}

وەک دەبینین لە کۆدەکانی Less دا Variable ـێکمان نووسیووە بە ناوی sur کە بە هێمای @ دەست پێدەکات و نرخی ڕەنگی سووری لە خۆ گرتووە. دواتر لە نێو کلاسەکانماندا لە باتی ئەوەی کۆدی ڕەنگی سوور بنووسین، تەنیا بانگی Variable ی sur ـمان کردوو. ئەنجامی کۆدەکانی سەرەوە هەر هەمان ئەنجامی CSS سەرەوە دەبێت، لەگەڵ جیاوازیی ئەوەی کە تەنیا لە یەک شوێن کۆدی ڕەنگی سوورمان نووسیووە و ئەگەر بمانەوێت کۆدی ڕەنگەکە بگۆڕین، تەنیا پێویست دەکات لە یەک شوێن بیگۆڕین.

بۆ ئەوەی کۆدەکانی سەرەوەی Less بگۆڕدرێن بۆ CSS ی ئاسایی، پێویستمان بە CSS Pre-Processor دەبێت کە توانای نووسینەوەی کۆدەکانی Less ی هەبێت بۆ CSS ی ئاسایی. بۆ سیستەمی ویندۆز WinLess ئامرازێکی سادە و بە توانایە،

https://www.webchin.org/v3-images/babet/less-css/winless-setup.png

پرۆگرامی WinLess بە ئەو شێوازە کار دەکات، کە جاودێری بوخچەیەک دەکات کە کۆدەکانی Less ی لە خۆ گرتبێت و دەستبەجێ لە کاتی هەر گۆڕانکارییەکدا دەیاننووسێتەوە بۆ CSS ی ئاسایی. بۆ نموونە بوخچەیەک درووست دەکەین بە ناوی css و لە نێو بوخچەکەدا پەڕگەیەک درووست دەکەین بە ناوی style.Less تێبینی بکە کە پاشگری پەڕگە پێویستە Less بێت بۆ ئەوەی WinLess بتوانێت چاودێریی بکات.

هەموو کۆدەکانی Less لە نێو style.Less دەنووسین و هەر کاتێک گۆڕانکارییەکانمان پاشەکەوت بکەین، WinLess کۆدەکانمان دەنووسێتەوە بۆ CSS ی ئاسایی و پەڕگەیەکی نوێ بە ناوی style.css درووست دەکات.

https://www.webchin.org/v3-images/babet/less-css/winless-windows-gui.png

پاش دامەزراندنی پرۆگرامی WinLess کرتە لە Add Folder بکە بۆ هەڵبژاردنی ئەو بوخچەیەی کە پەڕگەی style.Less ی لە خۆ گرتووە. دواتر کرتە لە دووگمەی Compile بکە بۆ جاری یەکەم بۆ درووستکردنی style.css. ئەو هەنگاوە تەنیا بۆ جاری یەکەم پێویستە و دەتوانیت بگەڕێیتەوە بۆ کۆد نووسەکەت بۆ نووسینی کۆدەکانی Less.

بۆ سیستەمی ماک پرۆگرامی SimpleLess هەیە (هەروەها بۆ ویندۆزیش هەیە)، بە هەمان شێوەی WinLess کار دەکات.
http://wearekiss.com/simpLess

پرۆگرامی Koala بۆ لینوکس و سیستەمەکانی دیکەش،
http://koala-app.com

دیارە سوودی هەبوونی Variable ی سەرەوە و بەکاربردنی لە پرۆژە و کۆدی زۆرتردا بە نرختر دەبێت. چوونکە دەتوانین هەمان Variable سەدان و هەزاران بانگ بکەینەو.

Variable ـەکانی Less دەکرێت کاری وردتر لە تەنیا لە خۆ گرتنی نرخێک جێبەجێ بکەن، بۆ نموونە دەتوانین Variable ـێک بنووسین بۆ پێدانی بۆشایی،

@padding: 10px;

لە کاتی بەکاربردندا دەتوانین هەمان Variable دووبارە بەکار ببەینەوە بە شێوەیەک کە کاری زۆرترمان بە کەمترین کۆد دووبارە کردنەوە بۆ جێبەجێ بکات.

.deq1{
    color:@sur;
    padding:@padding @padding+5;
}

لە کۆدەکانی سەرەوە هەمان نرخی Padding ـمان بەکاربردووە، لە جاری یەکەم دا هەمان نرخی دیاریکراوی دەبێت (١٠ پیکسڵ)، بەڵام لە بەکاربردنەوەی جاری دووەم دا ٥ پیکسڵمان بە هەمان Variable زۆرکردووە. کە لە ئەنجام دا نرخی Padding ی دووەم دەبێتە ١٥ پیکسڵ.

ئەنجامی Less ی سەرەوە دەبێتە،

.deq1 {
  color: #f70404;
  padding: 10px 15px;
}

کەواتە دەتوانین فرمانی بیرکاری لەسەر Variable ـەکانی Less جێبەجێ بکەین.


دووبارە بەکاربردنەوەی Class


تایبەتمەندییەکی دیکەی سوودبەخشی Less ڕێگەدانە بە دووبارە بەکاربردنەوەی CSS Class بە تەواوی لەسەر هەمان بنەمای Variable. بۆ نموونە دەتوانین یەک جار کلاسێک بنووسین بۆ دیاریکردنی قەبارە، ڕەنگ، ستایڵی تایبەت بە نووسین.

.style{
    font-family: Tahoma;
    font-size: @qebare;
    font-weight: @bold;
    border-bottom: 1px solid @sur;
}

لە نموونەی سەرەوە کلاسێکمان هەیە کە کۆمەڵێک ڕێکخستنی لە خۆ گرتووە، لە نێو کلاسەکەدا ئەو Variable ـانەمان بەکاربردووە کە پێشتر نووسیمان. ئەوەی کە گرینگە لە ئێرەدا هەموو ئەو کلاسە بۆ خۆی وەک Variable ـێک دەتوانرێت دووبارە بەکار ببرێتەوە، بۆ نموونە

.serderr{
    padding: @padding @padding+5;
    .style;
}

لە کلاسی serderr دا لە باتی ئەوەی دووبارە هەموو تایبەتمەندییەکانی دەق بنووسینەوە، تەنیا .style دەنووسینەوە و بەکاری دەبەینەوە. ئەو کاتە ئەنجامی .serderr دەبێتە،

.serderr {
  padding: 10px 15px;
  font-family: Tahoma;
  font-size: 1em;
  font-weight: bold;
  border-bottom: 1px solid #f70404;
}

نموونەکۆدەکانی سەرەوە تەنیا سەرەتای Less ـن، توانا و تایبەتمەندیی زۆرتری هەیە کە پێشنیار دەکەم بەردەوام بیت لە خوێندنەوەیان. ماڵپەڕی سەرەکی لە http://lesscss.org هەیە، هەروەها ئامرازێکی سەرهێڵیان هەیە بۆ نووسین و تێستکردنی Less بەبێ دامەزراندنی ئامراز لەسەر سیستەمی خۆت.

بەستەری ئامرازی سەرهێڵ: http://lesscss.org/less-preview

تكایه‌ هه‌ژمارێك درووست بكه‌ بۆ ئه‌وه‌ی بتوانیت بۆچوون بنووسیت، كرته‌ له‌ ئێره‌ بكه‌ بۆ درووستكردنی هه‌ژمار
ئاسۆ نادری2016-05-20

كاریگه‌ریی هه‌یه‌ له‌وه‌ی كه‌ كاتێك كۆده‌كان ده‌نووسیت خێراتر ده‌یاننووسیت. به‌ڵام له‌ كۆتادا هه‌ر CSS ی ئاسایی Generate ده‌بێت و له‌ نێو ماڵپه‌ڕدا كاریگه‌ریی نابێت له‌سه‌ر خێرایی.

Govar_Programer2016-05-20

دەست خۆش کاك ئاسۆ بۆ ڕونکردنەوەکانت ئایە ئەم کردارانە یارمەتیدەرن بۆ خێرا بونەوەی پەڕەی ستایل؟

Rawan2015-12-27

دەستخۆش، زۆر گرنگە.

kurdm mn2015-12-22

Dast xosh kak aso barasti babateki jwana har bzhi zorm ba dla kari lasar dakam