Sass and Compass Designer's Cookbook电子书

Sass and Compass Designer's Cookbook

Table of Contents

Sass and Compass Designer's Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

eBooks, discount offers, and more

Why Subscribe?

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Getting Started with Sass

Introduction

Installing Sass for command line usage

Getting ready

How to do it...

How it works...

There's more...

See also

Installing Compass

Getting ready

How to do it...

How it works...

There's more...

See also

Using Sass on the command line

Getting ready

How to do it...

How it works...

There's more...

Using the Sass interactive mode and SassScript

Getting ready

How to do it...

How it works...

There's more...

Using the sass-gulp plugin with Gulp

Getting ready

How to do it...

How it works...

There's more...

See also

Using Sass in the browsers

Getting ready

How to do it...

How it works...

There's more...

See also

Writing Sass or SCSS

Getting ready

How to do it...

How it works...

There's more...

See also

Choosing your output style

Getting ready

How to do it...

How it works...

There's more...

See also

Working with partials

Getting ready

How to do it

How it works...

There's more…

See also

Writing your code in a text editor

Getting ready

How to do it…

How it works...

There's more...

See also

Style guidelines

GUIs for Sass

2. Debugging Your Code

Introduction

Using CSS source maps to debug your code

Getting ready

How to do it...

How it works...

There's more...

See also

Editing and debugging your Sass code in a browser

Getting ready

How to do it...

How it works...

There's more...

See also

Commenting your code in the SCSS syntax

Getting ready

How to do it...

How it works...

There's more...

See also

Building style guides with tdcss.js

Getting ready

How to do it...

How it works...

There's more…

See also

Building style guides with the Kalei Styleguide

Getting ready

How to do it...

How it works...

There's more…

See also

Using the @debug, @warn, and @error directives

Getting ready

How to do it...

How it works...

There's more...

Playing on SassMeister

Getting ready

How to do it...

How it works...

There's more...

See also

3. Variables, Mixins, and Functions

Introduction

Using variables

Getting ready

How to do it...

How it works...

There's more...

See also

Applying operations in Sass

Getting ready

How to do it...

How it works...

There's more...

See also

Declaring variables with !default

Getting ready

How to do it...

How it works...

There's more...

Interpolation of variables

Getting ready

How to do it...

How it works...

There's more...

Leveraging mixins

Getting ready

How to do it...

How it works...

There's more…

See also

Writing mixins with arguments

Getting ready

How to do it...

How it works...

There's more...

See also

Duplicating mixins and name collisions

Getting ready

How to do it...

How it works...

There's more...

See also

Creating pure Sass functions

Getting ready

How to do it...

How it works...

There's more...

See also

4. Nested Selectors and Modular CSS

Introduction

Using nested selectors

Getting ready

How to do it...

How it works...

There's more...

See also

Creating more intuitive code and making inheritance clear

Getting ready

How to do it...

How it works...

There's more...

See also

Referencing parent selectors with the & sign

Getting ready...

How to do it...

How it works...

There's more...

See also

Using multiple & signs to refer to the parent selector more than once

Getting ready

How to do it...

How it works...

There's more...

Using the & operator to change the selector order

Getting ready

How to do it...

How it works…

There's more…

See also

Utilizing the @extend directive

Getting ready

How to do it...

How it works...

There's more...

See also

Using placeholder selectors with the @extend directive

Getting ready

How to do it...

How it works...

There's more...

Using the @extend directive together with the @media at-rule

Getting ready

How to do it...

How it works...

There's more...

Using the @extend directive with care

Getting ready

How to do it...

How it works...

There's more...

See also

Emitting rules at the root of the document

Getting ready

How to do it...

How it works...

There's more…

See also

Avoiding nested selectors too deeply for more modular CSS

Getting ready

How to do it...

How it works...

There's more...

See also

Applying the OOCSS, SMACSS, and BEM methodologies

Getting ready

How to do it...

How it works...

There's more...

See also

5. Built-in Functions

Introduction

Color functions

Getting ready

How to do it...

How it works....

There's more...

See also

String functions

Getting ready

How to do it...

How it works...

There's more...

See also

Number functions

Getting ready

How to do it...

How it works...

There's more...

See also

List functions

Getting ready

How to do it...

How it works...

There's more...

See also

Map functions

Getting ready

How to do it...

How it works...

There's more...

See also

Selector functions

Getting ready

How to do it....

How it works...

There's more...

See also

Introspection functions

Getting ready

How to do it...

How it works...

There's more...

See also

Conditional assignments

Getting ready

How to do it...

How it works

There is more...

Adding custom functions to Sass

Getting ready

How to do it...

How it works...

There's more...

See also

6. Using Compass

Introduction

Extending Sass with Compass helper functions

Getting ready

How to do it...

How it works...

There's more...

See also

Truncating Text with ellipses

Getting ready

How to do it...

How it works...

There's more...

See also

Tuning vendor prefixes from Compass stylesheets

Getting ready

How to do it...

How it works...

There's more...

See also

Adding Compass to an existing Sass project

Getting ready

How to do it...

How it works...

There's more...

See also

Maintaining your applications with Compass

Getting ready

How to do it...

How it works...

There's more...

See also

Using Bootstrap with Compass

Getting ready

How to do it...

How it works...

There's more…

See also

7. Cross-Browser CSS3 Mixins

Introduction

Browser support

Getting ready

How to do it...

How it works...

There's more...

See also

Using vendor prefixes

Getting ready

How to do it...

How it works...

There's more...

See also

Cross browser CSS3 with Compass

Getting ready

How to do it...

How it works...

There's more...

See also

The Can I Use database

Getting ready

How to do it...

How it works...

There's more…

See also

Applying progressive enhancement

Getting ready

How to do it...

How it works...

There's more...

See also

The -prefix-free library

Getting ready

How to do it...

How it works...

There's more...

See also

Mobile first strategies

Getting ready

How to do it...

How it works...

There's more...

See also

8. Advanced Sass Coding

Introduction

Using @if

Getting ready

How to do it...

How it works...

There's more...

See also

Using @for

Getting ready

How to do it...

How it works...

There's more...

See also

Using @each

Getting ready

How to do it...

How it works...

There's more...

Loops with @while

Getting ready

How to do it...

How it works...

There's more...

Creating a vertical rhythm for your website

Getting ready

How to do it...

How it works...

There's more...

See also

Creating color contrasts automatically

Getting ready

How to do it...

How it works...

There's more...

See also

Using icon fonts

Getting ready

How to do it...

How it works...

There's more...

See also

Image sprites with Compass

Getting ready

How to do it...

How it works...

There's more...

See also

Media queries with Breakpoint

Getting ready

How to do it...

How it works...

There's more...

See also

9. Building Layouts with Sass

Introduction

Using a CSS Reset

Getting ready

How to do it...

How it works...

There's more...

See also

Importing and organizing your files

Getting ready

How to do it...

How it works...

There's more…

See also

Building a grid with grid classes

Getting ready

How to do it...

How it works...

There's more…

Using the box-sizing property with Sass

See also

Creating responsive grids

Getting ready

How to do it...

How it works...

There's more...

See also

Building a semantic grid with mixins

Getting ready

How to do it...

How it works...

There's more...

See also

Applying the grid on your design

Getting ready

How to do it...

How it works...

There's more...

See also

Integrating a vertical navigation menu in your layout

Getting ready

How to do it...

How it works...

There's more...

See also

Creating grids with semantic.gs

Getting ready

How to do it...

How it works...

There's more...

See also

Using Compass Layout Module

Getting ready

How to do it...

How it works...

There's more...

See also

10. Building Grid-based Layouts with Susy and Sass

Introduction

Installing and configuring Susy

Getting ready

How to do it...

How it works...

There's more...

See also

Defining containers and columns

Getting ready

How to do it...

How it works...

There's more...

Mobile first and responsive grids

Getting ready

How to do it...

How it works...

There's more...

See also

Preventing subpixel rounding errors

Getting ready

How to do it...

How it works...

There's more...

See also

Generating asymmetric layouts

Getting ready

How to do it...

How it works...

There's more...

See also

11. Foundation and Sass

Introduction

Installing Foundation CLI

Getting ready

How to do it...

How it works...

There's more...

See also

Integrating Foundation in a Compass project

Getting ready

How to do it...

How it works...

There's more...

See also

Creating semantic grids with Foundation

