CSS to Sass: Converting an Existing Site

Convert an existing site to use Sass and learn about libSass. Learn how to set up a Sass-friendly dev environment, debug styles, create variables and mixins, and make new styles.

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