Sass and Compass in Action

Sass and Compass in Action

Wynn Netherland

Language: English

Pages: 240

ISBN: 1617290149

Format: PDF / Kindle (mobi) / ePub


Summary

Sass and Compass in Action is the definitive guide to stylesheet authoring using these two revolutionary tools. Written for both designers and developers, this book demonstrates the power of both Sass and Compass through a series of examples that address common pain points associated with traditional stylesheet authoring. The book begins with simple topics such as CSS resets and moves on to more involved topics such as grid frameworks and CSS3 vendor implementation differences.

About this Book

For 15 years, we've been using CSS to patiently paint the web by hand. No more! Sass and Compass add scripting and a library of components to standard CSS so you can simplify stylesheet authoring, automate tedious tasks, and add dynamic styling features to your pages. Think of Sass and Compass as power tools that allow you to paint with remarkable speed and precision.

Sass and Compass in Action is a hands-on guide to stylesheet authoring using these two revolutionary tools. This practical book shows you how to eliminate common CSS pain points and concentrate on making your pages pop. You'll begin with simple topics like CSS resets and then progress to more substantial challenges like building a personal stylesheet framework to bundle and reuse your own approaches and opinions.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

What's Inside

  • CSS for desktop and mobile web apps
  • Loaded with examples and reusable techniques
  • Authors are Sass and Compass creators and core team members

About the Authors

Wynn Netherland is a full stack web developer who co hosts The Changelog Podcast. Chris Eppstein is the creator of Compass and a member of the Sass core team. Brandon Mathis is a passionate professional web designer with deep Sass skills. Nathan Weizenbaum is the creator and lead developer of Sass.

Table of Contents

    PART 1: GETTING ACQUAINTED WITH SASS AND COMPASS
  1. Sass and Compass make stylesheets fun again
  2. Basic Sass syntax
  3. PART 2: USING SASS AND COMPASS IN PRACTICE
  4. CSS grids without the math
  5. Eliminate the mundane using Compass
  6. CSS3 with Compass
  7. PART 3: TUNING FOR PRODUCTION
  8. Spriting
  9. From prototype to production
  10. High-performance stylesheets
  11. PART 4: ADVANCED SASS AND COMPASS
  12. Scripting with Sass
  13. Creating and sharing a Compass extension

Dependency Injection with AngularJS

Web Audio API

WordPress Bible (2nd Edition)

Meteor in Action

 

 

 

 

 

 

 

 

 

 

 

ul.plain ul.plain { color: #444; list-style: none; } ul.plain li { list-style-image: none; list-style-type: none; margin-left: 0px; } The rules within the mixin can even use the Sass parent selector, &. Just like when it’s used outside of mixins, it’s replaced by the parent selector when Sass unpacks the nested rules. If a mixin contains only CSS rules and no properties, it can be included at the top level of the document, outside of any CSS rule. This isn’t very useful when you’re

be a pain when you don’t need to customize. Thus Sass allows mixins to declare default values for their arguments. 2.5.4. Default argument values Arguments can also have default values, which are used if the mixin isn’t passed enough arguments when it’s @included. Default arguments take the form $name: default-value. The value can be any normal CSS value, including other arguments. Listing 2.3. Setting default values for arguments @mixin link-colors( $normal, $hover: $normal, $visited:

it’s not like the two classes just happen to have the same style. You should be able to express the relationship more clearly. So you use @extend. Having .seriousError inherit from .error makes the relationship between the two clear. More important, everywhere you use .error in your stylesheet will work for .seriousError as well. Now that you have a better idea of when inheritance should be used and what it’s particularly good for, it’s time to look at some advanced uses. 2.6.2. Advanced

pain of establishing network connections with a remote server and downloading files. Every time your browser wants to download a file from a server, it has to go through a series of steps. Here’s what that looks like in its simplest form: 1. Browser—Asks the server to open a socket for transfer 2. Server—Processes the request and responds 3. Browser—Acknowledges the server’s response 4. Browser—Requests data from the server 5. Server—Processes the request 6. Server—Looks for the file 7.

the / uses a variable. The entire value is surrounded by parentheses. The value is used as part of another arithmetic expression. For example, in the following expression, division isn’t performed: 1px/2px => 1px/2px But in these three, it is: $var: 1px; $var/2px => 0.5px (1px/2px) => 0.5px 1 + (1px/2px) => 1.5px Although numbers are used more often, colors are one of the most interesting of Sass’s data types. 9.2.3. Colors Colors in CSS can be written in a number of different ways.

Download sample

Download