Getting ready

How to do it...

How it works...

There is more...

See also

Building off-canvas menus with Sass and JavaScript

Getting ready

How to do it...

How it works...

There's more...

See also

Using Foundation 6 with WordPress and Sass

Getting ready

How to do it...

How it works...

There is more...

See also

12. Bootstrap and Sass

Introduction

Downloading and installing Bootstrap

Getting ready

How to do it...

How it works...

There's more...

See also

Customizing Bootstrap with variables

Getting ready

How to do it...

How it works...

There's more...

Compiling Bootstrap or the project file

See also

Configuring Bootstrap using variables

Getting ready

How to do it...

How it works...

There's more…

See also

Making custom buttons

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom cards

Getting ready

How to do it...

How it works...

There's more...

See also

Making custom navbars

Getting ready

How to do it...

How it works...

There's more...

See also

Extending components using @extend

Getting ready

How to do it...

How it works...

There's more...

See also

Using Bootstrap mixins and classes

Getting ready

How to do it...

How it works...

There's more...

See also

Extending the mixins with your own mixins

Getting ready

How to do it...

How it works...

There's more...

See also

Implementing semantic layouts with Bootstrap

Getting ready

How to do it...

How it works...

There's more...

See also

Using WordPress with Bootstrap and Sass

Getting ready

How to do it...

How it works...

There's more...

See also

13. Meeting the Bourbon Family

Introduction

Bourbon mixins for prefixing

Getting ready

How to do it...

How it works...

There's more

See also

Creating visual triangles

Getting ready

How to do it...

How it works...

There's more

See also

Using modular scales for typefacing

Getting ready

How to do it...

How it works...

There's more

See also

Semantic grids with Neat

Getting ready

How to do it...

How it works...

There's more

See also

Creating buttons with Bitters

Getting ready

How to do it...

How it works...

There's more...

See also

Using the page navigation component from Refills

Getting ready

How to do it...

How it works...

There's more

See also

14. Ruby on Rails and Sass

Introduction

Hello world with Ruby on Rails

Getting ready

How to do it...

How it works...

There's more…

See also

Explaining the main.css.scss file

Getting ready

How to do it...

How it works...

There's more…

See also

Adding Compass to your Ruby on Rails setup

Getting ready

How to do it...

How it works...

There's more…

See also

Using Susy with Ruby on Rails

Getting ready

How to do it...

How it works...

There's more...

See also

Using Bourbon inside Rails

Getting ready

How to do it...

How it works...

There's more…

See also

Integrating Bootstrap

Getting ready

How to do it...

How it works...

There's more…

See also

Creating a RoR app with Foundation 6

How to do it...

How it works...

There's more…

See also

15. Building Mobile Apps

Introduction

Installing the Ionic framework

Getting ready

How to do it...

How it works...

There's more…

See also

Starting a new Ionic project using Sass

Getting ready

How to do it...

How it works...

There's more…

See also

Customizing the buttons of your Ionic project

Getting ready

How to do it...

How it works...

There's more…

Setting up a Foundation App project

Getting ready

How to do it...

How it works...

There's more…

See also

Using mixins to customize your Foundation App project

Getting ready

How to do it...

How it works...

There's more…

See also

16. Setting up a Build Chain with Grunt

Introduction

Installing Grunt

Getting ready

How to do it...

How it works...

There's more...

See also

Installing Grunt plugins

Getting ready

How to do it...

How it works...

There's more...

See also

Utilizing the Gruntfile.js file

Getting ready

How to do it...

How it works...

There's more...

See also

Adding a configuration definition for a plugin

Getting ready

How to do it...

How it works...

There's more...

See also

Adding the Sass compiler task

Getting ready

How to do it...

How it works...

There's more...

See also

Integrating Compass in the build chain

Getting ready

How to do it...

How it works...

There's more...

See also

Installing Bourbon in the build chain

Getting ready

How to do it...

How it works...

There's more...

See also

Automatically prefixing your code with Grunt

Getting ready

How to do it...

How it works...

There's more...

See also

Getting Grunt watch for Sass, and LiveReload to work

Getting ready

How to do it...

How it works...

There's more...

See also

Utilizing Yeoman

Getting ready

How to do it...

How it works...

There's more...

See also

Index