ساس کے ساتھ شروع کیسے کریں

ساس ایک طاقتور آلہ ہے جو دیگر پروگرامنگ زبانوں میں سی ایس ایس میں بہت سے خصوصیات لاتا ہے - جیسے افعال، متغیرات اور چھتوں کے طور پر - اس کے ساتھ ساتھ اس کی اپنی بدیہی خصوصیات جیسے مکسین، گھوںسلا اور جزوی طور پر کچھ نام کرنے کے لئے.

اس سبق میں ہم ساس لوپس، مکسین اور افعال کا استعمال کرتے ہوئے سماجی شبیہیں بنائے جائیں گے. ہم ساس میں دستیاب طاقتور گھوںسلا استعمال کرتے ہیں.

• ساس کیا ہے؟

ہم اپنے سماجی شبیہیں پیدا کرنے کے لئے SASS میں ایک فہرست تخلیق کریں گے، جس میں سب سے پہلے کلاس نام، فونٹ حوالہ اور رنگ شامل ہو گا - اور بعد میں ٹول ٹپ.

اور ہم قابل استعمال ذرائع ابلاغ کے سوالات کو تخلیق کرنے اور ایک فنکشن بنانے کے لئے ایک فنکشن بنانے کے لئے Maxins کا استعمال کرتے ہوئے استعمال کریں گے. ایسا کرنے کے لئے ہم اپنے بیس فونٹ سائز کے لئے ایک متغیر بنائے جائیں گے.

آپ کے سسٹم اور آپ کی تعمیر کے ٹولنگ کی ضروریات پر منحصر ساس نصب کرنے اور استعمال کرنے کے کئی طریقے ہیں - مزید تفصیلات پایا جا سکتا ہے یہاں تاہم، ہم codepen استعمال کرتے ہیں کہ ہم آسانی سے ممکنہ طور پر آسان چیزوں کو برقرار رکھنے کے لئے سی ایس ایس میں مرتب کریں.

ساس کی طاقت کو یقینی بنانے کے لئے اور اپنے آپ کو مخصوصیت کے گندگی میں نہیں ملتی ہے اور پیچیدگی سی ایس ایس کی ایک ٹھوس تفہیم کی ضرورت ہے. SASS کا خاص ذائقہ ہم SCSS (Sassy CSS) کا استعمال کرتے ہیں، مطلب یہ ہے کہ ہم اب بھی ہمارا ساس کوڈ میں گھوبگھرالی بریکٹ {} کا استعمال کریں گے.

سبق فائلیں حاصل کریں

اس سبق کے لئے مثال کے طور پر فائلوں کو ڈاؤن لوڈ کرنے کے لئے، جانا فائلیلو سبق کے آگے مفت سامان اور مفت مواد منتخب کریں. نوٹ: پہلی بار صارفین کو فائلوں کو استعمال کرنے کے لئے رجسٹر کرنا پڑے گا.

01. اپنے کوڈپین سی ایس ایس قائم کریں

پہلی چیز ہمیں کرنے کی ضرورت ہوگی ایک نئی قلم بنائیں اور کوڈپین میں سی ایس ایس ایڈیٹر کے لئے کچھ ڈیفالٹ ترتیبات میں سے کچھ کو تبدیل کریں. ہم سی ایس ایس پری پروسیسر کو SCSS میں تبدیل کریں گے اور معمول اور خود کار طریقے سے تبدیل کریں گے.

02. کچھ کوڈ لکھنا شروع کرو

اب ہم نے سب کچھ مقرر کیا ہے ہم کچھ کوڈ لکھ سکتے ہیں. ایچ ٹی ایم ایل ایڈیٹر کے اندر ہم ایک کنٹینر اور ہمارے ہر شبیہیں کے لئے لنک اور آئکن کے اندر اندر ایک کنٹینر بنائے جائیں گے.

یہاں استعمال کردہ ناموں کو ہمارے ایساس کی فہرست میں سی ایس ایس میں ایک حوالہ کے طور پر استعمال کیا جائے گا. ہم اپنے کلاس کے ناموں کے لئے بلم نامنانگ کنونشن کا استعمال بھی کریں گے.

 & lt؛ div class = "سماجی __container" & gt؛
  & lt؛ div class = "social__item" & gt؛
  & lt؛ ایک ہدف = "_ خالی" href = "..."
  کلاس = "سماجی طور پر - ٹویٹر" اور جی ٹی؛
  & lt؛ میں کلاس = "آئکن - ٹویٹر" اور جی ٹی؛ & lt؛ / i & gt؛
  & lt؛ / & gt؛
  & lt؛ / div & gt؛
  ...
