2016
Lynda
John Riviello
2:29
English
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.
Introduction
Welcome
What you should know
Using the exercise files
Using the challenges
1. Getting Started
Set up your envionment
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
lynda.com/CSS-tutorials/CSS-Sass-Converting-Existing-Site/434463-2.html
Download File Size:677.7 MB
|
