Sass and Compass Designer's Cookbook

Sass and Compass Designer's Cookbook

By : Bass Jobsen, Stuart Robson

Buy this Book

Sass and Compass Designer's Cookbook

By: Bass Jobsen, Stuart Robson

Buy this Book

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.

Sass and Compass Designer's Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

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

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

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

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

Built-in Functions

Introspection functions

Conditional assignments

Adding custom functions to Sass

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

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

Advanced Sass Coding

Creating a vertical rhythm for your website

Creating color contrasts automatically

Using icon fonts

Image sprites with Compass

Media queries with Breakpoint

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

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

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

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

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

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

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

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

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Installing Sass for command line usage

In this recipe, you will learn how to use Sass on the command line.

Getting ready

You can install Sass on Linux, Mac, and Windows. Sass has been written in Ruby. So, installing Sass requires that you install Ruby first. Ruby is a dynamic open source programming language with its focus on simplicity and productivity. You can read more about Ruby in the Ruby and MongoDB Web Development Beginner's Guide book by Gautam Rege. You will find this book at https://www.packtpub.com/web-development/ruby-and-mongodb-web-development-beginners-guide. If you are using Mac, you are lucky because OS X has Ruby preinstalled. Linux users should use a packages manager, such as Advanced Package Tool (APT), to install Ruby:

 sudo apt-get install ruby-full

Other methods to install Ruby on Linux can be found at https://www.ruby-lang.org/en/documentation/installation/.

Finally, if you are on Windows, RubyInstaller is available. RubyInstaller is a single-click installer that includes the Ruby language, an execution environment, important documentations, and more. You can find RubyInstaller at http://rubyinstaller.org/.

How to do it...

After installing Ruby, you can use the following steps to install Sass on your system:

Open a terminal or a command prompt. Mac users should run Terminal.app and Window users can use the cmd command.
Then, enter the following command in your console:
```
gem install sass
```
The preceding command requires administrator rights for some systems. Use the sudo command for global installations with administrator rights.
Now, you should be able to check your installation by running a command, such as the following one:
```
 sass -version
```
The preceding command should generate the following output:
```
Sass 3.4.13 (Selective Steve)
```

How it works...

RubyGems is Ruby's package manager. Ruby packages, called gems, can easily be installed via the command line and be distributed over the Internet. Many gems are hosted at https://rubygems.org/ and https://github.com/. Also, Sass is distributed as a gem. The Sass gem will not only install Sass, but also install all the dependencies for you. Installing Sass with RubyGems will be easy and straightforward.

The gem install sass command in this recipe should install Ruby Sass and all its dependencies.

There's more...

After installing Sass, you can use the --help option to get a list of the available options and a short instruction on how to use the command-line compiler:

sass --h+elp

Besides the Sass compiler tool, the Ruby Sass gem also installs the sass-convert command-line tool. The sass-convert tool can be used to convert files from the indented syntax into the newer SCSS syntax and vice versa. Notice that you can also use sass-convert to migrate the CSS code Sass or the SCSS code. This will give you some basic nesting when migrating your CSS code.

In the Writing Sass or SCSS recipe of this chapter, you can read about the differences between the original indented syntax and the newer SCSS syntax.

The Ruby on rails apps can also use the Ruby Sass gem to compile the CSS code. Read more about Ruby on rails and Sass in Chapter 14, Ruby on Rails and Sass, of this book.

Sass and Compass Designer's Cookbook

By : Bass Jobsen, Stuart Robson

Sass and Compass Designer's Cookbook

By: Bass Jobsen, Stuart Robson

Overview of this book

Related Content you might be interested in

Current Title:

Sass and Compass Designer's Cookbook

Installing Sass for command line usage

Getting ready

How to do it...

How it works...

There's more...

See also