& lt؛ / div & gt؛ 

03. بنیادی شیلیوں کو مقرر کریں

سی ایس ایس ایڈیٹر پر منتقل ہم فونٹ- خوفناک سمیت، ہمارے بیس فونٹ سائز اور صفحے کے لئے کچھ بنیادی شیلیوں کے لئے ایک متغیر ترتیب کی طرف سے شروع کریں گے.

 import url (http://srt.lt/w8yt8)؛
// متغیر
$ بیس-فونٹ سائز: 16px؛
// بنیادی اسٹائل
جسم {
  فونٹ سائز: $ بیس-فونٹ سائز؛
  ...
} 

04. ایک بنیادی تقریب بنائیں

اگلا ہم ہمارے '$ بیس-فونٹ سائز' متغیر کا استعمال کرتے ہوئے ان قدر قیمت پر ایک پکسل قیمت کو تبدیل کرنے کے لئے ایک بنیادی فنکشن بنائے گا.

ساس میں افعال 'Function' کا استعمال کرتے ہوئے تخلیق کیا جاتا ہے جس کے بعد فنکشن کا نام اور ان پٹ کو انجام دینے کے لئے استعمال کیا جاتا ہے.

پھر اعلان کے اندر ہم تقریب کا استعمال کرتے وقت قیمت کو پیداوار کرنے کے لئے 'return' کا استعمال کرتے ہیں. حساب کے ارد گرد '# {}' کے لئے استعمال کیا جاتا ہے مداخلت .

 // افعال
Function PX-em ($ پکسلز) {
return # {$ پکسلز / $ بیس فونٹ سائز} EM؛
} 

05. مکسین بنائیں

ہمارے سیٹ اپ کے ساتھ جاری رکھیں ہم اپنے 'PX-tom-em' کی تقریب کا استعمال کرتے ہوئے سادہ موبائل سب سے پہلے میڈیا سوالات کے لئے مکسکس بنائے جائیں گے، جو ہم ایک پی ایکس قیمت میں منتقل کریں گے.

مکسین کا استعمال کرتے ہوئے 'mixin' کا استعمال کرتے ہوئے تخلیق کیا جاتا ہے. اس کے بعد ہم نے ہمارے کوڈ بیس میں بعد میں بلا کر جب ہم مکسین کے اندر داخل ہونے والے کوڈ کو آؤٹ کرنے کے لئے 'content' استعمال کرتے ہیں.

 mixin Viewport - بڑے {
  media صرف اسکرین اور
  (منی چوڑائی: PX-tom-em (1680px)) {
  content؛
}}
Mixin Viewport - درمیانے درجے کی {
  media صرف اسکرین اور
  (مائن چوڑائی: PX-tom-em (1080px)) {
  content؛
}} 

06. ایک SASS کی فہرست قائم کریں

ہمارے سیٹ اپ میں آخری قدم ایک فہرست بنانا ہے. SASS میں فہرست ایک متغیر کا استعمال کرتے ہوئے تخلیق کیا جاتا ہے؛ اس کے بعد عین مطابق مطابقت پذیری بہت ڈھیلا ہے، وسیع پیمانے پر قبول کرتے ہیں اس کی وضاحت کرنے کے طریقے .

متغیر کے اندر ہم ہر آئکن کے لئے کلاس کا نام، یونیسیڈ ویلیو اور رنگ کی وضاحت کریں گے، ان کے ساتھ، پیرس کے اندر ایک کوما کے ساتھ الگ الگ.

 $ آئکن فہرست: (
  Vimeo "\ F27D" # 1ab7ea،
  ٹویٹر "\ F099" # 1da1f2،
  ...
  GitHub "\ F113" # 333،
  آر ایس ایس "\ F09E" # F26522.
)؛ 

07. قطار میں اپنے شبیہیں دکھائیں

ہمارے سماجی شبیہیں کے لئے قطار میں ظاہر کرنے کے لئے ہم ان میں سے ہر ایک کے کنٹینرز میں کچھ سادہ سی ایس ایس شامل کریں گے.

 .آئیلیلیل {
  ڈسپلے: ان لائن بلاک؛
  مارجن دائیں: 0.05em؛
} 

08. مشترکہ آئکن سٹائل بنائیں

ہم سی ایس ایس کی مقدار کو کم سے کم کرنے کے لئے ہم 'آئکن' کے ساتھ شروع ہونے والے تمام طبقات کو تلاش کرنے اور ان کے لئے ایک مشترکہ انداز تخلیق کرنے کے لئے ایک CSS3 انتخاب کنندہ کا استعمال کرتے ہوئے استعمال کریں گے.

 [کلاس ^ = "آئکن"] {
  فونٹ-خاندان: 'FontAwesome'؛
  بولیں: کوئی بھی نہیں
  فونٹ سٹائل: عمومی؛
  فونٹ وزن: عمومی؛
  فونٹ- مختلف: عمومی؛
  متن ٹرانسمیشن: کوئی بھی نہیں؛
  لائن اونچائی: 1؛
  Webkit-Font-Smoothing: antialiased؛
  -زز - OSX-فونٹ - Smoothing: گرےکل؛ } 

09. ہالی ووڈ اپ بٹن پس منظر

اسی طریقہ کا استعمال کرتے ہوئے ہم 'ایم' میں اپنے اقدار کی وضاحت کے بٹن کے لئے اسی طرح کریں گے، بعد میں ہمیں کنٹینر کا استعمال کرتے ہوئے ان کا سائز تبدیل کرنے کی اجازت دیتا ہے.

 [کلاس ^ = "سماجی __icon"] {
  فونٹ سائز: 1em؛ چوڑائی: 2em؛ اونچائی: 2em؛
  پس منظر کا رنگ: # 333؛
  رنگین: وائٹ؛
  متن سجاوٹ: کوئی بھی نہیں؛
  سرحدی ردعمل: 100٪؛
  متن سیدھا: مرکز؛
  ڈسپلے: فلیکس؛
  سیدھا اشیاء: مرکز؛
  جائز - مواد: مرکز؛
} 

10. ہمارے شبیہیں کے لئے دلی لوپ

اب ہمارے پاس ہمارے تمام بیس شیلیوں ہیں جو ہم اپنی فہرست کو ہر آئکن کے لئے سی ایس ایس مخصوص پیدا کرنے کے لئے استعمال کرسکتے ہیں.

Sass میں ایک لوپ بنانے کے لئے ہم ہر چیز کی ہر قیمت کے لئے نام کے بعد 'DECK' کا استعمال کرتے ہیں. فہرست کی.

لوپ کے اندر ہم HTML میں تخلیق کردہ ہر آئیکن کے چھسو عنصر 'سے پہلے' یونیکوڈ 'کی قیمت پر لاگو کریں گے، جس نے ہم نے پہلے ہی تمام دیگر شیلیوں کی دیکھ بھال کرنے کے لۓ مشترکہ انداز کی اجازت دی ہے.

 ڈیک $ آئکن، $ یونیکوڈ، $ آئکن پس منظر
$ آئکن کی فہرست میں {
  .کون - # {$ آئکن} {
  & amp؛ :: پہلے سے {
  مواد: $ یونیکوڈ؛
  }
  }
} 

