Sass and Compass Designer's Cookbook

Utilizing Yeoman

Getting Grunt watch for Sass and LiveReload to work

Automatically prefixing your code with Grunt

Installing Bourbon in the build chain

Integrating Compass in the build chain

Adding the Sass compiler task

Adding a configuration definition for a plugin

Utilizing the Gruntfile.js file

Installing Grunt plugins

Installing Grunt

Introduction

Chapter 16. Setting up a Build Chain with Grunt

Using mixins to customize your Foundation App project

Setting up a Foundation App project

Customizing the buttons of your Ionic project

Starting a new Ionic project using Sass

Installing the Ionic framework

Introduction

Chapter 15. Building Mobile Apps

Creating a RoR app with Foundation 6

Integrating Bootstrap

Using Bourbon inside Rails

Using Susy with Ruby on Rails

Adding Compass to your Ruby on Rails setup

Explaining the main.css.scss file

Hello world with Ruby on Rails

Introduction

Chapter 14. Ruby on Rails and Sass

Using the page navigation component from Refills

Creating buttons with Bitters

Semantic grids with Neat

Using modular scales for typefacing

Creating visual triangles

Bourbon mixins for prefixing

Introduction

Chapter 13. Meeting the Bourbon Family

Using WordPress with Bootstrap and Sass

Implementing semantic layouts with Bootstrap

Extending the mixins with your own mixins

Using Bootstrap mixins and classes

Extending components using @extend

Making custom navbars

Making custom cards

Making custom buttons

Configuring Bootstrap using variables

Customizing Bootstrap with variables

Downloading and installing Bootstrap

Introduction

Chapter 12. Bootstrap and Sass

Using Foundation 6 with WordPress and Sass

Building off-canvas menus with Sass and JavaScript

Creating semantic grids with Foundation

Integrating Foundation in a Compass project

Installing Foundation CLI

Introduction

Chapter 11. Foundation and Sass

Generating asymmetric layouts

Preventing subpixel rounding errors

Mobile first and responsive grids

Defining containers and columns

Installing and configuring Susy

Introduction

Chapter 10. Building Grid-based Layouts with Susy and Sass

Using Compass Layout Module

Creating grids with semantic.gs

Integrating a vertical navigation menu in your layout

Applying the grid on your design

Building a semantic grid with mixins

Creating responsive grids

Building a grid with grid classes

Importing and organizing your files

Using a CSS Reset

Introduction

Chapter 9. Building Layouts with Sass

Media queries with Breakpoint

Image sprites with Compass

Using icon fonts

Creating color contrasts automatically

Creating a vertical rhythm for your website

Loops with @while

Using @each

Using @for

Using @if

Introduction

Chapter 8. Advanced Sass Coding

Mobile first strategies

The -prefix-free library

Applying progressive enhancement

The Can I Use database

Cross browser CSS3 with Compass

Using vendor prefixes

Browser support

Introduction

Chapter 7. Cross-Browser CSS3 Mixins

Using Bootstrap with Compass

Maintaining your applications with Compass

Adding Compass to an existing Sass project

Tuning vendor prefixes from Compass stylesheets

Truncating Text with ellipses

Extending Sass with Compass helper functions

Introduction

Chapter 6. Using Compass

Adding custom functions to Sass

Conditional assignments

Introspection functions

Selector functions

Map functions

List functions

Number functions

String functions

Color functions

Introduction

Chapter 5. Built-in Functions

Applying the OOCSS SMACSS and BEM methodologies

Avoiding nested selectors too deeply for more modular CSS

Emitting rules at the root of the document

Using the @extend directive with care

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

Using placeholder selectors with the @extend directive

Utilizing the @extend directive

Using the & operator to change the selector order

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

Referencing parent selectors with the & sign

Creating more intuitive code and making inheritance clear

Using nested selectors

Introduction

Chapter 4. Nested Selectors and Modular CSS

Creating pure Sass functions

Duplicating mixins and name collisions

Writing mixins with arguments

Leveraging mixins

Interpolation of variables

Declaring variables with !default

Applying operations in Sass

Using variables

Introduction

Chapter 3. Variables Mixins and Functions

Playing on SassMeister

Using the @debug @warn and @error directives

Building style guides with the Kalei Styleguide

Building style guides with tdcss.js

Commenting your code in the SCSS syntax

Editing and debugging your Sass code in a browser

Using CSS source maps to debug your code

Introduction

Chapter 2. Debugging Your Code

Writing your code in a text editor

Working with partials

Choosing your output style

Writing Sass or SCSS

Using Sass in the browsers

Using the sass-gulp plugin with Gulp

Using the Sass interactive mode and SassScript

Using Sass on the command line

Installing Compass

Installing Sass for command line usage

Introduction

Chapter 1. Getting Started with Sass

Customer support

Reader feedback

Conventions

Sections

Who this book is for

What you need for this book

What this book covers

Preface

eBooks discount offers and more

www.PacktPub.com

