Sign In Start Free Trial
Account

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)
close
close
Sass and Compass for Designers

Sass and Compass for Designers

4.6 (35)
By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
close
close
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
1
Index

Chapter 1. Getting Started with Sass and Compass

Writing style sheets with Sass and Compass makes them more flexible, more maintainable, and faster to produce than ever before. That's why companies including eBay, bet365.com, BBC, Instagram, LinkedIn, Square, and Groupon all use Sass and Compass to produce their CSS.

One thing that kept me away from using Sass for too long is how difficult it seemed to get up and running. The thought of needing to use the command line to get something working made me tremble with fear, so when instructions included phrases like 'install ruby gems' and 'run the watch command', I was lost. In the words of Dr Evil, "Throw me a frickin' bone!"

If you're primarily a designer, you may have had a similar reaction. The aim of this book is to make Sass and Compass as understandable and easy to use as possible. That way all of its incredible features can be put to good use right away. I want to assure you right now that if you can write HTML and CSS you can easily master Sass and Compass.

Sass describes itself as a meta language. It's more commonly described as a CSS 'preprocessor'. Either way, the reality of using Sass is simple. Code is written as one file (a Sass file with an extension like .scss) and when the file is saved, Sass converts it into the same CSS you already know how to write (and if you don't know how to write CSS, put this book down and move to another shelf).

It's actually simple to make a Sass file too. Take any existing CSS file and change the file extension from .css to .scss. That is now a fully functional Sass file that you can add extra Sass based functionality to; just think of Sass as supercharged CSS.

If the command line side of things still bothers you, fear not. There are now a number of user-friendly graphical tools to make working with Sass and Compass simple. We'll cover those in this chapter (as well as using Sass and Compass from the command line for those feeling brave).

As this book is aimed at designers, after extolling the virtues of Sass and Compass, this chapter is primarily focused on understanding what Sass and Compass are, how the two relate, and then getting them both installed. Then we will be ready to start our first project.

In summary, in this chapter we will learn:

  • Why CSS preprocessors are needed

  • Why you should use Sass and Compass

  • What Sass is

  • What Compass is and how it relates to Sass

  • How to install Sass and Compass on OS X and Windows

  • Which graphical tools are available to negate the need to use the command line

  • The different syntaxes of Sass

Visually different images
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
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

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