Book Image

Sass and Compass Designer's Cookbook

By : Bass Jobsen, Stuart Robson
Book Image

Sass and Compass Designer's Cookbook

By: Bass Jobsen, Stuart Robson

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
Sass and Compass Designer's Cookbook
Bass Jobsen | Stuart Robson
Apr, 2016 | 436 pages
No titles found
Table of Contents (23 chapters)
Sass and Compass Designer's Cookbook
Sass and Compass Designer's Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with Sass
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
2
Debugging Your Code
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
3
Variables, Mixins, and Functions
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
4
Nested Selectors and Modular CSS
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
5
Built-in Functions
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
6
Using Compass
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
7
Cross-Browser CSS3 Mixins
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
8
Advanced Sass Coding
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
9
Building Layouts with Sass
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
10
Building Grid-based Layouts with Susy and Sass
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
11
Foundation and Sass
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
12
Bootstrap and Sass
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
13
Meeting the Bourbon Family
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
14
Ruby on Rails and Sass
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
15
Building Mobile Apps
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
16
Setting up a Build Chain with Grunt
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
Index
Index

Creating visual triangles

You can create triangles with pure CSS, and you can use these triangles to create a triangular pointer for tooltips or other components of your project. In this recipe, you will learn how to use Bourbon to create tooltips with triangular pointers for your projects.

Getting ready

Make sure that you have installed Bourbon already, as described in the Bourbon mixins for prefixing recipe of this chapter.

How to do it...

The following steps help you to understand how to create pure CSS triangles with the Bourbon library:

  1. After installing Bourbon, you should create the file and directory structure as shown in the following screenshot:

  2. The sass/main.scss file should contain the SCSS code, as shown here:

    @import 'bourbon/bourbon';

$tooltip-backgroundcolor: #ffffa5;
$tooltip-color: #000;
$tooltip-height: 4em;
$tooltip-width: 8em;

.tooltip {
  background-color: $tooltip-backgroundcolor;
  height: $tooltip-height;
  position: relative;
  width: $tooltip-width;

  h2 {
    color...
Previous Section
End of Section 4
Next Section