About the Reviewers

About the Author

Credits

Sass and Compass Designer's Cookbook

coverpage

coverpage

Sass and Compass Designer's Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

eBooks discount offers and more

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Conventions

Reader feedback

Customer support

Chapter 1. Getting Started with Sass

Introduction

Installing Sass for command line usage

Installing Compass

Using Sass on the command line

Using the Sass interactive mode and SassScript

Using the sass-gulp plugin with Gulp

Using Sass in the browsers

Writing Sass or SCSS

Choosing your output style

Working with partials

Writing your code in a text editor

Chapter 2. Debugging Your Code

Introduction

Using CSS source maps to debug your code

Editing and debugging your Sass code in a browser

Commenting your code in the SCSS syntax

Building style guides with tdcss.js

Building style guides with the Kalei Styleguide

Using the @debug @warn and @error directives

Playing on SassMeister

Chapter 3. Variables Mixins and Functions

Introduction

Using variables

Applying operations in Sass

Declaring variables with !default

Interpolation of variables

Leveraging mixins

Writing mixins with arguments

Duplicating mixins and name collisions

Creating pure Sass functions

Chapter 4. Nested Selectors and Modular CSS

Introduction

Using nested selectors

Creating more intuitive code and making inheritance clear

Referencing parent selectors with the & sign

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

Using the & operator to change the selector order

Utilizing the @extend directive

Using placeholder selectors with the @extend directive

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

Using the @extend directive with care

Emitting rules at the root of the document

Avoiding nested selectors too deeply for more modular CSS

Applying the OOCSS SMACSS and BEM methodologies

Chapter 5. Built-in Functions

Introduction

Color functions

String functions

Number functions

List functions

Map functions

Selector functions

Introspection functions

Conditional assignments

Adding custom functions to Sass

Chapter 6. Using Compass

Introduction

Extending Sass with Compass helper functions

Truncating Text with ellipses

Tuning vendor prefixes from Compass stylesheets

Adding Compass to an existing Sass project

Maintaining your applications with Compass

Using Bootstrap with Compass

Chapter 7. Cross-Browser CSS3 Mixins

Introduction

Browser support

Using vendor prefixes

Cross browser CSS3 with Compass

The Can I Use database

Applying progressive enhancement

The -prefix-free library

Mobile first strategies

Chapter 8. Advanced Sass Coding

Introduction

Using @if

Using @for

Using @each

Loops with @while

Creating a vertical rhythm for your website

Creating color contrasts automatically

Using icon fonts

Image sprites with Compass

Media queries with Breakpoint

Chapter 9. Building Layouts with Sass

Introduction

Using a CSS Reset

Importing and organizing your files

Building a grid with grid classes

Creating responsive grids

Building a semantic grid with mixins

Applying the grid on your design

Integrating a vertical navigation menu in your layout

Creating grids with semantic.gs

Using Compass Layout Module

Chapter 10. Building Grid-based Layouts with Susy and Sass

Introduction

Installing and configuring Susy

Defining containers and columns

Mobile first and responsive grids

Preventing subpixel rounding errors

Generating asymmetric layouts

Chapter 11. Foundation and Sass

Introduction

Installing Foundation CLI

Integrating Foundation in a Compass project

Creating semantic grids with Foundation

Building off-canvas menus with Sass and JavaScript

Using Foundation 6 with WordPress and Sass

Chapter 12. Bootstrap and Sass

Introduction

Downloading and installing Bootstrap

Customizing Bootstrap with variables

Configuring Bootstrap using variables

Making custom buttons

Making custom cards

Making custom navbars

Extending components using @extend

Using Bootstrap mixins and classes

Extending the mixins with your own mixins

Implementing semantic layouts with Bootstrap

Using WordPress with Bootstrap and Sass

Chapter 13. Meeting the Bourbon Family

Introduction

Bourbon mixins for prefixing

Creating visual triangles

Using modular scales for typefacing

Semantic grids with Neat

Creating buttons with Bitters

Using the page navigation component from Refills

Chapter 14. Ruby on Rails and Sass

Introduction

Hello world with Ruby on Rails

Explaining the main.css.scss file

Adding Compass to your Ruby on Rails setup

Using Susy with Ruby on Rails

Using Bourbon inside Rails

Integrating Bootstrap

Creating a RoR app with Foundation 6

Chapter 15. Building Mobile Apps

Introduction

Installing the Ionic framework

Starting a new Ionic project using Sass

Customizing the buttons of your Ionic project

Setting up a Foundation App project

Using mixins to customize your Foundation App project

Chapter 16. Setting up a Build Chain with Grunt

Introduction

Installing Grunt

Installing Grunt plugins

Utilizing the Gruntfile.js file

Adding a configuration definition for a plugin

Adding the Sass compiler task

Integrating Compass in the build chain

Installing Bourbon in the build chain

Automatically prefixing your code with Grunt

Getting Grunt watch for Sass and LiveReload to work

Utilizing Yeoman