مقدمه ای بر Sass برای طراحان قالب جدید وردپرس

به عنوان یک طراح جدید قالب وردپرس ، شما به سرعت چالش های حفظ طولانی مدت CSS در حالی که آنها را مرتب ، مقیاس پذیر و قابل خواندن نگه می دارید. همچنین یاد خواهید گرفت که بسیاری از طراحان و توسعه دهندگان جلویی استفاده از یک زبان پیش پردازنده CSS مانند Sass یا LESS را توصیه می کنند. اما این چیزها چیست؟ و چگونه می توانید با آنها شروع کنید؟ این مقاله مقدمه ای برای Sass برای طراحان جدید قالب وردپرس است. ما به شما خواهیم گفت پیش پردازنده CSS چیست ، چرا به آن نیاز دارید و نحوه نصب و شروع بلافاصله استفاده از آنها چیست.

Sass - CSS with Superpowers

ساس چیست؟ h4>

CSS مورد استفاده ما به گونه ای طراحی شده است که به راحتی می توان از یک زبان صفحه سبک استفاده کرد. با این وجود وب تکامل یافته است ، و همچنین نیاز طراحان به یک زبان سبک که به آنها امکان می دهد با تلاش و زمان کمتری کارهای بیشتری انجام دهند ، نیز مورد نیاز است. زبان های پیش پردازنده CSS ، مانند Sass ، به شما امکان می دهد از ویژگی هایی که در حال حاضر در CSS وجود ندارد مانند استفاده از متغیرها ، عملگرهای اصلی ریاضی ، تودرتو ، میکس ها و غیره استفاده کنید.

این شباهت زیادی به PHP دارد که یک زبان پیش پردازنده است و یک اسکریپت را روی سرور اجرا می کند و یک خروجی HTML تولید می کند. به همین ترتیب ، Sass برای تولید فایل های CSS که می توانند توسط مرورگرها استفاده شوند ، به پرونده های .scss پردازش می کند.

از نسخه 3.8 ، سبک های منطقه مدیریت وردپرس برای استفاده از Sass برای توسعه منتقل شدند. بسیاری از مغازه ها و توسعه دهندگان قالب وردپرس در حال حاضر از Sass برای سرعت بخشیدن به روند توسعه خود استفاده می کنند.

شروع کار با Sass برای توسعه قالب وردپرس h4>

اکثر طراحان طرح زمینه از محیط توسعه محلی در رایانه ویندوز خود نصب کرد تا قبل از استقرار در محیط صحنه سازی یا یک سرور زنده. از آنجا که Sass یک زبان پیش پردازنده است ، شما باید آن را در محیط توسعه محلی خود نصب کنید.

اولین کاری که باید انجام دهید نصب Sass است. این می تواند به عنوان یک ابزار خط فرمان استفاده شود ، اما همچنین برنامه های GUI بسیار خوبی برای Sass در دسترس است. ما توصیه می کنیم از کوالا استفاده کنید ، که یک برنامه منبع باز رایگان برای Mac است ، ویندوز و لینوکس

به خاطر این مقاله ، شما باید یک موضوع خالی ایجاد کنید. به سادگی یک پوشه جدید در / wp-content / themes / ایجاد کنید. می توانید نام آن را «mytheme» یا هر چیز دیگری که می خواهید بگذارید. درون پوشه تم خالی خود پوشه دیگری ایجاد کنید و نام آن را به شیوه نامه بگذارید.

در پوشه stylesheets ، باید یک فایل style.scss با استفاده از ویرایشگر متنی مانند Notepad ایجاد کنید.

اکنون باید Koala را باز کرده و بر روی نماد plus کلیک کنید تا پروژه جدیدی اضافه شود. سپس ، فهرست زمینه خود را پیدا کرده و آن را به عنوان پروژه خود اضافه کنید. مشاهده خواهید کرد که کوالا فایل Sass را به طور خودکار در فهرست سبک های شما پیدا می کند و آن را نمایش می دهد.

Adding project in Koala

بر روی پرونده Sass کلیک راست کرده و گزینه Set Output Path را انتخاب کنید. اکنون ریشه فهرست تم خود را انتخاب کنید ، به عنوان مثال ، / wp-content / themes / mytheme / و Enter را بزنید. اکنون کوالا فایل خروجی CSS را در فهرست زمینه شما ایجاد می کند. برای آزمایش این مورد ، باید پرونده Sass style.scss خود را در یک ویرایشگر متن مانند Notepad باز کرده و این کد را اضافه کنید:

قلم $: arial، verdana، sans-serif؛
بدن {
font-family: $ fonts؛
}

اکنون باید تغییرات خود را ذخیره کرده و به کوالا برگردید. روی پرونده Sass خود راست کلیک کنید و نوار کناری به سمت راست اسلاید می شود. برای کامپایل پرونده Sass خود کافیست بر روی دکمه ‘Compile’ کلیک کنید. با باز کردن فایل style.css در فهرست زمینه خود می توانید نتایج را مشاهده کنید و CSS پردازش شده را به این صورت در می آورد:

