SASS کا استعمال کرتے ہوئے سٹائل ایک سائٹ

آپ سی ایس ایس کے ساتھ بہت کچھ کر سکتے ہیں - شاید آپ سے زیادہ سوچ سکتے ہیں - لیکن قابل اطمینان انداز شیٹ زبان اس کی حدود ہے. ایک جدید ویب پروجیکٹ میں، این پی ایم ماڈیولز، جاوا اسکرپٹ فریم ورک، ES6 اور اس سے زیادہ، یہ وینیلا سی ایس ایس لکھنے کے لئے واپس آنے کے لئے کسی حد تک anachronistic محسوس کر سکتا ہے.

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

SASS (مطابقت پذیری بہت اچھے انداز شیٹ) ان اختیارات کے سب سے زیادہ مقبول میں سے ایک ہے - ہمارے گائیڈ کے ساتھ مزید پڑھیں ساس کیا ہے؟ ساس بہت سے قیمتی نئی زبان کی خصوصیات میں اضافہ کرتا ہے جو آپ کی سائٹس اور اطلاقات کو مزید برقرار رکھنے میں مدد کرنے کے لئے سی ایس ایس میں دستیاب نہیں ہیں (فی الحال). ان میں مکسین اور کنٹرول ہدایات جیسے چیزیں شامل ہیں، جو آواز گندگی لیکن اصل میں بہت سیدھا ہیں، اور ہم اس سبق میں ان کو دیکھیں گے. اگر آپ چیزوں کو بھی آسان بنانا چاہتے ہیں، تو آپ صارف کو کرسکتے ہیں ویب سائٹ بلڈر .

• تفریح ​​کرنے کے لئے ڈاؤن لوڈ، اتارنا سی ایس ایس متحرک

ساس کے لئے اصل میں دو مختلف مطابقت پذیر ہیں، جو ایک .scss فائل کی توسیع کا استعمال کرتا ہے، اور جو کہ استعمال کرتا ہے. سابق سی ایس ایس کی طرح زیادہ لگ رہا ہے (حقیقت میں، تمام. سی ایس ایس فائلوں درست. ایس سی ایس ایس فائلوں)، جبکہ بعد میں اشارے اور نیو لائنز کے حق میں سی ایس ایس کے بریکٹ اور سیمکولن کو ختم کرتا ہے. ہم ایس ایس ایس ایس پر توجہ مرکوز کریں گے، لیکن انتخاب صرف ذاتی ترجیحات کے نیچے ہے. آپ کی سائٹ کو اپ گریڈ کرنا؟ آپ کو یقینی بنائیں ویب میزبانی سروس آپ کو اس کی ضرورت ہے، اور آپ کو حاصل کرنے کے لئے کلاؤڈ اسٹوریج ٹھیک ہے، بھی.

اس سبق کے لئے فائلوں کو ڈاؤن لوڈ کریں (مسئلہ 282)

01. مطابقت پذیری

SASS کا استعمال کرتے ہوئے لازمی طور پر ایک کمپائلر کی ضرورت ہے. ایسا کرنے کا سب سے آسان طریقہ کمانڈ لائن پر ہوگا. آپ ہومبرو کا استعمال کرتے ہوئے ایسا کر سکتے ہیں. ساس کمپائلر کئی مختلف زبانوں میں لاگو کیا جاتا ہے، اور ہومبرو ڈارٹ ورژن انسٹال کرے گا، جو روزہ ہے.

brew install sass/sass/sass

02. ایک SASS فائل بنائیں

کارروائی میں کمپائلر کو دیکھنے کے لئے سادہ ساس فائل بنانے کی کوشش کریں. SASS میں سب سے آسان تصورات میں سے ایک متغیر ہے، جو ایک بار کے ساتھ ایک بار مقرر کیا جا سکتا ہے $. Prefix اور پھر آپ کے کوڈ بھر میں استعمال کیا جاتا ہے. ہم تخلیق کریں گے sass-infut.scss .

 $ ٹیکسٹ رنگ: #ccccccccc
جسم {
    رنگ: $ متن رنگ؛
} 

03. کمانڈ لائن تالیف

اب ہم کمانڈ لائن میں ساس کمپائلر چل سکتے ہیں تاکہ ہمارے. ایس ایس ایس ایس فائل میں سی ایس ایس آؤٹ پٹ میں تبدیل کریں. آپ آؤٹ پٹ فائل میں دیکھیں گے کہ متغیرات چلے جاتے ہیں اور ہم صرف معیاری سی ایس ایس کے نحو کے ساتھ چھوڑ رہے ہیں جو براؤزر کی طرف سے قابل استعمال ہے.

 sass sass-infut.scss سی ایس ایس آؤٹ پٹ. css 

04. اپنی تعمیر کو خود بخود

