این آموزش نسل بعدی CSS یعنی Sass را معرفی می کند. بسیاری از تونسعه دهندگان وب از این فن آوری استفاده می کنند.تبدیل سایت هایی که با CSS نوشته شده اند بهترین یادگیری Sass است.در این آموزش Sass با Node.js راه اندازی می شود.در پایان مدرس این دوره ، با استفاده از تکنولوژی هایی که در این دوره آموزش داده است سایت خود را در طی 15 دقیقه طراحی می کند.

این دوره آموزشی محصول موسسهLynda است.

سرفصل های این دوره:

  • نصب یا ارتقاء js
  • تبدیل CSS به SCSS
  • اشکال زدایی تولیدCSS
  • ایجاد متغیرهای اصلی و mixin ها
  • درست بودن یک متغیر رنگ
  • استفاده از متغیرهای رنگ
  • واحد طرح انتزاعی به متغیرها
  • ارزش قلم مجرد به متغیرها
  • و …

عنوان دوره: Lynda CSS to Sass Converting an Existing Site

مدت دوره:2 ساعت و 29 دقیقه

نویسنده: John Riviello


Lynda CSS to Sass Converting an Existing Site

John Riviello
2h 29m

Sass is next-gen CSS. Many developers are already using this timesaving technology to style their new web projects. But what about existing sites? By converting the way the CSS is authored'using Sass instead of plain CSS'you can realize the benefits of Sass on older websites. Converting an existing site is also a great way to learn Sass and understand how Sass is compiled into CSS.
In these Sass tutorials, students will learn the benefits of libSass over the original Ruby Sass, and set up a Sass-friendly development environment with Node.js and Grunt. A unique aspect of this course is learning how to handle challenges specific to integrating Sass with an existing website, such as new debugging workflows and the variables and mixins worth the effort to define. Author John Riviello also introduces a few Sass tools that speed up media query handling, automatic browser prefixing, and sprite generation. At the end of the course, he shows how your setup work pays off, styling a whole new section of the practice site in just 15 minutes.
Topics include:
Deciding between Ruby Sass or libSass
Installing Node.js and Grunt-Sass
Converting CSS to SCSS
Creating core variables and mixins
Abstracting units and values
Applying advanced mixins
Generating image sprites with eyeglass-spriting
Creating high-DPI sprites
Building new styles

4m 35s
1m 23s
What you should know
Using the exercise files
1m 56s
Using the challenges
1. Getting Started
35m 40s
Set up your envionment
4m 7s
Decide between Ruby Sass or libSass
1m 24s
Install or upgrade Node.js
Install Grunt-Sass
5m 19s
Configure Grunt-Sass
4m 42s
Speed up development with Grunt Watch
3m 56s
Convert CSS to SCSS
7m 24s
Debug generated CSS
8m 32s
2. Creating Core Variables and Mixins
51m 39s
Create color variables
3m 45s
Use color variables
6m 55s
Abstract layout units into variables
3m 38s
Abstract font values into variables
8m 22s
Abstract z-index values into variables
2m 47s
Install csscss
2m 5s
Mixins worth creating
6m 33s
Create advanced mixins
4m 44s
Apply our advanced mixin
5m 57s
Manage media query breakpoints with include-media
6m 53s
3. Useful Sass Tools
33m 24s
Use a mixin library
4m 58s
Handle browser prefixes with Autoprefixer
7m 36s
Manage node-sass extensions with Eyeglass
3m 30s
Configure eyeglass-spriting for image sprites
6m 4s
Generate image sprites with eyeglass-spriting
7m 5s
Integrate eyeglass-spriting's CSS into our website
4m 11s
4. Applying What We've Learned
22m 53s
Challenge: Create high-DPI sprites with Eyeglass and include-media
1m 28s
Solution: Create high-DPI sprites with Eyeglass and include-media
8m 3s
Challenge: Add new styles with our variables, mixins, and sprite tools
2m 2s
Solution: Add new styles with our variables, mixins, and sprite tools
11m 20s
Going Further
Next steps