ساس @import و پارتیل

Sass ਸਕਾਰਜ਼ ਕੋਡ ਨੂੰ ਸੇਚਣ (DRY،Don't Repeat Yourself，ਨਾ ਆਪਣਾ ਆਪ ਦੁਹਰਾਓ)。

DRY ਕੋਡ ਲਿਖਣ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ ਕਿ ਸਬੰਧਤ ਕੋਡ ਵੱਖ ਵੱਖ ਫਾਈਲਾਂ ਵਿੱਚ ਸੰਭਾਲਿਆ ਜਾਵੇ।

ਤੁਸੀਂ CSS ਖੁਦਮੁਖਤਿਆਰ ਫਾਈਲਾਂ ਦੀ ਮਦਦ ਨਾਲ ਛੋਟੇ ਫਾਈਲਾਂ ਬਣਾ ਸਕਦੇ ਹੋ ਅਤੇ ਦੂਜੇ Sass ਫਾਈਲਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ। ਉਦਾਹਰਣ ਵਜੋਂ ਇਹ ਫਾਈਲਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ: ਰੀਸੈੱਟ ਫਾਈਲ, ਵਾਰੀਅਬਲ, ਰੰਗ, ਫੰਟ ਆਦਿ。

Sass ਫਾਈਲ ਇੰਪੋਰਟ

ਜਿਵੇਂ ਕਿ CSS ਵਾਂਗ, Sass ਵੀ ਸਮਰਥਨ ਕਰਦਾ ਹੈ @import ਆਦੇਸ਼。

@import ਆਦੇਸ਼ ਤੁਹਾਨੂੰ ਇੱਕ ਫਾਈਲ ਦਾ ਸਮੱਗਰੀ ਦੂਜੇ ਫਾਈਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ。

ਕਾਰਗੁਜਾਰੀ ਮੁੱਦਿਆਂ ਕਰਕੇ, CSS @import ਆਦੇਸ਼ ਦਾ ਇੱਕ ਪ੍ਰਮੁੱਖ ਮਹੱਤਵ ਹੈ; ਹਰ ਵਾਰ ਜਦੋਂ ਇਹ ਆਦੇਸ਼ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇੱਕ ਵਾਧੂ HTTP ਕਾਲ ਬਣਦਾ ਹੈ। ਪਰ, Sass @import ਆਦੇਸ਼ ਫਾਈਲ ਨੂੰ CSS ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ; ਇਸ ਲਈ ਚਲਾਉਣ ਵਾਲੇ ਸਮੇਂ ਵਾਧੂ HTTP ਕਾਲ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ!

Sass ਇੰਪੋਰਟ ਗਰੈਫਿਕਸ：

@import filename;

ਸੁਝਾਅ：ਤੁਸੀਂ ਫਾਈਲ ਦਾ ਵਿਸਤਾਰ ਨਾ ਦੱਸਣਾ ਚਾਹੁੰਦੇ ਹੋ; Sass ਆਪਣੇ ਆਪ ਇਹ ਮੰਨੇਗਾ ਕਿ ਤੁਸੀਂ .sass ਜਾਂ .scss ਫਾਈਲ ਚਾਹੁੰਦੇ ਹੋ। ਤੁਸੀਂ ਸਿੱਧੇ ਤੌਰ 'ਤੇ CSS ਫਾਈਲ ਵੀ ਇੰਪੋਰਟ ਕਰ ਸਕਦੇ ਹੋ।@import ਆਦੇਸ਼ ਇੰਪੋਰਟ ਫਾਈਲ, ਫਿਰ ਮੁੱਖ ਫਾਈਲ ਵਿੱਚ ਇੰਪੋਰਟ ਕੀਤੇ ਗਏ ਫਾਈਲ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਕੋਈ ਵਾਰੀਅਬਲ ਜਾਂ mixin ਵਰਤ ਸਕਦੇ ਹੋ।

ਤੁਸੀਂ ਮੁੱਖ ਫਾਈਲ ਵਿੱਚ ਕਿਸੇ ਪੈਮਾਨੇ ਦੀ ਫਾਈਲ ਇੰਪੋਰਟ ਕਰ ਸਕਦੇ ਹੋ।

مثال

@import "variables";
@import "colors";
@import "reset";

ਹੁਣ ਅਸੀਂ ਇੱਕ ਉਦਾਹਰਣ ਦੇਖੀਏ: ਇਹ ਸ਼ਾਇਦ ਇੱਕ ਨਾਮ "reset.scss" ਵਾਲਾ ਰੀਸੈੱਟ ਫਾਈਲ ਹੋਵੇ, ਜਿਸ ਦਾ ਰੂਪ ਇਸ ਤਰ੍ਹਾਂ ਹੋਵੇਗਾ:

SCSS ਗਰੈਫਿਕਸ (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

ਹੁਣ ਅਸੀਂ "reset.scss" ਫਾਈਲ ਨੂੰ ਇੱਕ ਹੋਰ ਫਾਈਲ "standard.scss" ਵਿੱਚ ਇੰਪੋਰਟ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹਾਂ。

ਅਸੀਂ ਇਸ ਤਰ੍ਹਾਂ ਕਰਦੇ ਹਾਂ: ਆਮ ਤੌਰ 'ਤੇ ਫਾਈਲ ਦੇ ਉੱਪਰੋਕਤ ਹਿੱਸੇ ਵਿੱਚ @import ਆਦੇਸ਼; ਇਸ ਦਾ ਸਮੁੱਚਾ ਪੱਧਰ ਹੋਵੇਗਾ:

SCSS ਗਰੈਫਿਕਸ (standard.scss):

@import "reset";
بادی {
  فونت فیملی: Helvetica, sans-serif;
  فونت سائز: 18 پوائنٹ;
  color: red;
}

ਇਸ ਲਈ, ਜਦੋਂ "standard.css" ਫਾਈਲ ਟਰਾਂਸਲੇਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, CSS ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:

CSS ਆਉਟਪੁੱਟ：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
بادی {
  فونت فیملی: Helvetica, sans-serif;
  فونت سائز: 18 پوائنٹ;
  color: red;
}

Sass Partials (ਖੁਦਮੁਖਤਿਆਰ ਫਾਈਲ)

ਮੂਲ ਰੂਪ ਵਿੱਚ, Sass ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਸਾਰੇ .scss ਫਾਈਲਾਂ ਨੂੰ ਟਰਾਂਸਲੇਟ ਕਰਦਾ ਹੈ। ਪਰ, ਫਾਈਲ ਇੰਪੋਰਟ ਕਰਦੇ ਸਮੇਂ, ਤੁਸੀਂ ਫਾਈਲ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਟਰਾਂਸਲੇਟ ਕਰਨਾ ਨਹੀਂ ਚਾਹੁੰਦੇ।

ساس میں ایک مکینزم ہے: اگر آپ فائل کا نام زیرخط سے شروع کرتے ہیں تو، ساس اس کو منتقل نہیں کریگا۔ اس طرح کے نام کیا جانے والے فائلیں ساس میں پارتیل کہلاتی ہیں۔

اس لئے، پارتیل ساس فائل قبل کی زیرخط نام کیا جاتا ہے:

ساس پارتیل زبان:

_فائل نام;

مثال میں، نامزد پارتیل ساس فائل "_colors.scss" کا دکھایا گیا ہے (اس فائل کو براہ راست "colors.css" میں منتقل نہیں کیا جائے گا):

مثال

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

اب، اگر آپ اس پارتیل فائل کو درآوردیں تو، اینداز نکال دیں۔ ساس کا فهم ہے کہ یہ فائل "_colors.scss" کو درآوردیں چاہئیے:

مثال

@import "colors";
بادی {
  فونت فیملی: Helvetica, sans-serif;
  فونت سائز: 18 پوائنٹ;
  رنگ: $myBlue;
}