خێراتر نووسینی CSS بە بەکارهێنانی Sass

11, ته‌مموز, 2017 | CSS

Sass کە کورتکراوەی (Syntactically Awesome StyleSheets)ـە، ئامرازێكه‌؛ کارامەیی و توانای زیاتر بە CSS دەبەخشێت. Sass ڕێگە دەدات بە بەکارهێنانی گۆڕاوەکانVariables، بەدوای یەکداهاتووەکانNesting، تێکەڵکراوەکانMixins، هاورده‌كردنImport و چەندین تایبەتمەندی تر كه‌ له‌ بنه‌ڕه‌تدا له‌ CSS دا بوونیان نییه‌. هه‌بوونی ئه‌م تایبه‌تمه‌ندییانه‌ی Sass، ئاسانكارییه‌كی زۆر بۆ كۆدنووس ده‌كات كه‌ به‌ كاتێكی كه‌م ستایلی مه‌به‌ست ئاماده‌بكات. له‌م بابه‌ته‌دا سه‌ره‌تایه‌ك ده‌رباره‌ی تایبه‌تمه‌ندی و تواناكانی Sass به‌ كوردی باس ده‌كه‌ین.

تایبەتمەندییەکان:

  • تەواو گونجاو لەگەڵ CSS.
  • به‌كارهێنان و پاڵپشتیكردنی گۆڕاوەکانVariables، بەدوای یەکداهاتووەکانNesting، هاورده‌كردنImport.
  • کۆمەڵێک نەخشەfunctionی بەسوود بۆ هەڵسوڕاندنی ڕەنگەکان و نرخە جیاوازەکان.
  • بەکار‌هێنانی مەرجەکان و ئالقەکانLoops.
  • پاڵپشتی كردنی كرده‌ بیركارییه‌كان و به‌كارهێنانیان بۆ هه‌ژمێكردنی نرخه‌كان.
  • دووباره‌ به‌كارهێنانه‌وه‌ی ستایله‌كان له‌ ڕێگه‌ی تێکەڵکراوەکان.Mixins

دامەزراندن و بەکارهێنان


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

  • Scout نه‌رمه‌واڵه‌یه‌كی سه‌رچاوه‌كراوه‌یه‌ و له‌سه‌ر سیسته‌می ویندۆز و ماك كارده‌كات.
  • Koala به‌ هه‌مان شێوه‌یه‌ ئه‌مه‌ش نه‌رمه‌واڵه‌یه‌كی سه‌رچاوه‌كراوه‌یه‌ بۆ سیسته‌مه‌كانی ویندۆز، ماك و لینوكس.

جگه‌ له‌م دوو نه‌رمه‌واڵانه‌ی ئاماژه‌م پێداوه‌، چه‌ندانی تر هه‌ن وه‌ك GhostLab، Hammer، CodeKit و Prepos.

ڕێگەی دووەمی دامەزراندن و بەکارهێنانی Sass لە ڕێی Command-Line ـەوەیە. بۆ ئەوەی بەکارهێنەرانی ویندۆز سوودمەند بن لە بەگەڕخستنی Sass ئه‌وا ده‌بێت سه‌ره‌تا Ruby Installer داگرن و دایبمه‌زرێنن.
كاتێك دڵنیابوویت كه‌ Ruby له‌ سیسته‌مه‌كه‌ت دامه‌زراوه‌ ئه‌وا لە Command Promptـی ویندۆز یان له‌ تێرمیناڵی لینوكس یان ماك ئەم فرمانەی خوارەوە بنووسه‌:

 Gem install sass

له‌ سیسته‌می ماكدا، Ruby وه‌ك بنه‌ڕه‌ت دامه‌زراوه‌، بۆیه‌ ته‌نها ئه‌م فرمانه‌ی سه‌ره‌وه‌ بنووسه‌، ئیتر sass داده‌مه‌زرێت.

بۆ دڵنیابوون لەوەی کە Sass لە کۆمپیوتەرەکەت دامەزراوە، ئەم فرمانە بنووسە:

 Sass -v

ئەنجامەکەی دەبێت نووسینێکی وەک ئەمەی خوارەوە بێت (ژماره‌كان؛ وه‌شانی Sass ده‌رده‌خه‌ن، ڕه‌نگه‌ لای تۆ وه‌شانی نوێتر ده‌ربكه‌وێت):

Sass 3.4.23 (Selective Steve)

بۆ بەگەڕخستن و وه‌رگێڕانی په‌ڕگه‌كانی Sass بۆ CSS ئەم فرمانە بەکاربێنە:

 sass input.scss output.css

