10228Beginning CSS Preprocessors With SASS Compass js and Less js Prabhu Anirudh pdf download
10228Beginning CSS Preprocessors With SASS Compass js and Less js Prabhu Anirudh pdf download
https://textbookfull.com/product/beginning-css-preprocessors-
with-sass-compass-js-and-less-js-prabhu-anirudh/
https://textbookfull.com/product/learning-less-js-1st-edition-
libby-alex/
https://textbookfull.com/product/fullstack-node-js-the-complete-
guide-to-building-production-apps-with-node-js-davit-guttman/
https://textbookfull.com/product/learning-react-js-learn-react-
js-from-scratch-with-hands-on-projects-2nd-edition-alves/
Pro Express js Master Express js The Node js Framework
For Your Web Development Mardan Azat
https://textbookfull.com/product/pro-express-js-master-express-
js-the-node-js-framework-for-your-web-development-mardan-azat/
https://textbookfull.com/product/full-stack-javascript-learn-
backbone-js-node-js-and-mongodb-mardan-azat/
https://textbookfull.com/product/jump-start-node-js-get-up-to-
speed-with-node-js-in-a-weekend-1st-edition-nguyen-don/
https://textbookfull.com/product/learning-node-js-development-
learn-the-fundamentals-of-node-js-and-deploy-and-test-node-js-
applications-on-the-web-1st-edition-andrew-mead/
https://textbookfull.com/product/data-visualization-
with-d3-js-1st-edition-teller-swizec/
T HE E X P ER T ’S VOIC E ® IN W E B D E V E L O P M E N T
Beginning CSS
Preprocessors
With Sass, Compass, and Less
—
Anirudh Prabhu
Beginning CSS
Preprocessors
With Sass, Compass, and Less
Anirudh Prabhu
Beginning CSS Preprocessors: With SASS, Compass.js, and Less.js
Copyright © 2015 by Anirudh Prabhu
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the
material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,
broadcasting, reproduction on microfilms or in any other physical way, and transmission or information
storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now
known or hereafter developed. Exempted from this legal reservation are brief excerpts in connection with
reviews or scholarly analysis or material supplied specifically for the purpose of being entered and executed
on a computer system, for exclusive use by the purchaser of the work. Duplication of this publication or
parts thereof is permitted only under the provisions of the Copyright Law of the Publisher’s location, in its
current version, and permission for use must always be obtained from Springer. Permissions for use may be
obtained through RightsLink at the Copyright Clearance Center. Violations are liable to prosecution under
the respective Copyright Law.
ISBN-13 (pbk): 978-1-4842-1348-3
ISBN-13 (electronic): 978-1-4842-1347-6
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol
with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only
in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are
not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to
proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication,
neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or
omissions that may be made. The publisher makes no warranty, express or implied, with respect to the
material contained herein.
Managing Director: Welmoed Spahr
Acquisitions Editor: Celestin Suresh John
Development Editor: Matthew Moodie
Technical Reviewer: Lokesh Iyer
Editorial Board: Steve Anglin, Pramilla Balan, Louise Corrigan, James DeWolf, Jonathan Gennick,
Robert Hutchinson, Celestin Suresh John, Michelle Lowman, James Markham, Susan McDermott,
Matthew Moodie, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Gwenan Spearing
Coordinating Editor: Rita Fernando
Copy Editor: Kezia Endsley
Compositor: SPi Global
Indexer: SPi Global
Distributed to the book trade worldwide by Springer Science+Business Media New York,
233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail
orders-ny@springer-sbm.com, or visit www.springer.com. Apress Media, LLC is a California LLC
and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc).
SSBM Finance Inc is a Delaware corporation.
For information on translations, please e-mail rights@apress.com, or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use.
eBook versions and licenses are also available for most titles. For more information, reference our Special
Bulk Sales–eBook Licensing web page at www.apress.com/bulk-sales.
Any source code or other supplementary material referenced by the author in this text is available to
readers at www.apress.com/. For detailed information about how to locate your book’s source code, go to
www.apress.com/source-code/.
Contents at a Glance
■
■Chapter 1: Introduction to Preprocessors������������������������������������������������������������� 1
■
■Chapter 2: Introduction to Sass��������������������������������������������������������������������������� 13
■
■Chapter 3: Advanced Sass����������������������������������������������������������������������������������� 35
■
■Chapter 4: Development with Less���������������������������������������������������������������������� 61
■
■Chapter 5: Introduction to Compass�������������������������������������������������������������������� 93
Index��������������������������������������������������������������������������������������������������������������������� 139
iii
Contents
■
■Chapter 1: Introduction to Preprocessors������������������������������������������������������������� 1
What Are Preprocessors?������������������������������������������������������������������������������������������������� 1
Why Use Preprocessors?�������������������������������������������������������������������������������������������������� 2
Misconceptions About CSS Preprocessors����������������������������������������������������������������������� 5
You Need To Be a Command-Line Expert����������������������������������������������������������������������������������������������� 5
You Need To Change the Way You Write CSS������������������������������������������������������������������������������������������ 5
Why Not Write CSS Directly?������������������������������������������������������������������������������������������������������������������ 5
Features of Preprocessors����������������������������������������������������������������������������������������������� 8
Variables������������������������������������������������������������������������������������������������������������������������������������������������� 8
Nesting��������������������������������������������������������������������������������������������������������������������������������������������������� 8
Import����������������������������������������������������������������������������������������������������������������������������������������������������� 9
Mixins����������������������������������������������������������������������������������������������������������������������������������������������������� 9
Extend/Inheritance������������������������������������������������������������������������������������������������������������������������������� 10
Operators���������������������������������������������������������������������������������������������������������������������������������������������� 10
v
■ Contents
Summary������������������������������������������������������������������������������������������������������������������������ 12
■
■Chapter 2: Introduction to Sass��������������������������������������������������������������������������� 13
Installing Sass���������������������������������������������������������������������������������������������������������������� 13
Checking Other Versions of Sass���������������������������������������������������������������������������������������������������������� 14
An Alternative to the Command Line ��������������������������������������������������������������������������������������������������� 16
Compiling the sass File������������������������������������������������������������������������������������������������������������������������ 16
Avoiding the Command Line with Apps: Using Scout��������������������������������������������������������������������������� 17
Automating Workflow��������������������������������������������������������������������������������������������������������������������������� 21
Variables������������������������������������������������������������������������������������������������������������������������� 22
Data Types���������������������������������������������������������������������������������������������������������������������� 23
Default Values for Variables�������������������������������������������������������������������������������������������� 23
Nesting Styles in Sass���������������������������������������������������������������������������������������������������� 24
Referencing a Parent Selector: &����������������������������������������������������������������������������������� 25
Using Combinators in Your SCSS������������������������������������������������������������������������������������ 26
Comments���������������������������������������������������������������������������������������������������������������������� 27
Nesting Properties���������������������������������������������������������������������������������������������������������� 27
Interpolation������������������������������������������������������������������������������������������������������������������� 28
Placeholder Selectors���������������������������������������������������������������������������������������������������� 28
Logical Capabilities of Sass������������������������������������������������������������������������������������������� 29
Mathematical Operations in Sass��������������������������������������������������������������������������������������������������������� 29
Parentheses������������������������������������������������������������������������������������������������������������������������������������������ 30
Calculations Using Variables����������������������������������������������������������������������������������������������������������������� 30
Control Directives��������������������������������������������������������������������������������������������������������������������������������� 30
Summary������������������������������������������������������������������������������������������������������������������������ 34
vi
■ Contents
■
■Chapter 3: Advanced Sass����������������������������������������������������������������������������������� 35
@import������������������������������������������������������������������������������������������������������������������������� 35
Partials ������������������������������������������������������������������������������������������������������������������������������������������������ 36
Nested @import������������������������������������������������������������������������������������������������������������������������������������ 36
Plain CSS Imports��������������������������������������������������������������������������������������������������������������������������������� 37
@media�������������������������������������������������������������������������������������������������������������������������� 37
@extend������������������������������������������������������������������������������������������������������������������������� 40
@extend Behind the Scenes����������������������������������������������������������������������������������������������������������������� 42
When to Use Selector Inheritance�������������������������������������������������������������������������������������������������������� 42
Placeholder Selectors �������������������������������������������������������������������������������������������������������������������������� 42
Do More with @extend������������������������������������������������������������������������������������������������������������������������� 43
@at-root������������������������������������������������������������������������������������������������������������������������� 44
Mixin Directives�������������������������������������������������������������������������������������������������������������� 46
Mixins versus Classes�������������������������������������������������������������������������������������������������������������������������� 48
Mixins with CSS Selectors�������������������������������������������������������������������������������������������������������������������� 48
Arguments to Mixins����������������������������������������������������������������������������������������������������������������������������� 48
Using Content Blocks in Mixins������������������������������������������������������������������������������������������������������������ 50
Function Directives��������������������������������������������������������������������������������������������������������� 51
Numeric Functions������������������������������������������������������������������������������������������������������������������������������� 51
Color Functions������������������������������������������������������������������������������������������������������������������������������������� 53
List Functions��������������������������������������������������������������������������������������������������������������������������������������� 54
User-Defined Functions������������������������������������������������������������������������������������������������������������������������ 54
Output Style�������������������������������������������������������������������������������������������������������������������� 55
nested��������������������������������������������������������������������������������������������������������������������������������������������������� 55
expanded���������������������������������������������������������������������������������������������������������������������������������������������� 55
compact������������������������������������������������������������������������������������������������������������������������������������������������ 55
compressed������������������������������������������������������������������������������������������������������������������������������������������ 56
vii
■ Contents
■
■Chapter 4: Development with Less���������������������������������������������������������������������� 61
Introduction to Less�������������������������������������������������������������������������������������������������������� 61
Client-Side Variation of Less������������������������������������������������������������������������������������������ 62
Server-Side Variant�������������������������������������������������������������������������������������������������������� 62
Compiling a Less File���������������������������������������������������������������������������������������������������������������������������� 63
Language Features��������������������������������������������������������������������������������������������������������� 64
Variables����������������������������������������������������������������������������������������������������������������������������������������������� 64
Comments�������������������������������������������������������������������������������������������������������������������������������������������� 65
Mixins��������������������������������������������������������������������������������������������������������������������������������������������������� 66
Nested Rules������������������������������������������������������������������������������������������������������������������ 73
Import Directives������������������������������������������������������������������������������������������������������������ 74
Mixin Guards������������������������������������������������������������������������������������������������������������������ 74
Referencing the Parent Selector������������������������������������������������������������������������������������ 76
Using & with Guards����������������������������������������������������������������������������������������������������������������������������� 77
Summary������������������������������������������������������������������������������������������������������������������������ 91
viii
■ Contents
■
■Chapter 5: Introduction to Compass�������������������������������������������������������������������� 93
Introduction to Compass������������������������������������������������������������������������������������������������ 93
Compass Installation������������������������������������������������������������������������������������������������������ 93
Creating a Project in Compass��������������������������������������������������������������������������������������� 96
Understanding config.rb������������������������������������������������������������������������������������������������� 98
Responsive Grids with Sass and Compass������������������������������������������������������������������ 102
Introduction to Susy��������������������������������������������������������������������������������������������������������������������������� 102
Getting Susy��������������������������������������������������������������������������������������������������������������������������������������� 102
Using Susy to Your Project������������������������������������������������������������������������������������������������������������������ 103
Showing the Grid Background������������������������������������������������������������������������������������������������������������ 105
Summary���������������������������������������������������������������������������������������������������������������������� 137
Index��������������������������������������������������������������������������������������������������������������������� 139
ix
About the Author
xi
About the Technical Reviewer
Lokesh Iyer completed his bachelor’s in IT from KC College, Mumbai and received his MBA from Sydenham
College, Mumbai. He is the founder and director of SI Technologies, a company focused on providing
hardware and software solutions as well as web exposure and security solutions. Over the past three years,
he completed over 60 projects on HTML5, CSS3, JavaScript, jQuery, PHP, C#, Android, and MySQL/SQLite
databases with his team. Apart from his business ventures, he is a visiting faculty member at KC College of
the bachelor’s in IT program.
xiii
Acknowledgments
First and foremost, I wish thank the awesome team at Apress for offering me such a wonderful opportunity
to write this book. When Celestin “discovered” me through LinkedIn and asked me if I would like to write
a book, it sounded like a straight and easy task. Over the next month, he painstakingly guided me through
the entire process of preparing an initial proposal for the book and helped me finalize it. Subsequently,
when the real action started in terms of writing the chapters, Rita was always there. She was the scrum
master who was always there to help. She gave me that gentle nudge to make sure that even as I was running
behind schedule, I did everything that needed to be done to catch up and deliver the chapter in potentially
shippable increments. Thanks, Celestin and Rita, for not giving up on me!
I also want to thanks Matt Moodie and the large team from Apress working in background, for all
their efforts. In addition, the review feedback and critical inputs by reviewers is an author’s lifeline—it is
the first feedback on a product that is still quite raw. I want to offer my sincere thanks to Lokesh Iyer for his
technical review.
I can’t thank my professional network enough for enriching my learning journey through the years—my
former employers, my clients, managers, colleagues, team members, students, readers of my blog, audience
to my talks, and the noblest of them all—the fellow volunteers. Thanks for all the support and learning
opportunities and for making me a better professional every single day.
Finally, despite all the diligent efforts of the editorial team and reviewers, I must accept responsibility
for all the mistakes and shortcomings in this book. Let me know how I can make this book better.
xv
Introduction
CSS preprocessor came into buzz a couple of years ago. The concept intrigued me: Allowing use of
preprocessor files that could contain one or several things like variables, functions, mixins, and the like. After
development, these special files would then be compiled into regular CSS files that all web browsers could
understand.
Being a believer of phrase “if it's not broken, don’t fix it,” I avoided using CSS preprocessors. The initial
thought that would come to my mind was, “Why add unnecessary processes to my workflow?”. Also, I
feared the steep learning curve and the command-line interface provided me another reason to avoid CSS
preprocessors.
Finally, after watching several podcasts and reading through many articles, I had an “a-ha” moment.
It made me realize that, “Wow, I should be incorporating this in my workflow!”.
Since then, I've been using Sass and Less in my projects, and it seems to have made my development a
lot simpler and more efficient. In this book, you will learn how both of these preprocessors work.
You’ll first start by learning about the concept of preprocessors and how they work. You also learn
about the popular flavors of preprocessors available on the market. You then look into the GUI-based tools
available for people who are not familiar with command-line interfaces.
As the chapters progress, you will learn all about these two preprocessors—Sass and Less—and learn
about a popular framework based on Sass called Compass.
The knowledge shared in this book can help you improve your productivity and write maintainable and
scalable CSS code.
xvii
Chapter 1
Introduction to Preprocessors
HTML5 and CSS3 are changing how web pages are designed. CSS3 provided web developers with advanced
features such as gradients, transitions, and animations, etc. However, these new features increased the
complexity of CSS code, thus making it more difficult to maintain.
Besides the complexity introduced by CSS3, writing CSS may turn painful with time, because
programmers have to perform many of the same activities over and over again (such as having to look up
color values in CSS and margin/padding declarations). These small repetitive tasks add up to quite a bit of
inefficiency. Preprocessors are the solution to these, and a handful of other, inefficiencies.
CSS preprocessors extend CSS with modern programming-language concepts. In order to use Sass
(Syntactically Awesome Stylesheets), you must know how to code in CSS. CSS preprocessors allow you to
use variables, functions, operations, and even rule or selector nesting while coding your CSS. With CSS
preprocessors, you can apply the “Don’t Repeat Yourself” (DRY) principle to your CSS code. Following the
DRY principle helps you avoid code repetition.
1
Chapter 1 ■ Introduction to Preprocessors
With a preprocessor, you can structure CSS similar to other languages like PHP or JavaScript. Thus,
a preprocessor brings peace of mind to the developer. It lets you write code that’s future-proof and easily
maintainable, thus saving time and energy.
Preprocessors are extensions of CSS, which means that valid CSS code is valid preprocessor code.
Developers familiar with CSS won’t have a learning curve while learning any preprocessor.
a {
color: $site-color;
}
#topBar {
background-color: $site-color;
color:#fff;
}
With a preprocessor, changing a value in one place changes the entire stylesheet. This is shown in
Listing 1-2.
#topBar {
background-color: #eee;
color: #fff;
}
2
Chapter 1 ■ Introduction to Preprocessors
Let’s consider another example of code repetition. Many times there are blocks of code used at various
locations in your stylesheet, as shown in Listing 1-3.
With preprocessors, you can put these redundant rules into a mixin, which is defined once and can be
included as needed. This is shown in Listing 1-4.
Listing 1-4. Creating and Using a Reusable Code Block in the Preprocessor
@mixin containerSettings {
padding-bottom: 45px;
text-align:center;
}
p {
@include containerSettings;
}
footer {
@include containerSettings;
}
footer {
padding-bottom: 45px;
text-align: center;
}
CSS, which is the foundation of all preprocessors, has a steep learning curve when it comes to
understanding how different properties work, understanding cascading, browser support for various
properties, the selectors, the quirks, and so forth. In addition to all the previous points, consider that
maintaining stylesheets in today’s complex interfaces is a big challenge too.
Most of the time, stylesheets are immensely repetitive, with properties or groupings of properties,
etc. The typical CSS file is a linear document. This makes a programmer from an object-oriented domain
go crazy.
As per the DRY principle: Every piece of knowledge must have a single, unambiguous, authoritative
representation in a system.
3
Chapter 1 ■ Introduction to Preprocessors
The simplest explanation of this is that redundancy in code can result in failure and can create
confusion for developers. CSS does not follow the DRY principle. Most of the times, CSS files will contain
repeated rules, declarations, and values. Developers are constantly writing the same snippets of code
throughout their stylesheets.
CSS lacks features like variables, symbolic constants, conditionals, expressions over variables, and so
on, that are available in all other programming languages.
The CSS preprocessor sits between your preprocessor-friendly file and the compiled CSS files, which
will be served to the browser. CSS preprocessors allow you to write code as per the DRY principle, making it
faster, efficient, and maintainable. The code is then compiled into regular CSS files via the command line or
an application.
Consider the example in Listing 1-6. Modern browsers support RGBA (Red Green Blue Alpha) and
HSLA (Hue Saturation Lightness Alpha) color values. However, you need to provide a fallback for older
browsers. A common practice is to declare a hex value first and then the RGBA or HSLA value.
Listing 1-6. Supporting a New Color Format in All Browsers Using CSS
.container {
background-color: #000;
background-color: rgba(0,0,0, 0.9);
}
With preprocessors, this job can be done easily. If the same task were to be completed using the Sass
precompiler, it would be done as shown in Listing 1-7.
The preprocessor does all the calculations related to RGBA values for you.
With arrival of CSS3 support in modern browsers, people are not using images as much and are going
with pure CSS. However, each browser has its own implementation of these features, and therefore these
require vendor prefixes and different syntaxes. You can see a simple example of this in Listing 1-8.
Preprocessors make this job easier by allowing you to declare this code in a reusable component called
a mixin (covered in coming chapters) and then use it directly in your code.
4
Chapter 1 ■ Introduction to Preprocessors
This example assumes that this reusable mixin is named rounded-corners. The code for this in the Sass
preprocessor would look like Listing 1-9.
Listing 1-9. Implementing the code of Listing 1-8 Using a Sass Preprocessor
.container {
@include rounded-corners(4px);
}
So far you have seen how preprocessors help in coding CSS. Now let’s consider how preprocessors
can help during the post-coding phase. Compressing the CSS reduces its original size, which results in less
loading time. This can be done using online tools or editor addons.
However, the preprocessor can compile to CSS in various ways, one of which is compressed. The
preprocessor can be configured in a way that, whenever a preprocessor file is saved, it is automatically
compiled into CSS and compressed. This makes it production ready.
5
Chapter 1 ■ Introduction to Preprocessors
Sass
Sass (Syntactically Awesome Stylesheets) is the most famous preprocessor and it’s been around for eight
years. Sass is a preprocessor language originally designed and developed by Hampton Catlin and Natalie
Weizenbaum.
When SassScript is compiled, it generates CSS rules for various selectors as specified in the Sass file.
Sass can monitor the .sass or .scss files and generate an output .css file whenever the .sass or .scss file is
saved.
Sass is open source and coded in Ruby.
Less
Just like Sass, Less is another popular CSS preprocessor. It enhances the default CSS syntax by provision of
mixins, variables, and nested style rules. It is easy to set up. You can also reference its JavaScript file in your
HTML document and get started.
Less has attracted a very strong userbase due to its simplicity. Less is open source. Its initial version was
written in Ruby; however, the later versions were written in JavaScript. A valid CSS code is a valid Less code,
because Less follows the same semantics.
The main difference between Less and other CSS preprocessors is that Less allows real-time
compilation via less.js within the browser.
Compass
Compass is an open source CSS authoring framework. Compass is based on Sass, and hence it can use of
all Sass’ features. It is very popular and is under active development. With Compass, developers can write
cleaner markup without presentational classes.
Compass is filled with many reusable patterns most commonly used by developers.
In parallel to Compass is Bourbon, which is built with Sass, for Sass by Thoughtbot. Bourbon is a library
of simple and lightweight mixins for Sass.
Some of key features that Compass provides are discussed next.
6
Chapter 1 ■ Introduction to Preprocessors
Mixins
Compass and Bourbon both provide a huge collection of mixins for various CSS3 features, which you will
look at in detail in coming chapters. That means the developers don’t have to worry about vendor prefixes or
CSS hacks. Listing 1-10 demonstrates the use of mixins with regard to box sizing.
Typography
Compass and Bourbon both contain typography-related mixins, variables, and functions. Compass comes
with a lot of variables and a couple of mixins.
One of the features of Compass in this area is that it can also work with rem units with px fallbacks.
Helpers
One thing that Compass provides are helpers. Helpers save time, as they are predefined CSS snippets that
you need to use directly in your stylesheets.
For example, Compass provides a helper for clearing the floats, a reset (with various options), some
techniques for image replacement, and more.
Bourbon calls these helpers addons, and they are fewer in number than Compass.
Sprites
Because Compass is partly built in Ruby, Compass can interact with the file system. One of the things it can
do is build sprites based on a folder of images.
It also provides functions like image-width(), image-height(), and inline-image(), which encode an
image file in Base64.
7
Chapter 1 ■ Introduction to Preprocessors
Features of Preprocessors
This section goes through some common features of preprocessors that make them great tools for
developers versus using CSS directly. You will be looking at some examples in context. The examples use two
famous preprocessors—Sass and Less—which you will be studying in detail in coming chapters.
Variables
Variables help you store information that needs to be reused in your stylesheet. Properties like colors, font
styles, or any CSS style can be stored and reused. For example, in Sass $ symbol is used to declare a variable.
When this code is compiled, it takes the variable defined for the $text-color and outputs normal CSS
with the variable’s values placed in the CSS. This can be useful when working with properties applicable
sitewide and keeping them consistent throughout the site.
Nesting
Visual hierarchy of a page is not as clear in CSS as it is in HTML. Preprocessors let you nest CSS selectors,
similar to the way it is done in HTML.
8
Chapter 1 ■ Introduction to Preprocessors
Import
Preprocessors have a slightly different @import implementation to the one in CSS. Instead of fetching a file
from server, Sass will fetch the specified file and merge it into the file you’re importing. This results in a
single CSS file being served to the web browser.
Suppose you have two SCSS files called reset.scss and style.scss and you want to import
reset.scss into style.scss. This can be done using Sass; see Listing 1-18.
■■Note There is no need to specify the file extension while importing files in Sass. Sass automatically figures
out the appropriate file and imports it.
In Less, however, the behavior of import varies per file extension. If the imported file has a .css
extension, it will be treated as a normal CSS import and won’t be changed when compiled. If it has any other
extension, it will be treated like Less and will be imported and merged.
Mixins
Mixins let you create snippets of CSS declarations that you can reuse throughout your stylesheet. Mixins are
further configurable by passing parameters as well as setting defaults for those parameters. Mixins are most
useful when you want to repeatedly use vendor-prefixed syntax. They reduce the tedious rewriting of code
(see Listings 1-19 and 1-20).
Listing 1-19. Example of a Border-Radius Mixin with a Parameter and its Default Value in Sass
@mixin rounded-corners($radius:5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
9
Chapter 1 ■ Introduction to Preprocessors
Listing 1-20. Example of a Border-Radius Mixin with a Parameter and its Default Value in Less
.rounded-corners(@radius:5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
border-radius: @radius;
}
.container { .rounded-corners(10px); }
Extend/Inheritance
Preprocessors allow you to share a collection of CSS properties between one or more selectors. This helps
you write preprocessor code as per the DRY principle. See Listings 1-21 and 1-22.
.successBox {
@extend .messagebox;
color:#0F0;
}
.successBox {
&:extend(.messagebox);
color:#0F0;
}
Operators
Preprocessors provide standard math operators so that you can perform calculations on the fly. See
Listing 1-23.
10
Chapter 1 ■ Introduction to Preprocessors
.errorNotification {
@include notification;
background:#F00;
}
.successNotification {
@include notification;
background: #0F0;
}
.successNotification {
color: #fff;
border-radius: 50%;
background: #0F0;
}
Notice the code duplication that occurs in the output shown in Listing 1-25. If this mixin is used
extensively across style code, it would result in a large amount of code redundancy and thus increase the
file size.
Sass has an alternative approach, which is not supported by other preprocessors—extending. Extending
the code will set the same properties of multiple selectors simultaneously, by specifying the selectors in a
comma-separated format.
11
Chapter 1 ■ Introduction to Preprocessors
This approach avoids duplication; however, it can cause performance issues if too many selectors
are extended. The resulting CSS will have many selectors in comma-separated format, which can cause
performance issues.
Summary
This chapter introduced preprocessors. You looked at how they can influence your workflow, making it more
efficient and far easier to maintain in the future. You also looked at some known preprocessors currently
available in the market.
The next chapter dives into Sass and discusses its various features.
12
Chapter 2
Introduction to Sass
In the previous chapter, you learned about precompilers, including why to use them, which ones are the
known preprocessors, and their features. This chapter covers one of the most popular preprocessors: Sass.
In this chapter, you explore the following aspects of Sass:
• Installation
• Running the code
• Variables
• Comments
• Data types
• Parentheses
• Nested rules
• Nested properties
• Referencing parent selector
• Interpolation
• Placeholder selector
• Logical and control directives
Installing Sass
You install Sass via a Ruby gem, so you need to have Ruby installed on your machine. If you are on Mac
OS X, you already have Ruby installed. If you are on Windows or Linux, you need to download and install
Ruby from http://rubyinstaller.org/downloads/.
After installing Ruby, you install Sass by running the gem command. gem can be thought of as an
extension that extends the functionality of applications that consume Ruby. You can install Sass via the
command line using the command shown in Listing 2-1. A simple interpretation of this command is “Ruby,
install the gem called sass”.
13
Chapter 2 ■ Introduction to Sass
After installation completes, you can verify it by running the command in Listing 2-2.
This command asks Ruby to list all the gems that have “sass” in their name. The -r command attribute
tells Ruby to check it remotely, where all Sass versions are available. The -a command attribute is for listing
all available versions.
14
Chapter 2 ■ Introduction to Sass
15
Chapter 2 ■ Introduction to Sass
You can also determine which prerelease versions are available by executing the command shown in
Listing 2-5.
Listing 2-5. Checking the Prerelease Version Through the Command Line
gem list sass –pre –r
You can install the prerelease version if you want to try out all the bleeding-edge features that are not
available in stable releases. Use the command shown in Listing 2-6 to do so.
There may be situations where you might need to uninstall existing versions of Sass, such as to use an
older version that supports some deprecated features used in the project. This can be done as in Listing 2-7.
16
Random documents with unrelated
content Scribd suggests to you:
Presently Papa Labesse began to talk to himself. His eyes were very
bright, and as he spoke they jumped nimbly from shed to shed, from
factory to factory, of the dispiriting scene before him.
"But what are those?" he began, scowling at two high chimneys
standing side by side. "Tiens! Sainte Clotilde! But the evening is
clear then, par exemple, that one sees so far and so well. It is all so
wonderful—but I have never understood it till now. Ah! Saint
Etienne-du-Mont! That I know, since the dome of the Panthéon is
quite near. Sapristi! What is that? L'amour, Papa Labesse, l'amour,—
that which, finally, thou canst never understand, poor Papa Labesse!
Tiens! Notre Dame! Ah, ça! A woman like herself, what?—like Paris
that sings of love! My pigeon!"
So, for an hour, the thin stream of jumbled phrases slipped from his
dry lips. He talked softly,—no one could have heard him at two
paces,—but the babble never ceased.
At seven o'clock a woman carrying a basket appeared upon the
fortifications from the direction of the gate, and, pausing at the top
of the slope, looked down upon the mower.
"Hé! Allô—labago! Bom-biste!" she cried. The man turned. There
was no such thing as not being able to hear La Trompette.
And suddenly Papa Labesse held his peace.
Bombiste came up the slope with a long leisurely stride, flung his
scythe upon the grass, and placing his arm around La Trompette's
neck, kissed her loudly on both cheeks.
"Name of God!" he said. "But I have thirst!"
They seated themselves side by side and close together, with their
backs to Papa Labesse, some fifty metres distant, and La Trompette
opened her basket. Presently Bombiste lowered his left elbow and
raised his right in the act of drawing a cork, and then raised his left
again and took a long draught from the bottle. At the same moment
Papa Labesse swung round a quarter circle to the right, as if upon a
pivot, and began to crawl very slowly forward.
"Chouette!" said Bombiste to La Trompette, biting a great mouthful
from a slice of rye bread and cheese, "c'est du suisse!"
"Thou deservest water and a raw turnip!" replied the woman,
assuming a tone of angry reproach. "If it were not I, thou knowest,
long since thou wouldst have been put ashore, heart of an artichoke
—va!"
"I am like that," observed Bombiste, with regret. "But what wouldst
thou, name of God! They come, they go: but at the end it is always
thou."
The woman made no reply, and Papa Labesse, two metres away, laid
his gnarled brown fingers on the handle of Bombiste's discarded
scythe.
Bombiste capped his philosophy with a second long draught of wine,
and then, taking a stupendous bite of bread and cheese, glanced
slyly at his companion out of the corners of his eyes. She was gazing
straight before her, her teeth nicking the edge of her lower lip.
"What hast thou?" mumbled the man, with his mouth full.
"She was very pretty," answered La Trompette, "and she loved thee,
that garce. But thou art going to tell me that it is finished forever!—
That never, never," she went on, clenching her hands, "wilt thou see
her again! Else I plant thee, and thou canst earn thine own white
pieces,—mackerel!"
Bombiste leaned over and placed his face beside hers.
"Is it not enough?" he said in his softest voice. "Voyons bien! What is
she to me, this Marcelle? Fichtre! I planted her last week, thou
knowest. B'en, quoi? Thou knowest the blue gown? It is that which
sweeps the Boul' Roch' at present! But that is not for long. Perhaps
the Morgue—more likely St. Lazare. Art thou not content?" And he
pressed his cheek to the woman's and moved his head up and down
slowly, caressing her.
Papa Labesse rose slowly to his feet, and stretched his lean arms to
their full length. The sun winked for the fraction of a second on the
downward swirling scythe, and then all was still, save for the dull
thud, thudding of two round objects rolling down the uneven slope
of sod. In a moment even this sound ceased.
Papa Labesse revolved slowly upon his heels, pausing as his blue
eyes, wide and vacant, fell upon the distant walls of Sacré-Cœur,
swimming, cream-white and high in air, between him and the sun.
Then he pitched softly forward upon the grass.
In the Absence of
Monsieur
Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.
textbookfull.com