Join John Riviello for an in-depth discussion in this video Abstract layout units into variables, part of CSS to Sass: Converting an Existing Site.
- View Offline
- Let's go ahead now…and create some variables for layout units.…What we'll do is see if we're using…any common values for margin and patting values.…To do that, we'll right click our Sass folder…and sublime text, choose find in the folder,…and then we want to search for…both margin and padding values,…and we can search for both at the same time…with a regular expression.…So I'll click this first option button here…to activate the regular expression search,…and then I'll type margin|padding.…
In a regular expression, the pipe character just means or.…So that's all we're doing here,…is searching for margin or padding.…Then we'll click find, and this will search…through all our styles for margin and padding declarations.…Now for margins and paddings,…I don't want to go too crazy…replacing every single value with a variable.…I just want to see if there's any patterns developing…that are worth leveraging variables for.…I'm going to ignore any zeros,…since it's much easier and shorter to type a zero…than an actual Sass variable.…
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.
- 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