11. ہمارے پس منظر کے رنگ کے لئے دلی لوپ

شبیہیں اب کام کر رہے ہیں لیکن ہم اب بھی fallback پس منظر کا رنگ ہے. ہم اس کو ٹھیک کرنے کے لئے اپنی فہرست میں کچھ اور کوڈ شامل کریں گے. مندرجہ بالا اسی طریقہ کار کا استعمال کرتے ہوئے ہم '$ آئکن' کا نام آؤٹ کریں گے لیکن اس وقت 'سوشلائیکن' کلاسوں پر اور اس کے اندر '$ آئکن پس منظر' کا رنگ.

 ڈیک $ آئکن، $ یونیکوڈ، $ آئکن پس منظر
$ آئکن کی فہرست میں {
  ...
  .Social__icon - # {$ icon} {
  پس منظر کا رنگ: $ آئکن پس منظر؛
  }
} 

12. مکسین کا استعمال کریں

مکسکس کا استعمال کرتے ہوئے ہم نے پہلے ہی تخلیق کیا اور اس وجہ سے ہم نے 'ایم' اقدار کا استعمال کرتے ہوئے شبیہیں کو سجیلا کیا ہے. کوڈ ہم میڈیا کے سوال میں شامل کرنا چاہتے ہیں.

 .آئیلیلیل__Container {
  فونٹ سائز: 1em؛
  include Viewport - درمیانے درجے کی {
  فونٹ سائز: 1.5em؛
  }
  include Viewport - بڑے {
  فونٹ سائز: 2em؛
  }} 

