Mastering Sass

Mastering Sass

by Luke Watts
Released August 2016
Publisher(s): Packt Publishing
ISBN: 9781785883361

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

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

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

Product information

  • Title: Mastering Sass
  • Author(s): Luke Watts
  • Release date: August 2016
  • Publisher(s): Packt Publishing
  • ISBN: 9781785883361