By Wynn Netherland


Sass and Compass in Action is the definitive advisor to stylesheet authoring utilizing those progressive instruments. Written for either designers and builders, this publication demonstrates the facility of either Sass and Compass via a chain of examples that deal with universal discomfort issues linked to conventional stylesheet authoring. The ebook starts off with easy subject matters corresponding to CSS resets and strikes directly to extra concerned themes resembling grid frameworks and CSS3 seller implementation differences.

About this Book

For 15 years, we have now been utilizing CSS to patiently paint the internet by way of hand. not more! Sass and Compass upload scripting and a library of elements to plain CSS so that you can simplify stylesheet authoring, automate tedious projects, and upload dynamic styling positive aspects on your pages. examine Sass and Compass as energy instruments that let you paint with notable pace and precision.

Sass and Compass in Action is a hands-on consultant to stylesheet authoring utilizing those innovative instruments. This functional publication indicates you the way to cast off universal CSS ache issues and focus on making your pages pop. you are going to commence with easy subject matters like CSS resets after which growth to extra colossal demanding situations like development a private stylesheet framework to package deal and reuse your personal ways and opinions.

Purchase of the print e-book encompasses a unfastened book in PDF, Kindle, and ePub codecs from Manning Publications.

What's Inside

  • CSS for computing device and cellular internet apps
  • Loaded with examples and reusable techniques
  • Authors are Sass and Compass creators and middle workforce members

About the Authors

Wynn Netherland is a whole stack internet developer who co hosts The Changelog Podcast. Chris Eppstein is the writer of Compass and a member of the Sass center staff. Brandon Mathis is a passionate specialist internet clothier with deep Sass abilities. Nathan Weizenbaum is the writer and lead developer of Sass.

Table of Contents

    PART 1: GETTING familiar with SASS AND COMPASS
  1. Sass and Compass make stylesheets enjoyable again
  2. uncomplicated Sass syntax
  4. CSS grids with no the math
  5. do away with the mundane utilizing Compass
  6. CSS3 with Compass
  8. Spriting
  9. From prototype to production
  10. High-performance stylesheets
  11. PART four: complicated SASS AND COMPASS
  12. Scripting with Sass
  13. growing and sharing a Compass extension

Show description

Preview of Sass and Compass in Action PDF

Similar Web Development books

Joe Celko's Thinking in Sets: Auxiliary, Temporal, and Virtual Tables in SQL (The Morgan Kaufmann Series in Data Management Systems)

Completely clever programmers usually fight while pressured to paintings with SQL. Why? Joe Celko believes the matter lies with their procedural programming attitude, which retains them from taking complete good thing about the ability of declarative languages. the result's overly advanced and inefficient code, let alone misplaced productiveness.

Internet & World Wide Web How to Program (3rd Edition) (How to Program (Deitel))

The target of Deitel & affiliates, Inc. 's web & world-wide-web the best way to application, 3/e is to introduce readers with very little programming event to the intriguing global of Web-based functions. This finished e-book with accompanying CD-ROM teaches the basics had to application on the web.

Python Web Development with Django

Utilizing the easy, powerful, Python-based Django framework, you could construct strong internet options with remarkably few strains of code. In Python internet improvement with Django®, 3 skilled Django and Python builders disguise the entire ideas, instruments, and ideas you must utilize Django 1. zero, together with all of the significant positive aspects of the hot unencumber.

PHP Advanced and Object-Oriented Programming: Visual QuickPro Guide (3rd Edition)

Readers can take their personal home page abilities to the following point with this absolutely revised and up to date Hypertext Preprocessor complicated: visible QuickPro consultant, 3rd variation! jam-packed with fourteen chapters of step by step content material and written by way of bestselling writer and Hypertext Preprocessor programmer Larry Ullman, this consultant teaches particular issues in direct, concentrated segments, indicates how Hypertext Preprocessor is utilized in real-world functions.

Additional resources for Sass and Compass in Action

Show sample text content

Most sensible perform indicates you comprise pseudo aspect selectors within the following order: 1. 2. :visited three. :focus four. :hover five. :active this implies your CSS could glance whatever just like the following. directory four. three. CSS for surroundings hyperlink colours in line with browser specificity a {color: #333} a:visited {color: #555} a:focus {color: #f00} a:hover {color: #00f} a:active {color: #f00} It nonetheless should be tedious to recollect this order and create extra pseudo parts simply to swap shades in your hyperlinks. Sass’s & guardian selector doesn’t purchase you a lot. thankfully, Compass offers a simple mixin to address the activity: a { @include link-colors(#333, #00f, #f00, #555, #f00); } Astute readers will observe that the order of the colours during this Compass instance doesn’t fit these within the CSS instance. it is because Compass has selected to optimize for stylesheet writer productiveness rather than browser priority. The order of the colour arguments for link-colors is the order during which you’re probably to exploit them on your stylesheets. desk four. 2 indicates the order of the entire set of link-colors arguments in addition to the order during which they’re utilized for browser hyperlink specificity. desk four. 2. Arguments for link-colors link-colors order Browser order :hover :visited :active :focus :visited :hover :focus :active If you’re the attention-to-detail sort who prefers clarity over terseness, you could cross your arguments as named parameters: a { @include link-colors( #333, $hover: #00f, $active: #f00, $visited: #555, $focus: #f00); } The unnamed syntax has its benefits. Following Pareto’s well-known 80/20 rule (in this situation, 20% of the code will disguise eighty% of the use cases), on the grounds that link-colors arguments are non-compulsory, you'll specify default and :hover country shades just by passing the 1st arguments: a { @include link-colors(#333, #00f); } Now that you’ve visible how you can upload colour to hyperlinks, let’s have a look at alternative routes Compass makes it effortless to visually distinguish hyperlinks on your designs. Hover with sort utilizing Hover-Link a few usability specialists say you want to continually upload underlines for your hyperlinks to cue clients that an merchandise is clickable. yet there are occasions whilst, as a result of line peak, including underlines may possibly truly degrade clarity. believe you opt so as to add an underline basically whilst a person mouses over a hyperlink with the next CSS: a { text-decoration: none} a:hover { text-decoration: underline } Compass makes it effortless to underline hyperlinks simply at the :hover kingdom with the hover-link mixin: a {@include hover-link} observe how effortless it's to grok what’s occurring with this mixin. You don’t need to parse the houses within the stylesheets to work out what’s happening; it’s correct there within the identify: hover-link. Incognito hyperlinks with Unstyled-Link Now think you must disguise a hyperlink altogether, removal any styling that will tip the consumer link lies inside a paragraph of textual content. you may write anything alongside the strains of the next CSS: p. mystery a { colour: inherit; cursor: inherit; text-decoration: inherit } this could strip away any colour, cursor, or underlining, letting your textual content mix in with any containing textual content.

Download PDF sample

Rated 4.94 of 5 – based on 12 votes