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
- Sass and Compass make stylesheets fun again
- Basic Sass syntax
- CSS grids without the math
- Eliminate the mundane using Compass
- CSS3 with Compass
- Spriting
- From prototype to production
- High-performance stylesheets
- Scripting with Sass
- Creating and sharing a Compass extension
PART 1: GETTING ACQUAINTED WITH SASS AND COMPASS
PART 2: USING SASS AND COMPASS IN PRACTICE
PART 3: TUNING FOR PRODUCTION
PART 4: ADVANCED SASS AND COMPASS
Dependency Injection with AngularJS
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.