سی ایس ایس متغیرات کے ساتھ سائٹ تھیم قائم کرنے کے لئے کس طرح

سی ایس ایس اپنی مرضی کے مطابق خصوصیات، عام طور پر سی ایس ایس متغیر کے طور پر جانا جاتا ہے، اب اب تمام بڑے جدید براؤزر کی طرف سے حمایت کی جاتی ہیں. اس کا مطلب یہ ہے کہ اس منصوبوں کے لئے جو کہ ورثہ براؤزر جیسے انٹرنیٹ ایکسپلورر، سی ایس ایس متغیرات پر غور کیا جا سکتا ہے - تمام انٹریوں اور مقاصد کے لئے - استعمال کرنے کے لئے محفوظ.

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

• ساس کیا ہے؟

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

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

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

سب سے پہلے سب سے پہلے، پروجیکٹ فائلوں کو ڈاؤن لوڈ کریں ویب ڈیزائنر کی فائلیں (مسئلہ 264). نوٹ: پہلی بار صارفین کو فائلوں کو استعمال کرنے کے لئے رجسٹر کرنا پڑے گا.

01. ورکس مقرر کریں

میں / ویب سائٹ ٹیمپلیٹ ڈائرکٹری آپ جامد نوٹ ایپ ویب پیج کو تلاش کریں گے جس میں ہم سی ایس ایس متغیرات اور ویب اسٹوریج API کا استعمال کرتے ہوئے ویب سائٹ اننگنگ کو لاگو کریں گے. ڈائرکٹری کو اپنے پسندیدہ ٹیکسٹ ایڈیٹر میں کھولیں.

02. ہمارے سی ایس ایس متغیرات کو قائم کریں

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

: جڑ {
  - اپریل: # 2F353E؛
  - Secondary: # 2B9BCA؛
  - ٹیٹری: # F3583F؛
  - # e0e1e2؛
  --quinery: #ffffff؛
} 

03. متغیر کے ساتھ رنگوں کو تبدیل کریں

سٹائل شیٹ کے ذریعے جاؤ، یا تو دستی طور پر یا تلاش / تبدیل کرنے، اور جڑ بلاک سے ان کے متعلقہ متغیر کے ساتھ کسی بھی جامد رنگ ہییکس کوڈ تبدیل کریں. ایسا کرنے کے لئے، استعمال کریں وار فنکشن اور متغیر کا نام پاس. یہ براؤزر کو بتاتا ہے کہ متغیر کی قیمت. مثال کے طور پر:

 .C-header {
  پس منظر کا رنگ: وار (- پرائمری)؛
  رنگین: VAR (- Quiny)؛
} 

04. شبیہیں کے لئے ان لائن SVG تلاش کریں

کھولیں index.html. اور آپ کی پہلی چیزوں میں سے ایک ایک بڑی SVG عنصر ہے. اس میں تمام صفحے کے شبیہیں کے راستے پر مشتمل ہے، ہر ایک علامت عنصر میں لپیٹ، اور ایک منفرد شناخت دی. یہ علامات پھر حوالہ دیتے ہیں کہ اس کے ساتھ کیا ضرورت ہے استعمال عنصر، SVG کوڈ کے کسی بھی نقل کے بغیر شبیہیں کے دوبارہ استعمال کی اجازت دیتا ہے.

05. SVG میں سی ایس ایس متغیر شامل کریں

