Omid Asgari

فعالسازی sass در وردپرس

۴ آذر, ۱۳۹۷

به به چه بحث شیرینی

بحث طراحی پوسته برای وردپرس در واقع برنامه نویسی پوسته وردپرس کاره خیلی ساده ای هست

حالا شما تصور کنید که بتونید با استفاده از sass قالب خودتون رو طراحی کنید. واقعال ادم عشق میکنه !

 

اینجا یه سوال پیش میاد :

sass چیست ؟

sass همون css تکامل یافته است ، البته این تعریفی که من کردم تعریف غیر تئوری و علمیه ولی خوب هدف بنده ساده شرح دادن میباشد .

حالا توضیح تکمیلی میدم بهتون که sass چیست ؟

شما در استایل های css میتوانید کد های خودتون رو پشت سر هم بنویسید یعنی برای المان ایکس استایل بنویسید ولی در sass شما میتونید المان والد درست کنید و تو در تو استایل های خودتون رو بنویسید

اینکه چگونه با sass میشه کد نوشت از حوصله من خارجه میتونید سایت رسمی sass رو باز کنید و بخونیدش و حال کنید.

 

حالا شما میخواید تم وردپرس بنویسید و با استفاده از sass

 

مرحله اول :نصب و دانلود rubyinstaller

مرحله دوم : شما command promt رو باز کنید.

برای این کار منوی استارت رو باز کنید و cmd را تایپ کنید.

برای اطمینان از نصب rubbyinstaller میتونید کد زیر را وارد کنید تا ورژن نصب شده را به شما در خط بعدی گزارش دهد و در غیر این صورت ارور خواهد داد.

gem -v

در کنسول باز شده کد زیر را وارد کنید :

gem install sass

بعد این دستور sass شروع به نصب شدن روی سیستم شما میشود.

خب مرحله نصب تموم شد.

 

حالا میریم داخل فولدر تم وردپرس

یک قایل به نام sass.sass تولید میکنیم و در کنار همین فایل فایل style.css را ایجاد میکنیم.

از این پس برای نوشتن کد های sass داخل فایل sass.sass اقدام میکنیم.

خب در مرحله بعد لازمه به سیستم بفهمونیم فایل sass.sass را کامپایل کن و نتیجه را در style.css ذخیره کن !

برای این کار کافیه دستور زیر را به این فرمت بنویسید :

sass (آدرس فایل sass) (آدرس فایل css)

مثل :

sass c:\\theme\sass.sass c:\\theme\style.css

بعد هر تغییر در فایل sass کافیه این خط را مجدد اجرا کنید.

 

اما این کار خیلی رو مخه و اعصاب خورد کن .

بهتره به سیستم بگیم اقا هر بار که من تغییری دادم خودت کامپایل کن منتقل کن به فایل style.css

کد این کار اینه که داخل کنسول باید بنیویسید:

 

sass --watch sass.sass:style.css

 

و تمام شما با موفقیت تونستین که پوسته وردپرس خودتون رو با sass تولید کنید.

Views: 15

شما اولین نفری باشید که نظر خود را ثبت میکنید :)

نظرات خود را با ما در میان بگذارید.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *