Nesting, Extend, Placeholders, and Mixins | Sass and Compass for Designers

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Sass and Compass for Designers

By : Ben Frain

4.6 (35)

Sass and Compass for Designers

4.6 (35)

By: Ben Frain

Overview of this book

A step-by-step tutorial guide, taking you through how to build a responsive Sass and Compass powered website. If you understand HTML and CSS, this book is all you need to take your code to the next level with Sass and Compass. No prior understanding of CSS preprocessors or programming conventions is needed.

Sass and Compass for Designers

Sass and Compass for Designers

Credits

Credits

Foreword

Foreword

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Preface

Free Chapter

Getting Started with Sass and Compass

Getting Started with Sass and Compass

Why do we need CSS preprocessors?

Why you should use Sass and Compass

What is Sass?

What is Compass?

Install Sass and Compass

Installing and working with Sass and Compass on the command line

Graphical tools for working with Sass and Compass

How to work with Sass files in text editors

Summary

Setting Up a Sass and Compass project

Setting Up a Sass and Compass project

Setting up a Sass and Compass project

Understanding the config.rb file

Creating and using partial files

Sass comment formats

A basic index.html file

A base for future projects

Summary

Nesting, Extend, Placeholders, and Mixins

Nesting, Extend, Placeholders, and Mixins

Styling a site with Sass and Compass

Separating layout from visuals

What nesting is and how it facilitates modules of code

Using the @extend directive to extend existing rules

Use placeholder selectors to extend styles only when needed

What mixins are and how we can use them to easily produce oft-needed code

A cautionary note about generated CSS

Summary

Manipulate Color with Ease

Manipulate Color with Ease

Only define a color once

The lighten and darken functions

Markup amendments and diversions

Back to colors

The complement (and invert) functions

The invert function

The adjust-hue function

The saturate and desaturate functions

The transparentize/fade-out functions

The opacify/fade-in functions

The grayscale function

The rgba function

The mix function

The adjust-color function

The scale-color function

The shade and tint functions

Putting it all together

Summary

Responsive and Flexible Grids with Sass and Compass

Responsive and Flexible Grids with Sass and Compass

Arguments against grids

Reasons to use a grid system

What is Susy?

Installing the Susy Compass plugin

Including Susy in a project

Setting up a Susy grid

Defining a context for the grid

Making a ‘mobile first’ responsive grid

Making breakpoints with Susy

Creating an entirely fluid grid

Creating a static ‘fixed’ grid

Using Susy grid helpers

Pre, Post, Squish, Push, and Pull

Grids within grids

Sub-pixel rounding issues

Summary

Advanced Media Queries with Sass and Mixins

Advanced Media Queries with Sass and Mixins

Media queries in Sass

Inline media queries with Sass

Creating a mixin to easily handle media queries

How the MQ media query mixin works

Variations on a theme

Writing inline media queries

Gzip and CSS compression = victory!

Testing the real-world difference between inline and grouped media queries

Reviewing CSS code

Summary

Easy CSS3, Image Sprites, and More with Compass

Easy CSS3, Image Sprites, and More with Compass

Easy CSS3 with Compass's mixins

The border-radius syntax

Multiple columns

Background gradients

Adding background images with the Compass image-url helper

Image width and height helpers

Compass image sprites

Compass's text replacement mixins

Creating data URIs from images

Easy fallbacks for non-SVG capable devices

CSS transforms

CSS Filters

Transitions

Summary

Programmatic Logic with Sass

Programmatic Logic with Sass

Math calculations with Sass

Control directives and how to use them

Stripping and adding units to values

Writing functions in Sass

Using the @debug directive

The @warn directive

Summary

Becoming a Sass and Compass Power User

Becoming a Sass and Compass Power User

Turning off Compass support for specific vendors

Adding experimental support for bleeding edge CSS features

Defining experimental values

The Sass interactive shell

Adding the Sass globbing plugin to import batches of partial files

Creating multiple separate style sheets

Converting partial files to standalone style sheets

Compass statistics

Clearing the Sass cache

One-off Compass compiles

Mission debrief

Avoid conjecture with tools and testing

Parting shots

Summary

Index

Index

Separating layout from visuals

Before getting into nesting, @extend, placeholders, and mixins, it makes sense to create some partial files for organizing the styles.

Rather than create a partial Sass file for each structural area (the header, footer, and navigation), and lump all the visual styles relevant inside, we can structure the code in a slightly more abstract manner.

Note

There is no right or wrong way to split up Sass files. However, it's worth looking at mature and respected projects such as Twitter Bootstrap (https://github.com/twitter/bootstrap) and Foundation from Zurb (https://github.com/zurb/foundation) to see how they organize their code.

We'll create a partial file called _base.scss that will contain some base styles:

body {
    font-size: 1em;
    line-height: 1.4;
}
::-moz-selection {
    background: $color1;
    text-shadow: none;
}
::selection {
    background: $color1;
    text-shadow: none;
}

Then a partial file called _layout.scss. That will only contain rules pertaining...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Sass and Compass for Designers

Search

Your notes and bookmarks