ساس معرف

آپ کو جاننا چاہئیے

ادامه کے قبل، آپ کو اس کے بارے میں ابتدائی معلومات رکھنی چاہئیں:

  • HTML
  • CSS

اگر آپ اس موضوعات کو پہلے سیکھنا چاہئیں تو، آپ کا منزل اس سلسلے میں یہاں سے یہاں سلسلے دیکھیں.

کیا Sass ہے؟

  • Sass کیا ہوتا ہے؟ Syntactically Awesome Stylessheet (grammar super stylish sheet)
  • Sass ایک CSS ایکسٹینشن ہے
  • Sass ایک CSS پیش پروسیسر ہے
  • Sass تمام نسلوں کا CSS مکمل طور پر سازگار ہے
  • Sass CSS کی تکرار کو کم کرتا ہے، اس طرح وقت میں بچاؤ ہوتا ہے
  • Sass Hampton Catlin کی طرف سے ڈیزائن کیا گیا اور Natalie Weizenbaum نے 2006 میں اس کو ترقی دیا
  • Sass کا مفت اور استعمال کیا جاسکتا ہے

چرا Sass استعمال کیا جانا چاہئیے؟

استایل شیٹ بڑھ رہا ہے، پیچیدگی میں بڑھ رہی ہے اور اس کا مرمت بھی مشکل ہوتا جارہا ہے. یہی جگہ جہاں CSS پیش پروسیسر کی مدد آتی ہے.

Sass آپ کو CSS میں موجود نہیں کئی خصوصیات استعمال کرنے کی اجازت دیتا، مثلاً متغیرات، مستحکم کردار، mixin، اپنا کریں، ناگت، داخلی فانکشن اور دیگر خصوصیات.

Sass کا ایک سادا مثال جس سے بہت مفید ہوتا ہے

مجھوں ایک ویب سائٹ کا مثال دیا جائے جس میں تین اہم رنگیں موجود ہیں:

#a2b9bc
#b2ad7f
#878f99

تو آپ کو یہی ایک بار کچھا کریں گے؟ بہت بار کچھا کریں گے. اگر اسی رنگ میں تبدیلی ہوئی تو؟

آپ Sass کا اس کا استعمال کرسکتے ہیں، جبکہ اسی کا استعمال کریں گے، تو اس کا مرتب کریں گے:

ساس مثال

/* رنگ اصلی کے لیے متغیرات تعریف کریں */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* استعمال متغیر */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

پس، کے استعمال Sass کے دوران، اگر رنگ اصلی تبدیل ہو، تو صرف ایک جگہ میں اس کو تبدیل کرنا چاہئیے。

ساس کس طرح کام کرتا ہے؟

بھرسراگر نا ساس کو سمجھتا ہے۔ لہذا آپ کو ساس پری پروسیسور کی ضرورت ہوتی ہے تاکہ ساس کو معیاری سی ایس ایس میں تبدیل کیا جائے۔

یہ عمل ترجیح (transpiling) کہلاتا ہے، لہذا آپ کو ترجیحی پروگرام (کسی پروگرام کا تعلق کرسکتا ہے) کو ساس کو دیں، تو آپ کو سی ایس ایس کو لایا جاتا ہے。

نکات:ترجیح ایک اصطلاح ہے، جو کا معنا ہے کہ ایک زبان سے لکھا ہوا سورس کو دوسری زبان میں تبدیل یا ترجمہ کیا جاتا ہے。

ساس فائل کا نوعیت

ساس فائل کی فائل ایکسٹینشن ".scss" ہے۔

ساس کا تعلق کرسکتا ہے

ساس معیاری سی ایس ایس کا تعلق کرسکتا ہے /* کمینٹ */، مزید کچھ درج فہرست کا تعلق کرسکتا ہے // کمینٹ:

ساس مثال

/* تعریف اہم رنگ */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* استعمال متغیر */
.main-header {
  background-color: $primary_1; // آپ وہاں میں درج فہرست کا تعلق کرسکتے ہیں
}