مجله خبری هاست ایران » طراحی و توسعه » آموزش Bootstarp 4: کار با nmp، Grunt.js و Sass -قسمت دوم
  • mag-telegram.jpg
  • landing96-300-420.jpg
توسعه وب طراحی و توسعه

آموزش Bootstarp 4: کار با nmp، Grunt.js و Sass -قسمت دوم

آموزش Bootstarp 4: کار با nmp، Grunt.js و Sass -قسمت دوم

در ابتدا پیشنهاد می‌کنیم قسمت اول مقاله آموزش Bootstarp 4: کار با NPM ، Grunt.js و Sass را مطالعه فرمایید.

بوت­‌استرپ ۴ همراه با برنامه رسمی Sass به‌بعنوان فریم­ورک می‌­آید. اگر شما با برنامه Sass آشنا نیستید، اجرای آن از طریق Bootstarp  می­تواند کمی چاره­‌ساز باشد.

در مقاله قبلی، برای توسعه سریع­تر، nmp و Grunt.js را نصب، پیکربندی و سفارشی‌­سازی کردیم. در این مقاله با Compass و Sass را مورد بررسی قرار می­‌دهیم. در انتهای این آموزش با موضوع Bootstarp 4 که با Sass ساخته شده است، آشنا می‌­شویم.

منابع مورد نیاز برای این آموزش:

  • js
  • min.js
  • Velocity
  • js
  • js
  • js
  • slide images
  • scss
  • nmp and Grunt.js

HTML

قبل از این که با Sass و Grunt.js کار کنیم، نیاز داریم که علامت‌­گذاری با کدهای جاوااسکریپت را انجام دهیم. شما می‌­توانید کدهای خود را در فایل index.html ذخیره کنید.

نکته: تمام کدهای جاوااسکریپت در پوشه JS قرار می­‌گیرد.

نصب Bootstrap 4 با nmp

با استفاده از git branch v4-dev بوت‌­استرپ ۴ را دانلود کنید. ترمینال یا فرمان سریع خود را باز کرده و در داخل فهرست nmp install twbs/bootstrap#v4-dev را تایپ کنید، بسته به‌طور مستقیم از Github به پوشه nmp_modules دانلود می­‌شود.

نصب Bootstrap 4 با nmp

فولدر بوت‌­استرپ

فولدر بوت استرپ

کار با Sass

ابتدا پوشه Scss را در داخل پکیج Bootstarp  و داخل پوشه Sass انتقال می‌دهیم، تا بتوانیم به‌تمامی فایل­‌های مهم Bootstrap Sass دسترسی داشته باشیم. اگر بخواهید فایل CSS بوت­‌استرپ – bootstrap.min.css یا bootstrap.css را به پوشه .scss دیگری انتقال دهید، قابل انجام است.

پوشه .scss

پوشه اصلی را باز کرده و درون _import.scss فایل­‌های CSS ضروری و مورد نیاز را وارد می‌­کنیم. کد زیر را کپی کرده و سپس جایگذاری کنید:

همچنین لینک­‌های فونت Google را که به آن­ها نیاز داریم داخل فایل _typography.scss وارد می‌کنیم.

بر روی متغیرها برای Sass کار می­‌کنیم. داخل فایل _variable.scss کد زیر را کپی کنید:

سپس برای mixin ها، کد زیر را داخل فایل _mixins.scss (داخل پوشه کمکی) اضافه کنید:

در نهایت، ما در فایل اصلی که style.scss است کار می­‌کنیم. با وارد کردن فایل­‌های پشتیبانی scss همراه با CSS معمولی از طریق متغیرهای Sass شروع خواهیم کرد.

کامپایل فایل‌­های Sass از طریق Grunt.js

با رفتن به Gruntfile.js می‌­توانیم Sass و Compass را با استفاده از کدهای زیر تنظیم کنیم. این کد راه پیوند به فایل­‌های style.scss و style.css را تنظیم کرده و Compass را راه‌­اندازی می­‌کنیم: true در گزینه‌­های Sass.

عمل نهایی که ما باید انجام دهیم، ایجاد و تنظیم یک فایل config.rb برای Compass در داخل دایرکتوری پروژه است. این فایل ارتباط میان فایل­‌ها و هرچه که در آن­‌ها است، چگونگی و مکانی که CSS باید تولید شود و سایر وابستگی­‌های دیگر پروژه به Compass را تعریف می‌­کند. کد زیر را در فایل config.rb کپی کنید:

در نهایت فایل­‌های scss را به یک فایل CSS کامپایل کنید، به ترمینال یا خط فرمانی خود بروید و در داخل دایرکتوری پروژه، grunt sass  را تایپ کنید.

کامپایل scss

همچنین می‌­توانیم از Grunt بخواهیم که تغییرات را بررسی کرده و کارهایی که نیاز است را انجام دهد. کار بررسی زمانی که یک فایل تغییر داده یا ذخیره می­‌شود، انجام می‌گیرد. از آن جایی که تنظیمات قبلاً در فایل‌­های Sass آماده شده‌­اند، تنها لازم است که برای تایپ ساده grunt به دستورات یا ترمینال نگاهی بیندازیم.

بررسی grunt

کار با custom.js

به‌عنوان آخرین کار، اجازه دهید که کدهای جاوااسکریپت زیر را در داخل پوشه custom.js اضافه کنیم تا انیمیشن برای تم Bootstarp  فعال شود. شما می‌­توانید نسخه کوچک‌تر از این فایل را فقط با تایپ کردن grunt uglify ایجاد کنید.

خلاصه

بوت‌­استرپ یک فریم­ورک عالی از CSS است که می­‌توانید از آن برای ساخت یک وب‌سایت استفاده نمایید و با استفاده از نسخه SASS تقریباً می‌­توانید هر چیزی را که می‌خواهید اجرا کنید.

خوشبختانه Grunt.js این کار را بسیار آسان‌­تر می‌­کند، کافی است کمی وقت برای آموزش بگذارید.

امیدواریم این آموزش در درک nmp،  Grunt.js و SASS و چگونگی توسعه دادن بوت‌­استرپ به شما کمک کند.

 

 

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه