ساس معرفی

ਤੁਹਾਨੂੰ ਜਾਣਣਾ ਚਾਹੀਦਾ ਹੈ

ਜਦੋਂ ਤੁਸੀਂ ਅੱਗੇ ਚੱਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਹੇਠ ਲਿਖੇ ਵਿਸ਼ਿਆਂ ਦਾ ਮੁੱਢਲਾ ਜਾਣਕਾਰੀ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ:

  • HTML
  • CSS

ਜੇਕਰ ਤੁਸੀਂ ਇਹੇ ਵਿਸ਼ਿਆਂ ਦੀ ਸਿੱਖਿਆ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸਾਡੇ ਇਸ ਵੈੱਬਸਾਈਟ 'ਤੇ ਇਸ ਨੂੰ ਦੇਖੋ。 ਮੁੱਖ ਪੰਨਾ ਇਹੇ ਟੂਰੀਅਲਸ ਦੀ ਸੰਦਰਭ ਵਿੱਚ ਦੇਖੋ。

ਕੀ Sass ਹੈ?

  • Sass ਦਾ ਮਤਲਬ ਇਹ ਹੈ Syntactically Awesome Stylesheet (ਗਰਾਫਿਕ ਸਟਾਈਲ ਸ਼ੀਟ)
  • Sass ਇੱਕ CSS ਐਕਸਟੈਂਸ਼ਨ ਹੈ
  • Sass ਇੱਕ CSS ਪ੍ਰੀ-ਪ੍ਰੋਸੈਸਰ ਹੈ
  • Sass ਸਾਰੀਆਂ ਸੰਸਕਰਣਾਂ ਦੇ CSS ਨਾਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਾਨ ਹੈ
  • Sass ਨੇ CSS ਦੀ ਪੁਨਰਕਰਤਾ ਘਟਾਈ ਹੈ, ਜਿਸ ਨਾਲ ਸਮੇਂ ਬਚਾਇਆ ਗਿਆ ਹੈ
  • Sass ਨੂੰ Hampton Catlin ਦੁਆਰਾ ਡਿਜ਼ਾਇਨ ਕੀਤਾ ਗਿਆ ਸੀ ਅਤੇ 2006 ਵਿੱਚ Natalie Weizenbaum ਦੁਆਰਾ ਵਿਕਸਿਤ ਕੀਤਾ ਗਿਆ ਸੀ
  • Sass ਮੁਫਤ ਤੌਰ 'ਤੇ ਡਾਊਨਲੋਡ ਅਤੇ ਇਸਤੇਮਾਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ

ਅਜਿਹਾ ਕਿਉਂ Sass ਦਾ ਇਸਤੇਮਾਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ?

ਸਟਾਈਲਸ਼ੀਟ ਬਹੁਤ ਵੱਡੀ ਅਤੇ ਜ਼ਿਆਦਾ ਜ਼ਿਆਦਾ ਜ਼ਿੰਦਾਗੀ ਹੋ ਰਹੀ ਹੈ, ਜਿਸ ਨਾਲ ਇਸ ਨੂੰ ਰੱਖਣਾ ਬਹੁਤ ਜ਼ਰੂਰੀ ਹੈ। ਇਹ ਹੈ ਜਿਥੇ CSS ਪ੍ਰੀ-ਪ੍ਰੋਸੈਸਰ ਦੀ ਮਦਦ ਚਾਹੀਦੀ ਹੈ。

Sass ਤੁਹਾਨੂੰ CSS ਵਿੱਚ ਮੌਜੂਦ ਨਾ ਹੋਣ ਵਾਲੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਜਿਵੇਂ ਵਾਰੀਅਬਲ, ਨਿਮਕਸ, ਮਿਕਸਿਨ, ਇੰਪੋਰਟ, ਇਨਹੈਰਿਟ, ਬਿਨਟੇਡ ਫੰਕਸ਼ਨ ਅਤੇ ਹੋਰ ਸੁਵਿਧਾਵਾਂ ਦਾ ਇਸਤੇਮਾਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ。

ਇੱਕ Sass ਬਾਰੇ ਸਰਲ ਉਦਾਹਰਣ

ਅਸੀਂ ਇੱਕ ਤਿੰਨ ਮੁੱਖ ਰੰਗਾਂ ਵਾਲੀ ਵੈੱਬਸਾਈਟ ਹਾਂ:

#a2b9bc
#b2ad7f
#878f99

ਤਾਂ, ਤੁਹਾਨੂੰ ਇਹੇ HEX ਕੀਮਤਾਂ ਕਿੰਨੀਆਂ ਵਾਰੀਆਂ ਲਿਖਣੀਆਂ ਪਵੇਗੀ? ਬਹੁਤ ਸਾਰੀਆਂ ਵਾਰੀਆਂ. ਅਗਰ ਇਸੇ ਰੰਗ ਵਿੱਚ ਬਦਲਾਅ ਹੁੰਦਾ ਹੈ ਤਾਂ?

ਤਾਂ, ਤੁਸੀਂ ਉੱਤੇ ਲਿਖੇ ਇਸ ਕੋਡ ਨੂੰ ਲਿਖ ਸਕਦੇ ਹੋ, ਨਾ ਕਿ ਉਸ ਕੋਡ ਨੂੰ ਬਹੁਤ ਸਾਰੀਆਂ ਵਾਰੀਆਂ ਲਿਖਣਾ:

ساس مثال

/* ਮੂਲ ਰੰਗ ਲਈ ਵਾਰੀਅਬਲ ਨਿਰਧਾਰਿਤ ਕਰੋ */
$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 ਦਾ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹੋ, ਜੇਕਰ ਮੂਲ ਰੰਗ ਬਦਲ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਜਗ੍ਹਾ ਵਿੱਚ ਉਸ ਨੂੰ ਬਦਲਣਾ ਚਾਹੀਦਾ ਹੈ。

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

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

یہ عمل ترجیح کہا جاتا ہے (ترجیح)، جس میں آپ کو ترجیحی (کسی پروگرام) کو ساس کا کوڈ فراہم کرنا پڑتا ہے، جس کی جانب سے آپ کو سی ایس ایس کو بھی لایا جاتا ہے。

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

ساس فائل کی قسم

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

ساس کریئشن

ساس معیاری سی ایس ایس کریئشن کو پشتیبند کیا گیا ہے /* کریئشن */، اس کے علاوہ اندرون لائن کریئشن کو بھی پشتیبند کیا گیا ہے // کریئشن:

ساس مثال

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