آموزش تبدیل SCSS به CSS با استفاده از Gulp

زبان SCSS یک نوع پیشرفته ای از CSS است با این تفاوت که میتوان متغیرها و حلقه ها را در آن به کار برد در صورتی که در CSS امکان آن نیست . همان طور که میدانید طراحی وب سایت بدون دانش CSS امکان پذیر نیست از طرفی روش های جدید نیز به بالا رفتن کیفیت کمک خواهد کرد.

یک روش بهتر و جدید استفاده از webpack است و مخصوصا laravel mix که ما قبلا یک نسخه از آن را به صورت starter kit تهیه کرده ایم آن را از لینک زیر دریافت کنید

https://github.com/vahidalvandi/starter-laravel-mix-non-laravel

روش تبدیل بسیار ساده است . کافی است ابتدا nodejs را نصب کنید این برنامه را میتوانید از سایت دانلود کنید. سپس یک پوشه جدید ساخته و بعد از وارد شدن به مسیر پوشه از طریق CMD یا وارد شدن در پوشه و کلیک راست در وسط صفحه و انتخاب Open Cmd here یا در ویندوز 10 عبارت Open powersheel windows here .

تا اینجا مقدمات کار را پیش رفتیم.

  • در محیط CMD ابتدا دستور npm init را بزنید . سوالات را با زدن دکمه enter رد کنید
  • با زدن دستور npm install -g gulp نرم افزار Gulp را به صورت Global نصب کنید با این دستور یکبار این نرم افزار در Cache ویندوز شما قرار میگیرد و بعد از هر بار نصب لازم به دانلود آن نیست.
  • دستور npm install --save-dev gulp را وارد کنید . این دستور Gulp را در پوشه جاری که ساخته اید نصب میکند
  • دستور npm install --save-dev gulp-sass پلاگین تبدیل CSS به Sass یا SCSS را نصب میکند
  • حالا باید در Root یا همان پوشه ای که ساخته اید یک فایل با نام Gulpfile.js ایجاد کنید.
  • ساختار برنامه شما باید به این صورت باشد
  • ساختار برنامه شما باید مانند شکل زیر باشد

 

    https://ryanchristiani.com/getting-started-with-gulp-and-sass/


      مطالبی که به شما پیشنهاد میشود
      عضویت در خبرنامه
      صرفا جهت اطلاع رسانی و مقالات جدید