بدن {
  font-family: arial، verdana، sans-serif؛ }

توجه داشته باشید که ما یک متغیر $ fonts را در پرونده Sass خود تعریف کرده ایم. اکنون هر زمان که لازم است خانواده قلم را اضافه کنیم ، نیازی نیست که دوباره نام همه فونت ها را تایپ کنیم. ما فقط می توانیم از $ font استفاده کنیم.

چه ابرقدرتهای دیگری Sass به CSS می آورند؟ h4>

Sass فوق العاده قدرتمند ، سازگار با عقب مانده است و یادگیری آن بسیار آسان است. همانطور که قبلاً اشاره کردیم که می توانید متغیرهایی ، تودرتو ، مخلوط کردن ، وارد کردن ، جزئیات ، عملگرهای ریاضی و منطقی و غیره ایجاد کنید. اکنون ما چند مثال به شما نشان خواهیم داد و می توانید آنها را در قالب وردپرس خود امتحان کنید.

مدیریت چندین صفحه سبک h4>

یک مشکل رایج که به عنوان یک طراح قالب وردپرس با آن روبرو خواهید شد ، سبک های بزرگ با بخشهای زیادی است. احتمالاً در حین کار بر روی تم خود بسیار بالا و پایین می روید تا بتوانید همه چیز را برطرف کنید. با استفاده از Sass ، می توانید چندین فایل را به صفحه اصلی خود وارد کنید و یک فایل CSS برای موضوع خود خارج کنید.

در مورد CSSimport چطور؟

مشكل استفاده ازimport در پرونده CSS شما این است كه هر بار كهimport را اضافه می كنید ، پرونده CSS شما درخواست HTTP دیگری را به سرور ایجاد می كند. این زمان بارگذاری صفحه شما را تحت تأثیر قرار می دهد که برای پروژه شما مناسب نیست. از طرف دیگر ، وقتی ازimport در Sass استفاده می کنید ، این پرونده ها شامل پرونده Sass شما می شوند و همه آنها را در یک فایل CSS برای مرورگرها ارائه می دهد.

برای یادگیری نحوه استفاده ازimport در Sass ، ابتدا باید یک فایل reset.scss را در فهرست سبکهای قالب خود ایجاد کنید و این کد را در آن جای گذاری کنید.

/ * http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   مجوز: هیچ (دامنه عمومی)
* /

html ، body ، div ، span ، applet ، object ، iframe ،
h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، p ، blockquote ، pre ،
a، abbr، مخفف، آدرس، big، cite، code،
del، dfn، em، img، ins، kbd، q، s، samp،
کوچک ، اعتصابی ، قوی ، زیر ، sup ، tt ، var ،
ب ، تو ، من ، مرکز ،
dl ، dt ، dd ، ol ، ul ، li ،
مجموعه میدان ، فرم ، برچسب ، افسانه ،
جدول ، عنوان ، tbody ، tfoot ، thead ، tr ، th ، td ،
مقاله ، کنار ، بوم ، جزئیات ، جاسازی ،
شکل ، figcaption ، پاورقی ، هدر ، hgroup ،
منو ، ورودی ، خروجی ، یاقوت ، بخش ، خلاصه ،
زمان ، علامت ، صوت ، فیلم {
حاشیه: 0؛
بالشتک: 0؛
حاشیه: 0؛
اندازه قلم: 100٪؛
قلم: به ارث بردن
vertical-align: پایه؛
}
/ * تنظیم مجدد نقش نمایش HTML5 برای مرورگرهای قدیمی * /
مقاله ، کنار ، جزئیات ، شکل ، شکل ،
پاورقی ، هدر ، گروه hg ، منو ، nav ، بخش {
نمایش: بلوک؛
}
بدن {
ارتفاع خط: 1؛
}
ol ، ul {
سبک لیست: هیچ؛
}
نقل قول ، q {
به نقل از: هیچ؛
}
blockquote: قبل ، blockquote: بعد ،
q: قبل ، q: بعد از {
محتوا: ''؛
محتوا: هیچ؛
}
جدول {
مرز-فروپاشی: سقوط؛
فاصله مرز: 0؛
}

اکنون باید پرونده اصلی style.scss خود را باز کرده و این خط را در جایی که می خواهید فایل تنظیم مجدد وارد شود اضافه کنید:

import 'تنظیم مجدد'؛

توجه داشته باشید که نیازی به وارد کردن نام کامل پرونده ندارید. برای کامپایل این مورد ، باید Koala را باز کنید و دوباره روی دکمه کامپایل کلیک کنید. اکنون پرونده اصلی style.css طرح زمینه خود را باز کنید و مشاهده خواهید کرد که تنظیم مجدد css در آن گنجانده شده است.

نستین در ساس h4>

برخلاف HTML ، CSS یک زبان تو در تو نیست. Sass به شما امکان می دهد فایل های تو در تو را ایجاد کنید که مدیریت و کار با آنها آسان باشد. به عنوان مثال ، می توانید همه عناصر مربوط به بخش

را در زیر انتخاب مقاله لانه کنید. به عنوان یک طراح قالب وردپرس ، این امکان را برای شما فراهم می کند تا در بخشهای مختلف کار کنید و به راحتی عناصر را سبک کنید. برای دیدن nestin در عمل ، این مورد را به پرونده style.scss خود اضافه کنید:

.entry-content {
پ {
اندازه قلم: 12px؛
ارتفاع خط: 150؛
}
اول {
ارتفاع خط: 150؛
}
a: link، a: بازدید شده ، a: فعال {
دکوراسیون متن: هیچ؛
رنگ: # ff6633؛
}
}

پس از پردازش ، CSS زیر تولید می شود:

.entry-content p {
  اندازه قلم: 12px؛
  ارتفاع خط: 150؛ }
.entry-content ul {
  ارتفاع خط: 150؛ }
.entry-content a: link، .entry-content a: بازدید شده، .entry-content a: فعال {
  دکوراسیون متن: هیچ؛
  رنگ: # ff6633؛ }

به عنوان یک طراح قالب ، شما برای ویجت ها ، پست ها ، منوهای ناوبری ، سرصفحه ، و غیره ظاهر متفاوتی را طراحی خواهید کرد. استفاده از nestin در Sass ساختار خوبی را ایجاد می کند و نیازی نیست که کلاس ها ، انتخاب کنندگان و کلاس های مشابه را بنویسید. شناسه ها بارها و بارها

استفاده از Mixins در Sass

گاهی اوقات لازم است که از برخی CSS ها برای استفاده از پروژه خود استفاده مجدد کنید حتی اگر قوانین سبک یکسان باشد زیرا از آنها در انتخابگرها و کلاسهای مختلف استفاده خواهید کرد. اینجاست که میکس ها به کار شما می آیند. بیایید یک ترکیب به فایل style.scss خود اضافه کنیم:

mixin مخفی متن {
    سرریز: پنهان
    indent-indent: -9000px؛
    نمایش: بلوک؛
}

این ترکیب در اصل برخی از متن ها را از نمایش پنهان می کند. در اینجا مثالی از نحوه استفاده از این ترکیب برای مخفی کردن متن برای آرم خود آورده شده است:

.لوگو{
    پس زمینه: url ("logo.png")؛
    ارتفاع: 100 پیکسل
    عرض: 200 پیکسل
    @ مخفی کردن متن ؛
}

توجه داشته باشید که برای افزودن مخلوط باید از include استفاده کنید. پس از پردازش ، CSS زیر ایجاد می شود:

.لوگو {
  پس زمینه: url ("logo.png")؛
  ارتفاع: 100 پیکسل
  عرض: 200 پیکسل
  سرریز: پنهان
  indent-indent: -9000px؛
  نمایش: بلوک؛ }

Mixins برای پیشوندهای فروشنده نیز بسیار مفید است. هنگام افزودن مقادیر تیرگی یا شعاع حاشیه ، با استفاده از mixins می توانید در وقت زیادی صرفه جویی کنید. به این مثال نگاه کنید ، جایی که ما برای اضافه کردن شعاع مرز مخلوط کرده ایم.

شعاع مرزیmixin (شعاع $) {
  -vebkit-border-radius: شعاع $؛
     -moz-border-radius: شعاع $؛
      -ms-border-radius: شعاع $؛
       شعاع مرزی: شعاع $ ؛
          مرز-شعاع: شعاع $؛
}

دکمه بزرگ. {@ include border-radius (10px)؛ }
.smallbutton {include border-radius (5px)؛ }

پس از کامپایل کردن ، CSS زیر ایجاد می شود:

دکمه بزرگ
  شعاع -webkit-border: 10px؛
  -moz-border-شعاع: 10px؛
  -ms-border-radius: 10px؛
  شعاع مرزی: 10px
  شعاع مرز: 10px؛ }

دکمه کوچک.
  شعاع -webkit-border: 5px؛
  -moz-border-شعاع: 5px؛
  -ms-border-radius: 5px؛
  شعاع مرزی: 5 پیکسل
  شعاع مرز: 5px؛ }

امیدواریم که این مقاله علاقه شما را در زمینه توسعه قالب وردپرس به Sass برانگیخته باشد. بسیاری از طراحان قالب وردپرس در حال حاضر از آن استفاده می کنند. برخی تا آنجا پیش می روند که می گویند در آینده تمام CSS از پیش پردازش می شوند و توسعه دهندگان قالب وردپرس باید بازی خود را ارتقا دهند. نظر خود را در مورد استفاده از زبان پیش پردازنده CSS مانند Sass برای توسعه قالب وردپرس خود با ما در میان بگذارید.

منابع اضافی h4>

Sass Lang
راه Sass

منبع:
https://www.wpbeginner.com/wp-tutorials/introduction-to-sass-for-new-wordpress-theme-designers/.

دیدگاهتان را بنویسید