CSS به Sass: تبدیل یک سایت موجود

مدرس John Riviello

انتشار 2016/02/12

مدت زمان 2h 31m

سطح متوسط

فایل تمرینی دارد

آموزش CSS to Sass: Converting an Existing Site

Sass نسل بعدی CSS است. بسیاری از توسعه دهندگان در حال حاضر از این فناوری صرفه جویی در زمان برای طراحی پروژه های جدید وب خود استفاده می کنند. اما سایت های موجود چطور؟ با تبدیل نحوه نگارش CSS - با استفاده از Sass به جای CSS ساده - می توانید مزایای Sass را در وب سایت های قدیمی تر متوجه شوید. تبدیل یک سایت موجود نیز راهی عالی برای یادگیری Sass و درک نحوه کامپایل Sass به CSS است.rnrn یکی از جنبه های منحصر به فرد این دوره، یادگیری نحوه رسیدگی به چالش های خاص برای ادغام Sass با یک وب سایت موجود است، مانند جریان های کار اشکال زدایی جدید و متغیرها و ترکیب هایی که ارزش تلاش برای تعریف کردن را دارند. نویسنده John Riviello همچنین چند ابزار Sass را معرفی می‌کند که مدیریت درخواست رسانه، پیشوند خودکار مرورگر و تولید sprite را سرعت می‌بخشد. در پایان دوره، او نشان می‌دهد که چگونه کار راه‌اندازی شما نتیجه می‌دهد و یک بخش کاملاً جدید از سایت تمرین را تنها در 15 دقیقه طراحی می‌کند.

Cascading Style Sheets (CSS) Front-end Development SASS

Introduction

Welcome ()

What you should know ()

Using the exercise files ()

Using the challenges ()

1. Getting Started

Set up your environment ()

Decide between Ruby Sass or libSass ()

Install or upgrade Node.js ()

Install Grunt-Sass ()

Configure Grunt-Sass ()

Speed up development with Grunt Watch ()

Convert CSS to SCSS ()

Debug generated CSS ()

2. Creating Core Variables and Mixins

Create color variables ()

Use color variables ()

Abstract layout units into variables ()

Abstract font values into variables ()

Abstract z-index values into variables ()

Install csscss ()

Mixins worth creating ()

Create advanced mixins ()

Apply our advanced mixin ()

Manage media query breakpoints with include-media ()

3. Useful Sass Tools

Use a mixin library ()

Handle browser prefixes with Autoprefixer ()

Manage node-sass extensions with Eyeglass ()

Configure eyeglass-spriting for image sprites ()

Generate image sprites with eyeglass-spriting ()

Integrate eyeglass-spriting's CSS into our website ()

4. Applying What We've Learned

Challenge: Create high-DPI sprites with Eyeglass and include-media ()

Solution: Create high-DPI sprites with Eyeglass and include-media ()

Challenge: Add new styles with our variables, mixins, and sprite tools ()

Solution: Add new styles with our variables, mixins, and sprite tools ()

Going Further

Next steps ()

Ex_Files_CSS_Sass_Existing.zip (168.0 MB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.