یہ بہت اچھا ہے، لیکن آپ ہر بار جب آپ تبدیلی کرتے ہیں تو ہر بار ساس کمپائلر چلانا نہیں چاہتے ہیں. ایک اختیار یہ ہے کہ یہ ڈائرکٹری میں فائلوں میں تبدیلیوں کو سننا اور خود کار طریقے سے ایک مختلف ڈائرکٹری (فائلوں کو محفوظ کرنے کے) میں آؤٹ پٹ کو دوبارہ ترتیب دیں. یہ بھی مؤثر طریقے سے آپ کو آپ کے ذریعہ کو الگ الگ کرنے کی اجازت دیتا ہے .SCSS فائل آپ کے بنایا سی ایس ایس سے.

 MKDIR SRC.
MKDIR SRC / SASS.
میک ڈیر پبلک
MKDIR پبلک / سی ایس ایس
SASS --watch SRC / SASS /: پبلک / سی ایس ایس /

05. ساس اسٹائل کے ساتھ کھیلیں

اب ہم ایک سادہ سٹارٹر سائٹ پر نظر آتے ہیں، جس میں ہم ساس اسٹائل کے ساتھ کھیلنے کے لئے استعمال کر سکتے ہیں. ہم ایک غیر مستحکم مثال سائٹ کلوننگ کی طرف سے شروع کر سکتے ہیں. نوٹ کرنے کی کلیدی چیز یہ ہے کہ ہمارے HTML پیج sass کے بارے میں کچھ نہیں جانتا. اس میں ایک سی ایس ایس فائل داخلہ نقطہ ہے، جس میں ہم اگلے تخلیق کریں گے.

 سی ڈی پبلک
curl -o index.html https: // خام.
GitHubusercontent.com/simon-a-j/ass-
ٹیوٹوریل /
ماسٹر / پبلک / انڈیکس. html 

06. اہم شیلیوں شیٹ

ہم شیلیوں. css کا استعمال کرتے ہوئے ہمارے مرکزی سی ایس ایس انٹری پوائنٹ کے طور پر استعمال کرتے ہیں، جس میں بعد میں ہم دوسرے ماڈیولز کو درآمد کرنے کے لئے استعمال کریں گے. اس کا مطلب یہ ہے کہ ہمیں اس فائل کو پیدا کرنے کے لئے ساس بتانے کی ضرورت ہے، لہذا ہم اپنے SRC / SASS فولڈر میں ایک شیلیوں. ایس ایس ایس فائل بنانے کی بھی ضرورت ہے. اگر آپ چل رہے ہیں sass --watch. اس سے پہلے، یہ خود کار طریقے سے سی ایس ایس میں مرتب کیا جائے گا عوامی / سی ایس ایس فولڈر، اور آپ کی سائٹ کو تازہ ترین اس کی تبدیلیوں کو دکھایا جائے گا. کچھ ترمیم کرنے اور براؤزر میں HTML صفحہ کو تازہ کرنے کی کوشش کریں جیسا کہ آپ جاتے ہیں.

 // styles.scss.
جسم {
  فونٹ - خاندان: سینسر سیرف؛
  متن سیدھا: مرکز؛
}

07. رنگ سکیم کا انتظام کریں

آتے ہیں کہ کس طرح SASS سائٹ کے لئے ایک رنگ سکیم کو منظم کرنے میں مدد مل سکتی ہے. یہ ایک ویب پیج کے لئے پانچ یا چھ رنگوں کا پیلیٹ ہے. ہم ان میں ان کو خارج کر سکتے ہیں _colours.scss. . Underscore Prefix Sass کو بتاتا ہے کہ یہ ایک نئی HTML فائل (ایک 'جزوی') میں مطابقت پذیر نہیں ہے. لیکن ہم اسے تھوڑا سا مختلف طریقے سے استعمال کرسکتے ہیں.

 // _colours.scss
$ رنگین پرائمری: # 231651؛
$ رنگین سیکنڈری: # 2374AB؛
$ رنگ روشنی: # D6FFF6؛
$ رنگ ہائی لائٹ 1: # 4DCCBD؛
$ رنگ ہائی لائٹ 2: # FF8484؛

08. رنگ متغیر استعمال کریں

ان رنگ متغیروں کو استعمال کرنے کے لئے ہم نے ابھی قائم کیا ہے، ہم اس کے مواد کو درآمد کرنے کے لئے ساس بتا سکتے ہیں _colours.scss. ہمارے مرکزی طرز شیٹ میں. ہم اس کا استعمال کرتے ہوئے کرتے ہیں import. بیان ایک بار جب آپ نے ایسا کیا ہے، تو معلوم کریں کہ کس طرح متغیرات آؤٹ پٹ سی ایس ایس فائل کے اندر حل کیا جاتا ہے.

 // styles.scss.
