Sass and Compass Designer's Cookbook

Over 120 practical and easy-to-understand recipes that explain how to use Sass and Compass to write efficient, maintainable, and reusable CSS code for your web development projects

Sass and Compass Designer's Cookbook

This ebook is included in a Mapt subscription
Bass Jobsen

Over 120 practical and easy-to-understand recipes that explain how to use Sass and Compass to write efficient, maintainable, and reusable CSS code for your web development projects
$10.00
$49.99
RRP $39.99
RRP $49.99
eBook
Print + eBook
Preview in Mapt

Book Details

ISBN 139781783286935
Paperback436 pages

Book Description

Sass and Compass Designer's Cookbook helps you to get most out of CSS3 and harness its benefits to create engaging and receptive applications. This book will help you develop faster and reduce the maintenance time for your web development projects by using Sass and Compass. You will learn how to use with CSS frameworks such as Bootstrap and Foundation and understand how to use other libraries of pre-built mixins. You will also learn setting up a development environment with Gulp.

This book guides you through all the concepts and gives you practical examples for full understanding.

Table of Contents

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

What You Will Learn

  • Spend less time debugging code
  • Compile Sass code into readable and maintainable CSS
  • Integrate Sass in your own projects
  • Reuse your code to prevent code duplications
  • Write reusable and portable CSS code
  • Make use of pre-built and established code written by other developers
  • Reduce development and maintenance time of your projects
  • Set up a development environment with Gulp

Authors

Table of Contents

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

Book Details

ISBN 139781783286935
Paperback436 pages
Read More

Read More Reviews