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: 125,10 zł (poprzednio: 139,00 zł)
Oszczędzasz: 10% (-13,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:
- Jak zhakowa 125,00 zł, (10,00 zł -92%)
- Blockchain i kryptowaluty. Kurs video. Zdecentralizowane finanse od podstaw 118,90 zł, (11,89 zł -90%)
- Web scraping. Kurs video. Zautomatyzowane pozyskiwanie danych z sieci 126,36 zł, (13,90 zł -89%)
- GraphQL. Kurs video. Buduj nowoczesne API w Pythonie 153,64 zł, (16,90 zł -89%)
- Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
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
 






