Share Description
In this course, you will learn:
- The benefits of libSass over the original Ruby Sass, and set up a Sass-friendly development environment with Node.js and Grunt.
- 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.
- How your setup work pays off, styling a whole new section of the practice site in just 15 minutes.
- How Sass is compiled into CSS.
Syllabus:
- Introduction
- 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
