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.
Overview
Syllabus
Introduction
- Welcome
- What you should know
- Using the exercise files
- Using the challenges
- 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
- 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
- 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
- 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
- Next steps
Taught by
John Riviello
