O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mastering Sass

Book Description

Create interactive and responsive cross-browser apps with SASS and Compass

About This Book

  • Create data-intensive, highly scalable apps using Sass and COMPASS

  • Master the concepts of Sass and COMPASS and unleash your potential to develop enterprise-grade apps

  • This book is an experts’ guide on leveraging Sass and COMPASS features

  • Who This Book Is For

    This book is aimed at those who know CSS3 and HTML5 quite well and who've built a few small-to-medium-sized websites from scratch using Sass and Compass.

    What You Will Learn

  • Master Sass and Compass features

  • Familiarize yourself with CSS and HTML concepts that are vital for a good Sass workflow.

  • Build real-world websites focusing on layouts and content aspects

  • Work on a grid system using Compass and Susy

  • Automate your workflow with Gulp

  • Write functions and mixins to leverage the control flow

  • In Detail

    CSS and Sass add elegance and excellence to the basic language, and consist of a CSS-compatible syntax that allows you to use variables, nested rules, mixins, inline imports, and much more.

    This book will start with an overview of the features in Sass and Compass, most of which you'll already be familiar; however, this will ensure you know what’s expected as the book goes deeper into Sass and Compass. Next you will learn CSS and HTML concepts that are vital to a good Sass workflow. After all, Sass exists to simplify writing CSS, but it won’t teach you how to make clean, scalable, reusable CSS. For that, you need to understand some basic concepts of OOCSS, SMACCS, and Atomic Design.

    Once you’ve brushed up on the important concepts, it’s time to write some Sass. Mainly you’ll write a few functions and mixins that really leverage control flow using @if / @else loops and you’ll learn how to figure out when and why things are going wrong before they bring you to a stop. Moving further, you’ll learn how to use @debug, @warn and @error to properly handle errors.

    You’ll also learn about Gulp and how to use it to automate your workflow and reduce your repetitive tasks. And finally you’ll learn about sourcemaps. With sourcemaps, you’ll be able to write, debug, and view your Sass and Compass all from within the browser. It’ll even LiveReload too!

    As a bonus, you’ll take a look at that funky Flexbox, currently all the rage! You’ll learn how powerful and flexible it really is, and how you can use it with Compass. Best of all, it falls back very gracefully indeed! In fact, you’ll be able to apply it to any existing project without having to change a line of the original CSS.

    Style and approach

    This book will provide readers with practical, actionable expertise to enhance their knowledge

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Mastering Sass
      1. Mastering Sass
      2. Credits
      3. About the Author
      4. About the Reviewer
      5. www.PacktPub.com
        1. eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      6. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      7. 1. Requirements
        1. Ruby, Sass, and Compass
          1. Ruby
            1. Ruby installer for Windows
            2. Updating Ruby for Windows
            3. Updating Ruby for Mac
          2. Sass and Compass
        2. Node and NPM
        3. HTML5
          1. HTML
          2. CSS
          3. Programming
          4. The command line
            1. Windows and Unix users
            2. Windows
            3. Unix (Mac and Linux)
            4. You know your command line
        4. Summary
      8. 2. Sass – The Road to Better CSS
        1. A bit of sassy reminiscing
        2. Setting up our project
          1. Sass
          2. C'mon, where's the Sass already?!
        3. Command line options in Sass
          1. Watching files and directories
          2. Compile files and folders
          3. Force Sass to compile
          4. CSS output style
          5. Sourcemaps
        4. On the right heading!
          1. A better If
          2. Our heading sizes mixin
        5. Three things you should know about lists
        6. Heading line heights
          1. But wait, there's more...
          2. Allowing for different font families for each heading
          3. Remove repetition
          4. Error handling and type validation
        7. Data types in Sass
          1. @error
          2. @debug
          3. @warn
          4. Bonus round
        8. Summary
      9. 3. Compass – Navigating with Compass
        1. Setting up a Compass project
        2. Typography with Compass
          1. What is vertical rhythm?
          2. Vertical rhythm for images
          3. A few things you need to know
          4. Breakpoints and media queries
          5. Aspect ratio
        3. Sizing our headings
          1. CodePen or SassMeister
          2. Getting setup
            1. CSS3, Compass, and Vendor prefixes
            2. CSS regions
            3. Columns
            4. Transforms
            5. Animations
            6. Lists
            7. Floating is a hack
            8. Tag clouds
        4. Sticky footer, stretching, and sprites
        5. Compass and the future
        6. Summary
      10. 4. CSS and HTML – SMACSS, OOCSS and Semantics
        1. The good and the bad of CSS grids
        2. Semantics
        3. Naming conventions
        4. OOCSS - Object-Oriented CSS
          1. Separation of structure from skin
          2. Separating container from content
          3. Atomic Design
        5. SMACSS
          1. Base
          2. Layout
          3. Modules
          4. State
          5. Theme
        6. Why aren't you using HSL?
          1. A look at hue, saturation, and lightness
          2. Don't use Photoshop to get HSL values
        7. reset.css versus normalize.css
          1. reset.css
          2. normalize.css
          3. sanitize.css
        8. Make your own
        9. Summary
      11. 5. Advanced Sass
        1. Variables
          1. !default
          2. Variable scope
            1. Local scope
            2. !global flag
            3. Variable scope in functions
            4. Deeply nested variable scope
          3. Making arrows in Sass
            1. Come back, !important, all is forgiven
          4. @content directive
            1. Using @content for media queries
        2. Maps
        3. Summary
      12. 6. Gulp – Automating Tasks for a Faster Workflow
        1. Setting up our project
          1. Creating our folder and files
        2. Why Gulp and not Grunt?
        3. Node and npm
        4. Node.js, node-sass, and fileWatch
          1. Watching for changes and writing to a file
        5. Setting up Gulp
          1. Gulp watch
          2. BrowserSync
        6. Summary
      13. 7. Sourcemaps – Editing and Saving in the Browser
        1. What are source maps and why should you care?
        2. Setting up Source Maps in Firefox
          1. Minor Gulp, Source Maps and BrowserSync issue
        3. Setting up Source Maps in Chrome
        4. Summary
      14. 8. Building a Content-Rich Website Components
        1. Setting up our project
        2. Gulp
          1. Adding jQuery
        3. Helpers
          1. Function – get
          2. Mixin – hover links
          3. Mixin – bp (breakpoint)
          4. Mixin – media (based on the OOCSS media component)
          5. normalize.scss
          6. Global base styles
          7. Screen reader text
          8. Layout – grid
          9. Ionicons
          10. Top nav
          11. Grid – container
          12. Search component
          13. Main nav
          14. Cart slide-out component
          15. Mixin – media centered
          16. Footer
        4. Summary
      15. 9. Building a Content-Rich Website – Layout
        1. Installing Susy
        2. Setting up a basic grid
        3. The container mixin
        4. The span mixin
        5. The last keyword
        6. The $susy configuration map
        7. Setting up a grid system
        8. The concept of our grid system
        9. The breakpoints
        10. The columns naming convention
        11. Building the grid
        12. Testing the grid
        13. The header
        14. Main header inner
        15. Main nav
        16. Mobile menus
        17. Top nav
        18. Main nav
        19. Image banner
        20. Featured products
        21. Testimonial
        22. Subfooter and footer
        23. The markup
        24. The SCSS
        25. Finishing touches
        26. Summary
      16. 10. Building a Content-Rich Website – Theme
        1. Typography
        2. Dropcaps
        3. Tagcloud
        4. Color scheme
        5. Search
        6. Image banner
        7. Featured products
        8. Testimonials
        9. Services
        10. Footer
        11. Section titles
        12. Summary