售 价:¥
温馨提示:数字商品不支持退换货,不提供源文件,不支持导出打印
为你推荐
Mastering Sass
Mastering Sass
Credits
About the Author
About the Reviewer
www.PacktPub.com
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. Requirements
Ruby, Sass, and Compass
Ruby
Ruby installer for Windows
Updating Ruby for Windows
Updating Ruby for Mac
Sass and Compass
Node and NPM
HTML5
HTML
CSS
Programming
The command line
Windows and Unix users
Windows
Unix (Mac and Linux)
You know your command line
Summary
2. Sass – The Road to Better CSS
A bit of sassy reminiscing
Setting up our project
Sass
C'mon, where's the Sass already?!
Command line options in Sass
Watching files and directories
Compile files and folders
Force Sass to compile
CSS output style
Sourcemaps
On the right heading!
A better If
Our heading sizes mixin
Three things you should know about lists
Heading line heights
But wait, there's more...
Allowing for different font families for each heading
Remove repetition
Error handling and type validation
Data types in Sass
@error
@debug
@warn
Bonus round
Summary
3. Compass – Navigating with Compass
Setting up a Compass project
Typography with Compass
What is vertical rhythm?
Vertical rhythm for images
A few things you need to know
Breakpoints and media queries
Aspect ratio
Sizing our headings
CodePen or SassMeister
Getting setup
CSS3, Compass, and Vendor prefixes
CSS regions
Columns
Transforms
Animations
Lists
Floating is a hack
Tag clouds
Sticky footer, stretching, and sprites
Compass and the future
Summary
4. CSS and HTML – SMACSS, OOCSS and Semantics
The good and the bad of CSS grids
Semantics
Naming conventions
OOCSS - Object-Oriented CSS
Separation of structure from skin
Separating container from content
Atomic Design
SMACSS
Base
Layout
Modules
State
Theme
Why aren't you using HSL?
A look at hue, saturation, and lightness
Don't use Photoshop to get HSL values
reset.css versus normalize.css
reset.css
normalize.css
sanitize.css
Make your own
Summary
5. Advanced Sass
Variables
!default
Variable scope
Local scope
!global flag
Variable scope in functions
Deeply nested variable scope
Making arrows in Sass
Come back, !important, all is forgiven
@content directive
Using @content for media queries
Maps
Summary
6. Gulp – Automating Tasks for a Faster Workflow
Setting up our project
Creating our folder and files
Why Gulp and not Grunt?
Node and npm
Node.js, node-sass, and fileWatch
Watching for changes and writing to a file
Setting up Gulp
Gulp watch
BrowserSync
Summary
7. Sourcemaps – Editing and Saving in the Browser
What are source maps and why should you care?
Setting up Source Maps in Firefox
Minor Gulp, Source Maps and BrowserSync issue
Setting up Source Maps in Chrome
Summary
8. Building a Content-Rich Website Components
Setting up our project
Gulp
Adding jQuery
Helpers
Function – get
Mixin – hover links
Mixin – bp (breakpoint)
Mixin – media (based on the OOCSS media component)
normalize.scss
Global base styles
Screen reader text
Layout – grid
Ionicons
Top nav
Grid – container
Search component
Main nav
Cart slide-out component
Mixin – media centered
Footer
Summary
9. Building a Content-Rich Website – Layout
Installing Susy
Setting up a basic grid
The container mixin
The span mixin
The last keyword
The $susy configuration map
Setting up a grid system
The concept of our grid system
The breakpoints
The columns naming convention
Building the grid
Testing the grid
The header
Main header inner
Main nav
Mobile menus
Top nav
Main nav
Image banner
Featured products
Testimonial
Subfooter and footer
The markup
The SCSS
Finishing touches
Summary
10. Building a Content-Rich Website – Theme
Typography
Dropcaps
Tagcloud
Color scheme
Search
Image banner
Featured products
Testimonials
Services
Footer
Section titles
Summary
买过这本书的人还买过
读了这本书的人还在读
同类图书排行榜