import "_colours.scss"؛
جسم {
  فونٹ - خاندان: سینسر سیرف؛
  متن سیدھا: مرکز؛
  پس منظر: لکیری-گریجویٹ (155 ڈگری،
$ رنگین پرائمری 70٪، $ رنگین سیکنڈری
70٪)؛
  رنگ: $ رنگ روشنی؛
  منٹ کی اونچائی: 100Vh؛
}
H1 {
    رنگ: $ رنگ ہائی لائٹ 1؛
}
H2 {
  رنگ: $ رنگ ہائی لائٹ 2؛
}

09. گھوںسلا سٹائل

SASS کی ایک اور مفید خصوصیت گھوںسلا شیلیوں کی صلاحیت ہے. یہی ہے، آپ ایک عنصر کے لئے ایک طرز کی وضاحت کرسکتے ہیں جو صرف لاگو ہوتا ہے اگر یہ عنصر والدین کے عنصر کے اندر ہوتا ہے. چلو اس کا استعمال کرتے ہیں کہ اس پر منحصر ہے کہ وہ ہیڈر یا جسم میں ظاہر ہوتے ہیں.

 A {
  رنگ: $ رنگین ثانوی؛
}
.profile ہیڈر {
  {
    فونٹ سائز: 16px؛
    مارجن بائیں: 10px؛
    مارجن دائیں: 10px؛
    پڈنگنگ: 10px؛
    سرحدی ردعمل: 5px؛
    رنگ: $ رنگ روشنی؛
    پس منظر کا رنگ: $ رنگین ثانوی؛
  }
}

10. ذمہ دار گرڈ بنائیں

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

 $ بریک پوائنٹ: 800px؛
.profile-body {
  ڈسپلے: فلیکس؛
  سیدھا اشیاء: مسلسل؛
  جائز - مواد: خلائی کے ارد گرد؛
  مارجن-سب سے اوپر: 32px؛
  مارجن بائیں: 10VW؛
  مارجن دائیں: 10VW؛
  media سکرین اور (زیادہ سے زیادہ چوڑائی:
$ بریک پوائنٹ) {
      فلیکس سمت: کالم؛
  }
}
.profile-سیکشن {
  پس منظر کا رنگ: $ رنگ ہائی لائٹ 1؛
  رنگ: $ رنگ پرائمری؛
  مارجن: 16px؛
  سرحدی ردعمل: 10px؛
  چوڑائی: 340px؛
  .profile-content {
    پڈنگنگ: 20px؛
  }
  media سکرین اور (زیادہ سے زیادہ چوڑائی:
$ بریک پوائنٹ) {
    چوڑائی: 100٪؛
  }
}

11. مکسن متعارف کرایا

Mixins ایک اور طاقتور SASS خصوصیت ہیں، جو آپ دوبارہ قابل استعمال شیلیفیٹ افعال کی وضاحت کرنے کے طریقے کے بارے میں سوچ سکتے ہیں. ایک مکسین ایک بار بیان کیا جاتا ہے، پیرامیٹرز لے جا سکتا ہے، اور پھر آپ کے SASS کوڈ میں کہیں بھی دعا کی جا سکتی ہے. اس کے لئے ایک کا استعمال اس کے لئے وینڈر پریفکس کو ہینڈل کرنا ہے. اگر ہم چاہتے ہیں کہ سی ایس ایس پرانے براؤزرز میں کام کرنے کے لئے تبدیل ہوجائے تو، یہ ایک کی ضرورت ہوسکتی ہے Webkit. مثال کے طور پر کروم اور سفاری کے لئے سابقہ. چلو ایک مکسین کی وضاحت کرتے ہیں جو ہمارے لئے اس کا خیال رکھتا ہے.

12. مخلوط اور متغیر

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

 $ styley1: (پیش منظر: $ رنگ روشنی،
پس منظر: $ رنگین سیکنڈری)؛
$ Styley2: (پیش منظر: $ رنگ پرائمری،
پس منظر: $ رنگ ہائی لائٹ 1)؛
$ Styley3: (پیش منظر: $ رنگ پرائمری،
پس منظر: $ رنگ ہائی لائٹ 2)؛
Mixin مواد طرز ($ پیش منظر،
$ پس منظر) {
  رنگ: $ پیش منظر؛
  پس منظر کا رنگ: $ پس منظر؛
} 

13. اپنے نئے مکسین کا استعمال کریں

 .پلیفائل ہیڈر {
  {
    Conclude مواد سٹائل ($ style1 ...)؛
    // ...
  }
}
.profile-سیکشن {
    inClude مواد سٹائل ($ Style2 ...)؛
  // ...
}

14. وراثت سمجھتے ہیں

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