ایک کے بجائے ان لائن SVG کا استعمال کرنے کا ایک فائدہ. ایس وی جی فائل یہ ہے کہ سی ایس ایس اس کی اندرونی ساخت تک رسائی حاصل کرسکتا ہے. اس کا مطلب یہ ہے کہ ہمارے سی ایس ایس متغیرات (براؤزر کی حمایت چیک کریں یہاں ). میں index.html. ذیل میں SVG کے سٹائل کے بلاک کو تبدیل کریں. اب SVG کے رنگوں میں سے ہر ایک ہمارے سی ایس ایس متغیرات کے اقدار سے منسلک ہیں.

 & lt؛ سٹائل اور جی ٹی؛
  .پریری {
  بھریں: var (- اپیل، # 2F353E)؛
  }
  .آریسی {
  بھریں: Var (-Secondary، # 2B9BCA)؛
  }
& lt؛ / سٹائل اور جی ٹی؛ 

06. ایک کالم متغیر بنائیں

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

: جڑ {
  - اپریل: # 2F353E؛
  - Secondary: # 2B9BCA؛
  - ٹیٹری: # F3583F؛
  - # e0e1e2؛
  --quinery: #ffffff؛
  - کالم: 3؛
} 

07. ایک کالم ٹوگل کو لاگو کریں

ہمارے نئے کالم متغیر اور The. کیلک () فنکشن، اب ہم حساب کریں گے کہ کالموں کی صحیح تعداد کو بنانے کے لئے ہر نوٹ جزو کس طرح وسیع ہونا چاہئے. مثال کے طور پر، اگر کالم 4 پر مقرر ہوجائے تو، ہر نوٹ کو 25٪ کی چوڑائی ہونا چاہئے.

. سی نوٹ {
  چوڑائی: کیلک (100٪ / var (- کالم)؛
} 

08. جے ایس کلاسز اور ڈیٹا صفات شامل کریں

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

 & lt؛ ان پٹ کی قسم = "رنگ" قیمت = "# 2F353E"
کلاس = "جے ایس اپ ڈیٹ-متغیر آپ پوشیدہ طور پر"
ڈیٹا متغیر = "پرائمری" اور جی ٹی؛ 

09. سی ایس ایس متغیرات کو اپ ڈیٹ کرنے کے لئے جے ایس شامل کریں

کھولیں main.js. اور ذیل میں ٹکڑا شامل کریں. یہ سب ہمارے ذریعے loops جے ایس اپ ڈیٹ-متغیر ان پٹ اور منطق کو شامل کرتا ہے، لہذا تبدیلی پر، اس کے ڈیٹا متغیر خصوصیت میں متغیر حوالہ جات ان پٹ کی قیمت کے ساتھ اپ ڈیٹ کیا جاتا ہے. رنگ سوئچ اور کالم ٹوگل اب کام کرنا چاہئے!

 var vartrig = دستاویز
.QuerySelectorall (". جے ایس اپ ڈیٹ-متغیر")؛
کے لئے (var i = 0؛ i & lt؛ vartrig.lugh؛ i ++) {
Vartrig [i]
. Addeventlistener ("تبدیلی"، فنکشن () {
دستاویز. دستاویزات
.setproperty ("-" + it.dataset.varable،
یہ .value)؛
})؛
} 

10. محفوظ بٹن پر جے ایس کلاس کو منسلک کریں

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

 & lt؛ بٹن کی کلاس = "C-Button JS-Save-Colds"
ڈیٹا موڈ = "جے ایس موڈل" ڈیٹا-موڈل
کنٹینٹ = "جے ایس-رنگ-موڈل مواد" اور جی ٹی؛
محفوظ کریں اور ایل ٹی؛ / بٹن اور جی ٹی؛ 

11. رنگ کی صف بنائیں

واپس main.js. ، ایک نیا متغیر کا اعلان کرتا ہے رنگ اور اس کو ایک نئی صف کو تفویض کریں جس میں تمام رنگ متغیر ہوتے ہیں جو ہم محفوظ کریں گے ایک بار بچاؤ کے بٹن پر کلک کریں.

 var رنگ = [
  "پرائمری"،
  "ثانوی"،
  "تیری"،
  "quaterary"،
  "کم سے کم"
]؛ 

12. محفوظ کریں بٹن ایونٹ سننے والا

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

 دستاویز. queryselector (". جے ایس بچاؤ رنگ")
. Addeventlistener ("کلک کریں"، فنکشن () {
Var HTMLStyles = ونڈو
.آپ
.QuerySelector ("HTML")،
})، 

13. ریکارڈ سی ایس ایس رنگین متغیرات

اگلے، ایونٹ سننے والے کے اندر، ایک نیا متغیر بنائے گئے Colourstosave. اور اسے ایک خالی اعتراض تفویض کریں. اگلا، ایک بنائیں کے لئے لوپ کا استعمال کرتے ہوئے رنگ مرحلہ 11. اس کے اندر اندر، ہم اس میں بیان کردہ متغیرات کی مکمل کلید / قدر ریکارڈ شامل کریں گے رنگ ARRAY Colourstosave. چیز.

 'Colourstosave' اعتراض پر صف.
Colourstosave = نئی اعتراض؛
کے لئے (var i = 0؛ i & lt؛ colours.lengh؛ i ++) {
کولمبیاس [رنگ [i]] = HTMLStyles.
.getpropertyvalue ("-" + رنگ [i])؛
} 

14. لوکلسٹورج کو کولورسٹوسو کو بھیجیں

اب ہمارے پاس تمام رنگ متغیر ہیں Colourstosave. ، ہم اسے مقامی اسٹورج کے نام سے ویب اسٹوریج API کے ایک جزو میں بھیجیں گے. یہ لازمی طور پر ایک ایسی چیز ہے جو سیشن بھر میں رہتا ہے. ہم اس کے استعمال میں اس کے اندر دیگر اشیاء کو ذخیرہ کرسکتے ہیں Setitem () طریقہ. چلو یہ ہمیں بھیج دو Colourstosave. چیز.

 Localstororage.Setitem ("رنگ"،
JSON.Stringify (Colourstosave)؛ 

15. کالموں کو جے ایس کلاس شامل کریں

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

 & lt؛ ان پٹ کی قسم = "ریڈیو" نام = "کالم" کلاس
= "جے ایس اپ ڈیٹ-متغیر جے ایس اپ ڈیٹ کالم
آپ کو پوشیدہ طور پر "قدر =" 1 "
ڈیٹا متغیر = "کالم" اور جی ٹی؛ 

16. لوکل اسٹور میں کالم بھیجیں

ہر ایک کے لئے جے ایس اپ ڈیٹ کالم ، ہم اگلے واقعات کو دیکھنے کے لئے ایونٹ سننے والوں کو تفویض کریں گے. پتہ لگانے پر، ہم پھر اس کی موجودہ قیمت بھیجیں گے کالم متغیر کرنے کے لئے مقامی ذخیرہ ، پھر اس کا استعمال کرتے ہوئے Setitem () طریقہ. رنگوں کے برعکس، ہمیں اس قدر کو برداشت کرنے کی ضرورت نہیں ہے کیونکہ یہ ایک اعتراض نہیں ہے.

 var colinputs = دستاویز
.QuerySelectorall (". جے ایس اپ ڈیٹ کالم")؛
کے لئے (var i = 0؛ i & lt؛ colinputs؛ i ++) {
Colinputs [i]. Addeventlistener ("تبدیلی"،
فنکشن () {var htmlstyles = ونڈو
.آپ
.QuerySelector ("HTML")؛
LocalStorage.Setitem ("کالم"،
htmlstyles.getpropertyvalue ("- کالم")؛
})؛} 

17. نئے سیشن کو ہینڈل کریں

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

 دستاویز. Addeventlistener.
("domcontentloaded"، فنکشن () {
اگر (localstorage.getitem ("رنگ")) {
}
اگر (localstorage.getitem ("کالم")) {
}
})؛ 

18. ترمیم رنگ متغیر

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

 var savedcolours = JSON.PARSE.
(Localstorage.getitem ("رنگ")؛
کے لئے (savedcourours میں رنگ) {
دستاویز. documentelement.style.SetProperty.
("-" + رنگ، savedcolours [رنگ])؛ } 

19. کالم متغیر ڈیٹا جمع

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

 var کالم = LocalStorage.
.getem ("کالم")
کالم ٹرگرز = دستاویز.
queryselectorall (". جے ایس اپ ڈیٹ کالم")؛ 

20. متغیر اور ریاست میں ترمیم کریں

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

 دستاویز. دستاویزات
.setproperty ("- کالم"، کالم)؛
کالم ٹرگرز [کالم - 1] .کیک = سچا؛ 

21. تیار مصنوعات کی جانچ

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

اور یاد رکھیں، یہ ہمیشہ آپ کو اپ گریڈ کرنے کے قابل ہے کلاؤڈ اسٹوریج ایک نئی منصوبے کے آگے لہذا یہ آپ کو اس فائلوں کو سنبھال سکتے ہیں.

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

مزید پڑھ:

• 15 واقعی مفید ذمہ دار ویب ڈیزائن سبق
• ساس کے ساتھ شروع کیسے کریں
• ویب پر بہتر رنگ کا انتظام کرنے کے لئے 7 تجاویز