13. تعامل ریاستوں اور بلٹ ان افعال شامل کریں

جب ہم بٹن یا کی بورڈ کا استعمال کرتے ہوئے بٹن پر بات چیت کرتے ہیں تو ہم اپنے بٹنوں کو اپنے بٹنوں کو کچھ انٹرایکٹوٹی میں شامل کرسکتے ہیں.

SASS کی ایک بڑی تعداد ہے بلٹ میں رنگ کے افعال ہم نے اپنی فہرست میں مقرر کردہ پس منظر کا رنگ لینے کی اجازت دی ہے اور اس کے ساتھ بات چیت کرتے وقت سیاہ کے ساتھ اسے سیاہ کے ساتھ ملائیں.

 آئکن - # {$ آئکن} {
  پس منظر کا رنگ: $ آئکن پس منظر؛
  & amp؛: ہور،
  & amp؛: توجہ مرکوز،
  & amp؛: فعال {
  پس منظر کا رنگ:
  مکس (سیاہ، $ آئکن پس منظر، 15٪)؛
  }} 

14. پس منظر کا رنگ منتقلی

ہم پس منظر کے رنگوں کے درمیان اختلافات کو متحرک کرنے کے لئے سی ایس ایس میں 'منتقلی' کی جائیداد کو بھی استعمال کرسکتے ہیں. ہم 'تمام' قیمت استعمال کرسکتے ہیں لیکن یہ دونوں کی کارکردگی کے لحاظ سے مہنگا ہے اور ہمیں مختلف وقتوں اور ٹائمنگ افعال میں مختلف اقدار کو منتقلی کرنے کی اجازت نہیں دے گی.

 [کلاس ^ = "سماجی __icon"]{
  ...
  منتقلی: پس منظر کا رنگ
  150ms آسانی سے باہر
  ؛
} 

15. مزید منتقلی اثرات شامل کریں

بٹنوں اور ایک اعلی قیمت پر 'رشتہ دار' پوزیشننگ کو شامل کرکے اور 'ہماری منتقلی' کی جائیداد میں 'سب سے اوپر' شامل کرکے ہم مزید بات چیت کے عناصر کو تیار کر سکتے ہیں.

 [کلاس ^ = "سماجی __icon"] {
  پوزیشن: رشتہ دار؛
  اوپر: 0؛
  ...
  منتقلی: پس منظر کا رنگ
   150ms آسانی سے باہر،
    اوپر 250ms لکیری
  ؛ } 

16. بات چیت پر بٹن منتقل کریں

اس بات چیت کے لئے اس کو پیدا کرنے کے لئے مخصوص ضرورت نہیں ہے لہذا ہم کوڈ کو مشترکہ کلاس میں شامل کرسکتے ہیں. منفی سب سے اوپر قیمت کو لاگو کرنے اور اس نقطہ نظر کو ہٹانے سے ہم نے بھی ایک واضح بصری سنجیدگی سے بات چیت کی ہے.

 [کلاس ^ = "سماجی __icon"] {
  ...
  & amp؛: ہور،
  & amp؛: توجہ مرکوز،
  & amp؛: فعال {
  آؤٹ لائن: کوئی بھی نہیں؛
  اوپر: -0.25em؛
  }} 

17. ڈراپ سائے شامل کریں

ہم ایک 'باکس شیڈو' تخلیق اور متحرک کرنے کے لئے اسی طریقہ کو بھی استعمال کرسکتے ہیں - بات چیت میں تھوڑا سا گہرائی شامل کرتے ہیں - ایک ہی وقت میں سائے کی عمودی اونچائی کو تبدیل کرنے میں ایک ہی وقت میں.

 باکس سائے:
  0 0.25EM -0.25EM RGBA (0،0،0،0.2)؛
