Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Sass and Compass for Designers
  • Table Of Contents Toc
Sass and Compass for Designers

Sass and Compass for Designers

By : Ben Frain
4.6 (35)
Buy this Book
close
close
Sass and Compass for Designers

Sass and Compass for Designers

4.6 (35)
By: Ben Frain
Buy this Book

Overview of this book

A step-by-step tutorial guide, taking you through how to build a responsive Sass and Compass powered website. If you understand HTML and CSS, this book is all you need to take your code to the next level with Sass and Compass. No prior understanding of CSS preprocessors or programming conventions is needed.
Table of Contents (11 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started with Sass and Compass
chevron up
Icon
1. Getting Started with Sass and Compass
Icon
Why do we need CSS preprocessors?
Icon
Why you should use Sass and Compass
Icon
What is Sass?
Icon
What is Compass?
Icon
Install Sass and Compass
Icon
Installing and working with Sass and Compass on the command line
Icon
Graphical tools for working with Sass and Compass
Icon
How to work with Sass files in text editors
Icon
Summary
2
2. Setting Up a Sass and Compass project
Icon
2. Setting Up a Sass and Compass project
Icon
Setting up a Sass and Compass project
Icon
Understanding the config.rb file
Icon
Creating and using partial files
Icon
Sass comment formats
Icon
A basic index.html file
Icon
A base for future projects
Icon
Summary
3
3. Nesting, Extend, Placeholders, and Mixins
Icon
3. Nesting, Extend, Placeholders, and Mixins
Icon
Styling a site with Sass and Compass
Icon
Separating layout from visuals
Icon
What nesting is and how it facilitates modules of code
Icon
Using the @extend directive to extend existing rules
Icon
Use placeholder selectors to extend styles only when needed
Icon
What mixins are and how we can use them to easily produce oft-needed code
Icon
A cautionary note about generated CSS
Icon
Summary
4
4. Manipulate Color with Ease
Icon
4. Manipulate Color with Ease
Icon
Only define a color once
Icon
The lighten and darken functions
Icon
Markup amendments and diversions
Icon
Back to colors
Icon
The complement (and invert) functions
Icon
The invert function
Icon
The adjust-hue function
Icon
The saturate and desaturate functions
Icon
The transparentize/fade-out functions
Icon
The opacify/fade-in functions
Icon
The grayscale function
Icon
The rgba function
Icon
The mix function
Icon
The adjust-color function
Icon
The scale-color function
Icon
The shade and tint functions
Icon
Putting it all together
Icon
Summary
5
5. Responsive and Flexible Grids with Sass and Compass
Icon
5. Responsive and Flexible Grids with Sass and Compass
Icon
Arguments against grids
Icon
Reasons to use a grid system
Icon
What is Susy?
Icon
Installing the Susy Compass plugin
Icon
Including Susy in a project
Icon
Setting up a Susy grid
Icon
Defining a context for the grid
Icon
Making a ‘mobile first’ responsive grid
Icon
Making breakpoints with Susy
Icon
Creating an entirely fluid grid
Icon
Creating a static ‘fixed’ grid
Icon
Using Susy grid helpers
Icon
Pre, Post, Squish, Push, and Pull
Icon
Grids within grids
Icon
Sub-pixel rounding issues
Icon
Summary
6
6. Advanced Media Queries with Sass and Mixins
Icon
6. Advanced Media Queries with Sass and Mixins
Icon
Media queries in Sass
Icon
Inline media queries with Sass
Icon
Creating a mixin to easily handle media queries
Icon
How the MQ media query mixin works
Icon
Variations on a theme
Icon
Writing inline media queries
Icon
Gzip and CSS compression = victory!
Icon
Testing the real-world difference between inline and grouped media queries
Icon
Reviewing CSS code
Icon
Summary
7
7. Easy CSS3, Image Sprites, and More with Compass
Icon
7. Easy CSS3, Image Sprites, and More with Compass
Icon
Easy CSS3 with Compass's mixins
Icon
The border-radius syntax
Icon
Multiple columns
Icon
Background gradients
Icon
Adding background images with the Compass image-url helper
Icon
Image width and height helpers
Icon
Compass image sprites
Icon
Compass's text replacement mixins
Icon
Creating data URIs from images
Icon
Easy fallbacks for non-SVG capable devices
Icon
CSS transforms
Icon
CSS Filters
Icon
Transitions
Icon
Summary
8
8. Programmatic Logic with Sass
Icon
8. Programmatic Logic with Sass
Icon
Math calculations with Sass
Icon
Control directives and how to use them
Icon
Stripping and adding units to values
Icon
Writing functions in Sass
Icon
Using the @debug directive
Icon
The @warn directive
Icon
Summary
9
9. Becoming a Sass and Compass Power User
Icon
9. Becoming a Sass and Compass Power User
Icon
Turning off Compass support for specific vendors
Icon
Adding experimental support for bleeding edge CSS features
Icon
Defining experimental values
Icon
The Sass interactive shell
Icon
Adding the Sass globbing plugin to import batches of partial files
Icon
Creating multiple separate style sheets
Icon
Converting partial files to standalone style sheets
Icon
Compass statistics
Icon
Clearing the Sass cache
Icon
One-off Compass compiles
Icon
Mission debrief
Icon
Avoid conjecture with tools and testing
Icon
Parting shots
Icon
Summary
10
Index
Icon
Index

Why do we need CSS preprocessors?

CSS is a declarative, not a programming language. This simply means that the style properties and values that we declare within the rules of CSS are exactly what the browser uses to paint the screen. A programming language on the other hand provides some means of defining logic. Crudely put, a logical statement might be in the form of: if the h1 elements are in a nav element, make them blue; if they are in the header elements, make them red. A programming language also facilitates variables. These can be thought of as placeholders for something reusable (for example, one might have a variable for a specific color value). Then there are functions, a means to manipulate values with operations (for example, make this color 20 percent lighter). Sass and Compass provide these capabilities and more.

If some of the terminology in that last paragraph sounded alien, fear not. We will be dealing with all those concepts in due course. For now, let's just consider some common misgivings about CSS preprocessors.

If it ends up producing CSS, why not just write CSS?

My initial reaction when looking at the CSS preprocessor Sass was, 'If it ends up producing CSS, why don't I just write CSS?' Turns out, this is a reaction many people have. After all, we use CSS everyday. We can (hopefully) use it to fix all the usual layout problems that get thrown at us, build responsive websites that are displayed beautifully on all devices, and generally make ourselves feel like, for the most part, we know what we are doing.

Let's be clear from the outset. Sass won't necessarily make us produce better CSS. For example, if you don't understand how to use CSS now, Sass and Compass won't fill that gap in your knowledge. However, Sass enables us to write CSS faster and more easily while also keeping the style sheets far more maintainable.

Tip

Sass, LESS, or Stylus?

The chances are, if you are reading this, you have already done a little research and decided to look into Sass as opposed to LESS or Stylus. LESS and Stylus are also CSS preprocessors that do similar things to Sass. It is my humble opinion that Sass is a better and more powerful language, although I'll concede that the documentation for LESS in particular can make it seem easier to get to grips with. However, if you'd like to read a good summary of the various pros and cons of Sass and LESS, take a look at this great post on the CSS Tricks website, written by CSS maestro Chris Coyier: http://css-tricks.com/sass-vs-less/.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Sass and Compass for Designers
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon