فعالسازی 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 تولید کنید.

دسته بندی ها:

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

نشانی ایمیل شما منتشر نخواهد شد.

*

*

*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.