Do you spend your days writing CSS? If so, you need Sass and Compass in your life. It allows you to write style sheets faster, maintain them more easily, and create cutting-edge cross-browser CSS effortlessly.
Historically, getting up and running with Sass and Compass was difficult. It required an understanding of the command line and an appreciation of programming conventions.
With this book, however, we explain things in simple layman's terms. It's aimed at designers and not programmers. If you are able to understand and write HTML and CSS, with this book you will be able to master Sass and Compass and take your style sheets to the next level.
Chapter 1, Getting Started with Sass and Compass, explains, in layman's terms, what Sass and Compass are, how they relate, and how to get them installed and ready to use.
Chapter 2, Setting Up a Sass and Compass project, helps you get to grips with Compass projects and understand how to control them. When finished we will have a base Sass and Compass project for easy re-use.
Chapter 3, Nesting, Extend, Placeholders, and Mixins, explains the workhorse features of Sass and Compass and how they will make writing and maintaining CSS easier than ever before.
Chapter 4, Manipulate Color with Ease, allows you to kiss your color picker goodbye. With Sass and Compass it's possible to perform color conversions in the code. Saturate, mix, tint, and shade colors with ease. This chapter shows you how.
Chapter 5, Responsive and Flexible Grids with Sass and Compass, teaches how easy it is to use Sass and Compass powered grid systems to achieve any type of responsive layout without adding any extraneous HTML classes to the markup.
Chapter 6, Advanced Media Queries with Sass and Mixins, writing media queries is normally a chore. Not with Sass and Compass. This chapter explains how to generate media queries wherever you need them, giving you control of your styles on any device.
Chapter 7, Easy CSS3, Image Sprites, and More with Compass, explains how Compass makes it easy and simple to create vendor prefixes for all experimental CSS features. If that wasn't good enough, we'll use it to effortlessly create image sprites and data URIs.
Chapter 8, Programmatic Logic with Sass, covers some of the more complex but powerful features of Sass. We'll learn how to perform math functions and write loops to create countless CSS rules in a fraction of the usual time.
Chapter 9, Becoming a Sass and Compass Power User, we're almost Sass and Compass wizards now. However, in this chapter, to ensure we use our new superpowers responsibly, we'll do a code review and consider how to use development tools to test code before deployment.
A good understanding of HTML and CSS is all you need.
However, familiarity with responsive web design would be beneficial and an appreciation of some great films will go a long way to your overall enjoyment of this book.
Sass and Compass makes writing and maintaining CSS easier than ever before. And you don't need to be a rocket scientist to use it.
Perhaps you've heard about Sass and Compass but feel blinded by terminology. Or maybe you conceptually understand all the benefits but don't know where to start.
The book is aimed at web designers, not programmers. All you need is an understanding of HTML and CSS. With that knowledge and this book you can take your CSS skills to the next level and beyond.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Semantic purists argue that writing markup laden with HTML classes such as column_8 and column_4 is tantamount to a cardinal sin."
A block of code is set as follows:
* {
@include bs;
}
[class^="inner"] {
max-width: 75em;
margin: auto;
}
header[role="banner"],footer[role="contentinfo"] {
width: 100%;
display: block;
}
nav[role="navigation"] {
width: 25%;
float: left;
}
.main-content {
width: 70%;
float: right;
}
footer[role="contentinfo"] {
clear: both;
}When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
.buy-amazon-uk {
@extend %block;
background-image: image-url("amazon-co-uk.png");
background-size: image-width("amazon-co-uk.png") image-height("amazon-co-uk.png");
background-position: 50% 50%;
background-repeat: no-repeat;
height: image-height("amazon-co-uk.png");
width: image-width("amazon-co-uk.png");
}Any command-line input or output is written as follows:
gem install susy
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "The preceding example will produce an error Cannot specify HSL and RGB values for a color at the same time for 'adjust-color'".
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
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 files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.