Sass (Syntactically Awesome Stylesheets) is a CSS extension language or preprocessor, which means that Sass or SCSS code compiles into static CSS code. Sass changes the way you write and maintain your CSS code; the final CSS code will be the same, although better organized in many situations.
Since the introduction of CSS3 in 2012, the role of CSS in modern web development has become more and more important. Nowadays, CSS3 is not only used to style your HTML documents, but it also plays an important role in the responsibility of your designs too. Last, but not least, CSS3 extends CSS with features such as animations and transitions.
Writing correct functional CSS code will be the first thing; keeping this code readable, working on all major browsers, and maintainable will be the second. CSS files grow and become untidy in the development and maintenance processes. CSS doesn't have the ability to modify existing values or reuse common styles. Also, doing the math or defining variables is not possible in CSS. This is where the Sass language comes into the frame.
The Sass language enables you to write your CSS code DRY (Do not Repeat Yourself) because it extends the CSS syntax with variables, mixins, functions, and many other techniques. Sass makes the CSS language is more maintainable, themeable, and extendable.
Also, others know the power of Sass. Projects such as Bootstrap 4 and the Foundation are built with Sass. These projects create clear and extendable Frameworks with Sass. Bootstrap chose Sass because of the increasingly large community of Sass developers. You can't ignore these proofs. Stop writing cumbersome CSS with bugs and browser defects and learn Sass by reading this book.
In this book, you will learn to write, compile, and understand the Sass language. It helps with faster and more cost-effective web development. You will get practical tips to integrate Sass in your current and new projects. After reading this book, you will write clear and readable CSS3 with Sass. Instead of spending your time debugging your complex CSS code for a specific device or browser, you could pay more attention to your real design tasks.
Your clients will be happy with your advanced and stable designs. Development and maintenance time, and therefore costs, shall decrease.
Sass is available for use and modification under the MIT License. You can use Sass free of charge.
Chapter 1, Getting Started with Sass, gives you an introduction to the Sass language. You will learn how to install and use Sass for your projects on your system, read how to edit your code, and organize your files. It will also tell you why you should use newer SCSS syntax instead of the intended Sass Syntax.
Chapter 2, Debugging Your Code, teaches you how to comment and debug your Sass code. Get introduced to an online tool to test your code and impress with style guides.
Chapter 3, Variables, Mixins, and Functions, showcases the power of Sass. Learn to use variables to define commonly used values at a single place and write reusable code by using mixins and functions.
Chapter 4, Nested Selectors and Modular CSS, explains about the nested selectors and other methodologies to structure your code. Reuse your selectors by extending them and use placeholders to prevent duplicated and unused CSS selectors.
Chapter 5, Built-in Functions, dynamically assigns property values based on your input. Use the built-in functions of Sass, among others, for color values and mathematical operations.
Chapter 6, Using Compass, teaches you to code faster using Compass. Compass contains many useful helper mixins and functions to write clean and reusable CSS code.
Chapter 7, Cross-Browser CSS3 Mixins, helps to write maintainable and cross-browser CSS code. Learn about the CSS3 introduced vendor-specific rules, and read how Sass helps you prefix your code to support different browsers.
Chapter 8, Advanced Sass Coding, uses conditionals and loops to create dynamic code and avoid repeats. Learn how to use prebuilt libraries for vertical rhythms, color contrasts, iconic fonts, and CSS Media Queries.
Chapter 9, Building Layouts with Sass, introduces grid-based layouts, help coders and designers, to work together in a consistent manner. Sass can help you create semantic or responsive grids for your projects.
Chapter 10, Building Grid-based Layouts with Susy and Sass, introduces Susy, which is a Sass add-on for grids; learn how to use it. You can also use Susy to create asymmetric or responsive layouts.
Chapter 11, Foundation and Sass, explores Foundation for Sites 6. Foundation is a responsive frontend framework built with Sass.
Chapter 12, Bootstrap and Sass, explains details about Bootstrap 4. Bootstrap 4 uses Sass now. Learn how to develop mobile first and responsive projects with Bootstrap and Sass.
Chapter 13, Meeting the Bourbon Family, explains about Bourbon, which is a simple and lightweight mixin library for Sass; it helps you write CSS faster and easier without the need of using vendor prefixes.
Chapter 14, Ruby on Rails and Sass, builds web applications with Ruby on Rails (RoR) and Sass. Get to grips with sass-rails to compile the CSS code for your RoR apps.
Chapter 15, Building Mobile Apps, explains that the look and feel of mobile apps may differ from that of other web applications. Get introduced to Frameworks for mobile app development with Sass. Build mobile apps with Foundation for Apps and Ionic.
Chapter 16, Setting up a Build Chain with Grunt, gives introduction to Grunt, a build tool for JavaScript projects. Learn how to create tasks to automatically compile, compress, and prefix your CSS code.
To understand and fully profit from the contents of this book, we expect you have built a website with CSS before. A basic understanding of CSS will be required. Understanding CSS selectors and CSS precedence will help you get most out of it.
Understanding the basics of using functions and parameters in functional languages such as JavaScript will be valuable, but not required. Don't panic if you know nothing about functions and parameters. This book contains clear examples. Even without any (functional) programmers' knowledge, you can learn Sass and the book will help you do this. The most important skill will be the willingness to learn.
Finally, some experience with the command line for your system is useful too.
All the chapters of this book contain examples and example code. Running and testing these examples will help you develop your Sass skills. Use any preferred text or CSS editor to write your Sass code.
Most code examples are linked with the scss-lint tool. This tool helps keep your SCSS files clean and readable. Code examples may include special comments to configure this tool.
This book is mainly intended for web developers and designers who are comfortable with CSS and HTML. If you are someone with some experience with CSS, you will find the learning curve of learning Sass syntax will be less steep. A basic knowledge of web development is helpful, but you don't have to be a programmer to understand Sass.
In this book, you will find several headings that appear frequently (Getting ready, How to do it, How it works, There's more, and See also).
To give clear instructions on how to complete a recipe, we use these sections as follows:
This section tells you what to expect in the recipe, and describes how to set up any software or any preliminary settings required for the recipe.
This section usually consists of a detailed explanation of what happened in the previous section.
This section consists of additional information about the recipe in order to make the reader more knowledgeable about the recipe.
In this book, you will find a number of text styles 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: "We can include other contexts through the use of the include directive."
A block of code is set as follows:
// scss-lint:disable ColorKeyword
$link-color: green;
@mixin colors {
color: darken($link-color, 10%);
}
%box {
display: block;
}When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
.code {
@include colors;
p & {
@extend %box;
}
}Any command-line input or output is written as follows:
sass --compass code.scss code.css
New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "Clicking the Next button moves you to the next screen."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <[email protected]>, and mention the book's title in 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 at 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 this book 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.
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on Code Download.
You can also download the code files by clicking on the Code Files button on the book's webpage at the Packt Publishing website. This page can be accessed by entering the book's name in the Search box. Please note that you need to be logged in to your Packt account.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from http://www.packtpub.com/sites/default/files/downloads/SassandCompassDesignersCookbook_ColorImages.pdf.
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 could 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 to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.
Piracy of copyrighted 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.
If you have a problem with any aspect of this book, you can contact us at <[email protected]>, and we will do our best to address the problem.