Sass and Compass for Designers. If you know HTML and CSS, then you can have all the power of Sass and Compass at your disposal. This step-by-step guide will take you through the time-saving features that makes it so much easier to create cross-browser CSS - Helion

ebook
Autor: Ben FrainTytuł oryginału: Sass and Compass for Designers. If you know HTML and CSS, then you can have all the power of Sass and Compass at your disposal. This step-by-step guide will take you through the time-saving features that makes it so much easier to create cross-browser CSS
ISBN: 9781849694551
stron: 274, Format: ebook
Data wydania: 2013-04-25
Księgarnia: Helion
Cena książki: 116,10 zł (poprzednio: 129,00 zł)
Oszczędzasz: 10% (-12,90 zł)
Osoby które kupowały "Sass and Compass for Designers. If you know HTML and CSS, then you can have all the power of Sass and Compass at your disposal. This step-by-step guide will take you through the time-saving features that makes it so much easier to create cross-browser CSS", wybierały także:
- Biologika Sukcesji Pokoleniowej. Sezon 3. Konflikty na terytorium 127,27 zł, (14,00 zł -89%)
- Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
- Podręcznik startupu. Budowa wielkiej firmy krok po kroku 93,33 zł, (14,00 zł -85%)
- Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
- Scrum. O zwinnym zarz 77,78 zł, (14,00 zł -82%)
Spis treści
Sass and Compass for Designers. If you know HTML and CSS, then you can have all the power of Sass and Compass at your disposal. This step-by-step guide will take you through the time-saving features that makes it so much easier to create cross-browser CSS eBook -- spis treści
- Sass and Compass for Designers
- Table of Contents
- Sass and Compass for Designers
- Credits
- Foreword
- Youre 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
- Support files, eBooks, discount offers and more
- 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
- Use variables (only define a value once)
- 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
- Why do we need CSS preprocessors?
- 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
- Creating Compass projects
- 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
- Setting up a Sass and Compass project
- 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
- Nesting syntax
- 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
- Media queries in Sass
- 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 text-shadow syntax
- 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
- Additional sprite configuration 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
- Easy CSS3 with Compass's mixins
- 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
- Math calculations with Sass
- 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
- All hail the Chrome Developer Tools
- Parting shots
- Summary
- Turning off Compass support for specific vendors
- Index