لێره‌دا input.scss بریتییه‌ له‌و په‌ڕگه‌یه‌ی كه‌ كۆده‌كانی sass ت تیا پاشه‌كه‌وت كردووه‌، هه‌روه‌ها په‌ڕگه‌ی output.css بریتییه‌ له‌و كۆده‌ وه‌رگێڕدراوانه‌ی په‌ڕگه‌ی input.scss بۆ CSS.

بۆ نوێبوونه‌وه‌ی په‌ڕگه‌ی CSS به‌ شێوه‌یه‌كی ڕاسته‌وخۆ و خۆكار به‌پێی ئه‌و گۆڕانكارییانه‌ی له‌ په‌ڕگه‌ی scss ده‌كرێت، ئه‌م فرمانه‌ به‌كاربێنه‌.

sass –watch input.scss:output.css

بۆ ئاشنابوون و وەرگرتنی زانیاری زۆرتر لەسەر بەکارهێنانی Sass لە ڕێگەی Command-line، ئەم فرمانە بنووسە:

 Sass –help

گۆڕاوەکان له‌ Sass


وەک ئاشکرایە گۆڕاو توانای هەڵگرتنی زانیاری هەیە بە مەبەستی دووبارە بەکارهێنانەوەی لە جێگەی جیاواز. Sass ئەم تایبەتمەندییە دەبەخشیت بە کۆدنووس تا نرخە جیاوازەکانی وەک ڕەنگ، فۆنت و چەندین نرخی تر وه‌ك گۆڕاوێك بناسێنێت و دواتر له‌ شوێنی پێویست به‌كاربێنێته‌وه‌.
ناونانی گۆڕاو لە Sass سەرەتا بە نووسینی نیشانەی دۆلار $ دەستپێدەکات پاشان ناوی گۆڕاوەکە پێویستە بنووسرێت، دواتر دوو خاڵی لەسەریەک دادەنرێت ئینجا نرخەکان دەنووسرێن وەک ئەم نموونەیە:

$font-color: #999;
$fonts: Tahoma, Arial, Serif;
Body{
font-family: $fonts;
color: $font-color;
}

کاتێک ئەم کۆدەی سەرەوە وەردەگێڕدرێت بۆ کۆدی ئاسایی CSS ئەوا ئەنجامەکەی بەم شێوەیە دەبێت:

body{
font-family: Tahoma, Arial, Serif;
color: #999;
}

كه‌رته‌كان


بە مەبەستی ئاسان دەستکاریکردن و گۆڕانکاری کردن لە کۆدەکان، دەکرێت کۆدەکانت کەرت بکەیت و لە چەند پەڕگەیەکدا پاشەکەوتیان بکەیت، دواتر هاوردەیان بکەیت بۆ پەڕگە سەرەکییەکەت. ناونانی پەڕگەی کەرتکراو بە نووسینی بنهێل (_) دەستپێدەکات ئینجا ناوی پەڕگەکەی بەدوادا دێت لەگەڵ پاشگری (.scss).
بەهۆی بوونی نیشانەی بنهێل لەسەرەتای ناوی پەڕگەکە، Sass تێدەگات کە ئەمە پەڕگەیەکی بەشکراوە و پێویست بەوە ناکات بگۆڕدرێت بۆ پەڕگەیەکی ئاسایی CSS. پەڕگە بەشكراوەکان لەڕێگەی import@ هاوردە دەکرێن.

هاوردەکردن


لە CSSـدا تایبەتمەندی هاوردەکردنImport هەیە کە ڕێدەدات به‌ بانگكردنی چه‌ند په‌ڕگه‌یه‌كی CSS و كۆكردنه‌وه‌یان له‌ یه‌ك په‌ڕگه‌. تاکە لایەنی خراپی ئەم تایبەتمەندییە لە CSS ئەوەیە کاتێک import@ بەکاردێنیت بۆ هەر پەڕگەیەک ئەوا داواکارییەکی (HTTP) زیاد دەبێت بەڵام لە Sass ـدا ئەو پەڕگەیەی کە دەتەوێت هاوردەی بکەیت دەخرێتە پاڵ ئەو پەرگەیەی بۆی هاوردەکراوە بەبێ داواکاری HTTP بۆ پەڕگە هاوردەکراوەکە. بەمەش وەک تاکە پەڕگەیەکی CSS لە وێبگەڕدا دەخرێتەکار.
بۆ ئەوەی بەرچاوڕوونی زیاتر لەسەر بەکارهێنانی هاوردەکردن لە Sassـدا بخەینەڕوو، ئەوا ئەم نموونەیە باس دەکەین. وایدابنێ دوو پەڕگەمان هەیە بە ناوەکانی reset.scss_ و sereki.scss وەک لە ناوەکەدا دیارە (reset.scss_) پەڕگەیەکی بەشكراوە و ئەم کۆدانە لەخۆ دەگرێت:

// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}

هەروەها پەڕگەی sereki.scss لەم کۆدانە پێکهاتووە:

// base.scss
@import ‘reset’;
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

وەک دیارە لە پەڕگەی sereki.scss دا پەڕگەی reset.scss_ هاوردەکراوە لە ڕێگەی بەکارهێنانی تایبەتمەندی import@. ئەوەی کە جێی سەرنجە کاتێک پەڕگەیەک هاوردە دەکەیت پێویست بە نووسینی بنهێلی ناوی پەڕگەکە لەگەڵ پاشگرەکەی ناکات.
کاتێک ئەم کۆدانەی سەرەوە دەگۆڕدرێن بۆ CSS ئەوا ئەمه‌ ئه‌نجامه‌كه‌ی ده‌بێت:

html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

تێکەڵکردن


کۆمەڵێک تایبەتمەندی CSS3 هەن کە لەلایەن هەموو وێبگەڕەکانەوە بە دروستی کارناکەن، بە جۆرێک لە هەندێک وێبگەڕدا پێویستت بە نووسینی پێشگرێک هەیە لە پێش ناوی تایبەتمەندییەکە تاکو وێبگەڕەکە؛ تایبەتمەندییەکە کارپێبکات. بۆ نموونە لە وێبگەڕی فایرفۆکسدا پێشگری -moz- دادەنرێت یاخود بۆ chrome و safari پێشگری -webkit- دادەنرێت. نووسینی ئەم پێشگرانە لە بەردەم هەر تایبەتمەندییەک، کارێکی بێزارکەرە. له‌ Sass ـدا ئەرکەکە ئاسان کراوە بە بەکارهێنانی تایبەتمەندی تێکەڵکردن.
سەیرێکی ئەم نموونەیەی خوارەوە بکە.

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }

بۆ ئەوەی تایبەتمەندی تێکەڵکردن بەکاربخه‌یت دەبێت سەرەتا بە نووسینی mixin@ دەستپێبکەی، پاشان تێکەڵکردنەکە ناودەنێین کە لە نموونەی سەرەوەدا بریتییە لە border-radius ،دواتر لە نێوان دوو کەوانەی خڕدا ناوی گۆڕاو دەنووسین کە نرخی تایبەتمەندییەکە لە خۆ دەگرێت لەکاتی بانگکردندا. ئینجا لە نێوان دوو کەوانەی لۆچدا تایبەتمەندی CSS لەگەڵ نووسینی پێشگرەکان بۆ هەر وێبگەڕێک دەنووسین.
ئێستا ئەگەر بمانەوێت لێوارەکانی کلاسی (box) خڕ بکەین ئەوا سه‌ره‌تا include@ ده‌نووسین پاشان ناوی تێکەڵکردن و لە ناو کەوانەی خڕدا نرخی تایبەتمەندییەکە دەنووسین. ئەگەر ئەم نموونەیەی سەرەوە بگۆڕین بۆ CSS ئەوا ئەنجامەکەی بەم شێوەیە دەبێت:

.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}

کردەهێماکان


کردە بیرکارییەکانی وەک ( +، – ، * ، / ، ٪) دەتوانرێت بەکاربهێنرێن لە Sassـدا

.container { width: 100%; }
article[role=”main”] {
float: left;
width: 600px / 960px * 100%;
}
aside[role=”complementary”] {
float: right;
width: 300px / 960px * 100%;
}

ئەنجامەکەی بەم شێوەیە دەبێت ئەگەر بیگۆڕین بۆ CSS

.container {
width: 100%;
}
article[role=”main”] {
float: left;
width: 62.5%;
}
aside[role=”complementary”] {
float: right;
width: 31.25%;
}

كۆتایی


ئێستا Sass به‌كارهێنه‌رێكی زۆری له‌ ده‌وری خۆیدا كۆكردۆته‌وه‌، چونكه‌ Sass ئامرازێكی ئاسانه‌ له‌ به‌كارهێنان و كاتێكی زۆریش بۆ كۆدنووس ده‌گێڕێته‌وه‌. له‌م بابه‌ته‌دا زانیمان Sass چییه‌ و هه‌ندێك تایبه‌تمه‌ندی گرنگمان ئاماژه‌پێدا. له‌ بابه‌تی داهاتوودا زیاتر ده‌چینه‌ قوڵایی بابه‌ته‌كه‌ و نموونه‌ی زیاتر ده‌خه‌ینه‌ به‌رباس.

© 2018 نوێكار - هه‌موو مافه‌كان پارێزراون