Sass and Compass for Designers

Name: Sass and Compass for Designers
Brand: Packt Publishing
Price: 24.99 EUR
Availability: OnlineOnly

Ben Frain(Autor*in)

Packt Publishing

1. Auflage

Erschienen am 25. April 2013

274 Seiten

E-Book

PDF mit Adobe-DRM

Systemvoraussetzungen

978-1-84969-455-1 (ISBN)

24,99 €inkl. 7% MwSt.

Systemvoraussetzungen

für PDF mit Adobe-DRM

E-Book Einzellizenz

Als Download verfügbar

Beschreibung

Weitere Details

Weitere Ausgaben

Inhalt

Intro
Sass and Compass for Designers
Table of Contents
Sass and Compass for Designers
Credits
Foreword
You're doing it wrong!
About the Author
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Getting Started with Sass and Compass
Why do we need CSS preprocessors?
If it ends up producing CSS, why not just write CSS?
Why you should use Sass and Compass
Use variables (only define a value once)
Understanding the syntax of variables
Automatic RGBA color values and conversions
Forget about vendor prefixes
Nesting rules
Media queries the simple way
Automatic compression of CSS for faster websites
What is Sass?
What is Compass?
Install Sass and Compass
Install package for OS X
Installing and working with Sass and Compass on the command line
Installing Ruby on Windows
Running a gem command
Mac OS X command line install
Windows command prompt install
Check which version of Sass and Compass you have
Check which versions of Sass and Compass are available
Installing the latest version of Sass and Compass (including prerelease versions)
Create a Sass and Compass project from the command line
Automatic compile to CSS from the Command Line
Graphical tools for working with Sass and Compass
Scout app
CodeKit
LiveReload
How to work with Sass files in text editors
Summary
2. Setting Up a Sass and Compass project
Setting up a Sass and Compass project
Creating Compass projects
Create a customized Compass project
Creating a bare Compass project
Understanding the config.rb file
Adding required plugins
Setting the names and paths for project assets
Setting the CSS output style
The nested output option
The compact output option
The compressed output option
Remove the comments, keep the style
Compress the CSS, keep the comments (loud comments)
Enable relative assets
Creating and using partial files
Sass provides maintainability and production ready code
Importing a partial file
The syntax for writing variables in Sass
Sass comment formats
Standard CSS comments
Sass single line comments
A basic index.html file
A base for future projects
Summary
3. Nesting, Extend, Placeholders, and Mixins
Styling a site with Sass and Compass
Separating layout from visuals
What nesting is and how it facilitates modules of code
Nesting syntax
The parent selector
Chaining selectors
Easy Modernizr styles with the parent selector
Make a partial file for fonts
Changing the font with Modernizr and the parent selector
Dangers of excessive nesting
Are ID selectors bad?
Nesting namespaces
Using the @extend directive to extend existing rules
Use placeholder selectors to extend styles only when needed
What mixins are and how we can use them to easily produce oft-needed code
Basic mixin syntax
How to write mixins with defaults
A cautionary note about generated CSS
Summary
4. Manipulate Color with Ease
Only define a color once
The lighten and darken functions
Understanding HSL colors
Syntax for lighten and darken
Markup amendments and diversions
The Compass clearfix
Back to colors
Mixins within mixins? What is this new devilry?
The complement (and invert) functions
The invert function
The adjust-hue function
The saturate and desaturate functions
The transparentize/fade-out functions
The opacify/fade-in functions
The grayscale function
The rgba function
The mix function
The adjust-color function
The scale-color function
The shade and tint functions
Putting it all together
Summary
5. Responsive and Flexible Grids with Sass and Compass
Arguments against grids
Reasons to use a grid system
What is Susy?
What does Susy actually do?
Installing the Susy Compass plugin
Including Susy in a project
Susy project variables
Setting up a Susy grid
Defining a context for the grid
Showing the grid background
Setting Susy to border-box
Making a 'mobile first' responsive grid
Making breakpoints with Susy
Creating an entirely fluid grid
Creating a static 'fixed' grid
Using Susy grid helpers
Prefix, Suffix, and Pad
Prefix
Suffix
Pad
Pre, Post, Squish, Push, and Pull
Pre
Post
Squish
Push and Pull
Grids within grids
nth-omega mixin
Sub-pixel rounding issues
Why sub-pixel rounding errors occur
Container relative positioning
Standard Susy syntax and output
The isolate-grid mixin
Summary
6. Advanced Media Queries with Sass and Mixins
Media queries in Sass
Using a media query partial to separate media query based styles
Inline media queries with Sass
Creating a mixin to easily handle media queries
Defining breakpoints as variables
How the MQ media query mixin works
Variations on a theme
Writing inline media queries
Gzip and CSS compression = victory!
Testing the real-world difference between inline and grouped media queries
Reviewing CSS code
Summary
7. Easy CSS3, Image Sprites, and More with Compass
Easy CSS3 with Compass's mixins
The text-shadow syntax
Text shadow with default values
The border-radius syntax
Multiple columns
Column rule syntax
The Box Shadow mixin
The box-shadow syntax
Multiple box-shadows
Background gradients
Background linear-gradient syntax
Background radial-gradient syntax
Combining background images and gradients
Adding background images with the Compass image-url helper
Image width and height helpers
The Compass cache buster
Compass image sprites
Additional sprite configuration options
Add the height and width to each generated HTML selector
Extra padding around the images
Layout options
Compass's text replacement mixins
The hide-text mixin
The squish-text mixin
Replace text with image dimensions
Creating data URIs from images
The inline-image syntax
Easy fallbacks for non-SVG capable devices
CSS transforms
CSS Filters
Transitions
Summary
8. Programmatic Logic with Sass
Math calculations with Sass
Addition
Subtraction
Multiplication
Division
Calculations using variables
Control directives and how to use them
The @if and @else if control directives
@for loops
Understanding the counter variable
'From to' and 'from through'
Understanding interpolation
@each loops
Stripping and adding units to values
Stripping the unit from a value
Adding a unit to a variable value
Writing functions in Sass
Equality operators
Relational operators
@return
Using the result of a function
Using the @debug directive
The @warn directive
Summary
9. Becoming a Sass and Compass Power User
Turning off Compass support for specific vendors
Configuration support variables
Opera is now WebKit based
Adding experimental support for bleeding edge CSS features
Defining experimental values
The Sass interactive shell
Compass interactive
Adding the Sass globbing plugin to import batches of partial files
Creating multiple separate style sheets
Converting partial files to standalone style sheets
Compass statistics
Clearing the Sass cache
One-off Compass compiles
Mission debrief
Fixing human errors
Catching common problems with a lint tool
Avoid conjecture with tools and testing
All hail the Chrome Developer Tools
Continuous page repainting
Finding unused styles
Parting shots
Summary
Index

Systemvoraussetzungen

Als PDF speichern Als Link merken