& amp؛: ہور،
& amp؛: توجہ مرکوز،
& amp؛: فعال {
  ...
  باکس سائے:
  0 0.5em 0.25EM -0.25EM RGBA (0،0،0،0.3)؛
} 

18. ٹول ٹپس شامل کریں

ہم اپنے صارفین کے لئے مزید وضاحت کو شامل کرنے کے لئے سی ایس ایس کے ساتھ ٹول ٹپس کو آسانی سے شامل کرسکتے ہیں. پہلی چیز جسے ہم کریں گے اس فہرست میں ٹول ٹپ قیمت شامل کرنا ہے. اگر ضرورت ہو تو خالی جگہوں کے استعمال کی اجازت دینے کے لۓ انہیں لکھنے کے لئے یقینی بنائیں.

 $ آئکن فہرست: (
  Vimeo "Vimeo" "\ F27D" # 1ab7ea،
  ٹویٹر "ٹویٹر" "\ F099" # 1da1f2،
  ...
  GitHub "GitHub" "\ F113" # 333،
  آر ایس ایس "آر ایس ایس" "\ F09E" # F26522،
)؛ 

19. ڈیک لوپ میں ترمیم کریں

ہماری فہرست کے علاوہ کی وجہ سے ہمیں ٹول ٹپ قیمت ('$ نام') شامل کرنے کے لئے ہمارے 'ڈیک' لوپ میں ترمیم کرنے کی ضرورت ہوگی. اس کے بعد ہم اس کا نام ہمارے بٹن پر 'چھسو' عنصر کے مواد کے طور پر نام کرسکتے ہیں.

 ڈیک $ آئکن، $ نام، $ یونیکوڈ،
  $ آئکن کی فہرست میں $ آئکن-پس منظر {
  ...
  .Social__icon - # {$ icon} {
  ...
  & amp؛ :: پہلے سے {
  مواد: '# {$ نام}'؛
  }
  }} 

20. پیڈو عنصر سے پہلے انداز

اب ہمارے پاس ہر عنصر کا نام ہے جو اسکرین پر ظاہر ہوتا ہے، ہم عنصر کو طرز عمل کرنے کی ضرورت ہے، پس منظر کا رنگ، بھرتی اور دیگر اسٹائل عناصر کو شامل کرنے کے ساتھ ساتھ عنصر پوزیشننگ اور ٹرانزیشن کے لئے تیار کرنے اور تعطیلات پر استحکام اور سب سے اوپر اقدار کو تبدیل کرنے کے لئے. .

 & amp؛ :: اس سے پہلے {...
  اوپر: -3.5EM؛
  دھندلاپن: 0؛
  منتقلی:
  اوپر 250ms لکیری، دھندلاپن 150ms لکیری 150ms؛
}
& amp؛: ہور، ... {...
  & amp؛ :: پہلے سے {
  دھندلاپن: 1؛
  اوپر: -2.5EM؛ }
} 

21. پیڈو عنصر کے بعد انداز

ہم استعمال کریں گے سی ایس ایس مثلث ہمارے ٹول ٹپس کے نچلے حصے کو بنانے کے لئے - دوبارہ ٹرانزیشن کے لئے تیار عنصر کی پوزیشننگ - مختلف وقتوں پر استحکام اور سب سے اوپر اقدار کو منتقلی کی طرف سے.

تاخیر میں اضافہ کرکے ہم ایک حرکت پذیری حاصل کرتے ہیں جس میں ٹول ٹپ پر مشتمل ہے اور اس میں منتقل ہوتا ہے.

 & amp؛ ::} کے بعد {...
  اوپر: -1.9em؛
  دھندلاپن: 0؛
  منتقلی:
  اوپر 250ms لکیری، دھندلاپن 150ms لکیری 150ms؛
}
& amp؛: ہور، ... {...
  & amp؛ :: {کے بعد {
  دھندلاپن: 1؛
  اوپر: -0.9em؛ }
} 

سبق کے اقدامات کے کوڈپین مجموعہ پایا جا سکتا ہے یہاں .

یہ مضمون اصل میں ویب ڈیزائنر میگزین مسئلہ 264 میں شائع ہوا. اسے خریدیں .

مزید پڑھ:

• ساس کیا ہے؟
• 8 کوڈپین کی خصوصیات آپ کے بارے میں نہیں جانتے تھے
• سپر تیز رفتار سی ایس ایس کے لئے 5 تجاویز