٪ لنک مشترکہ {
  فونٹ سائز: 16px؛
  مارجن بائیں: 10px؛
  مارجن دائیں: 10px؛
  پڈنگنگ: 10px؛
  سرحدی ردعمل: 10px؛
}

15. کلاسیں توسیع

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

 .پلیفائل ہیڈر {
  {
    extend٪ لنک مشترکہ؛
    Conclude مواد سٹائل ($ style1 ...)؛
  }
}
{
  extend٪ لنک مشترکہ؛
  InClude مواد سٹائل ($ Style3 ...)؛
}

16. مرکزی خیال، موضوع میں ترمیم کریں

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

 // _colours.scss
$ رنگین پرائمری: # 2E1F27؛
$ رنگین سیکنڈری: ہلکا پھلکا ($ رنگ پرائمری،
25٪)؛
$ رنگ روشنی: ہلکا پھلکا ($ رنگ پرائمری،
75٪)؛
$ رنگ ہائی لائٹ 1:
ہلکا پھلکا (تکمیل ($ رنگین پرائمری)، 50٪)؛
$ رنگ - ہائی لائٹ 2:
ہلکا پھلکا (تکمیل ($ رنگین سیکنڈری)، 50٪)؛

17. رنگوں کا ایک نیا سیٹ منتخب کریں

اب، ہم اس سائٹ کے لئے پورے رنگ کی منصوبہ بندی میں ترمیم کرسکتے ہیں صرف اس میں ایک نئے رنگ کی بنیادی قیمت کی وضاحت کرتے ہوئے _colours.scss. فائل. متبادل رنگوں کے ساتھ استعمال کرتے ہوئے اسے کوشش کریں. ہم اس میں ساس بھی کر سکتے ہیں (لیکن یہ یاد رکھیں کہ اس نقطہ نظر سے مراد ہے جس پر آپ کی سائٹ تعمیر کی جاتی ہے، نہیں چلتی ہے). آپ اس منطق کو ایڈجسٹ کرنے کی کوشش کر سکتے ہیں جو ہم مرکزی خیال، موضوع میں مرکزی خیال، موضوع میں دوسرے رنگوں کو حاصل کرنے کے لئے استعمال کر رہے ہیں.

 $ ریڈ: رینڈم (255)؛
$ سبز: بے ترتیب (255)؛
$ نیلے: بے ترتیب (255)؛
$ رنگین پرائمری: آرجیبی ($ ریڈ، $ سبز، $ نیلے)؛ 

18. لائبریریوں کا استعمال کریں

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

 گٹ کلون https://github.com/josephfusco/
Angled-Enges.Git SRC / SASS / Angled کناروں

19. زاویہ کناروں مکسین

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

 limport "Angled-Enges / _angled-edges.scss"؛
.profile-سیکشن {
  windlude angled کنارے ("باہر نیچے"،
"کم دائیں"، $ رنگ ہائی لائٹ 1)؛
  anglude angledd کنارے ("باہر سب سے اوپر"،
"اوپری دائیں"، $ رنگ ہائی لائٹ 1)؛
  مارجن: 120px 16px 120px 16px؛
  // ...
}

20. آؤٹ پٹ فارمیٹنگ

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

 SASS SRC / SASS /: پبلک / سی ایس ایس / - اسٹائل
کمپریسڈ 

21. مزید ساس

ہم نے اب SASS کی کچھ خصوصیات کی تلاش کی ہے، اور ہماری سائٹ بہت خراب نہیں ہے. امید ہے کہ آپ یہ دیکھنا شروع کر رہے ہیں کہ کس طرح SASS ہمیں مزید برقرار رکھنے والے سٹائل شیٹ تیار کرنے میں مدد ملتی ہے. ہم نے زبان کی ہر خصوصیت کا احاطہ نہیں کیا ہے - اس کے ساتھ بھیج دیا گیا بہت سے مفید افعال ہیں، اور اعلی درجے کی خصوصیات جیسے کنٹرول ہدایات (جیسے جیسے if. ، for. اور while. ) یہ اکثر پیچیدہ لائبریری افعال بنانے کے لئے استعمال کیا جاتا ہے. مجموعی طور پر، یاد رکھیں کہ SASS مکمل طور پر ایک سٹائلسٹ ترجیح ہے. اگر آپ چاہیں تو خالص سی ایس ایس کے ساتھ ہم سب کچھ کر سکتے ہیں، لیکن آپ کو یقینی طور پر پری پروسیسنگ کے بارے میں سوچنا چاہئے کیونکہ آپ کے کام زیادہ پیچیدہ ہو جاتے ہیں.

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

مزید پڑھ:

• 10 حیرت انگیز نیا سی ایس ایس ٹیکنالوجیز
• آج کی کوشش کرنے کے لئے 3 چمکیلی نئی سی ایس ایس کی خصوصیات
• عظیم Parallax طومار ویب سائٹس