100% found this document useful (3 votes)
17 views

10228Beginning CSS Preprocessors With SASS Compass js and Less js Prabhu Anirudh pdf download

The document provides information about various resources and books related to CSS preprocessors, specifically SASS, Compass, and Less. It includes links to download these books and highlights their content, such as learning materials on Node.js, React.js, and data visualization with D3.js. Additionally, it outlines the structure and chapters of the book 'Beginning CSS Preprocessors' by Anirudh Prabhu, which covers the fundamentals and advanced topics of CSS preprocessors.

Uploaded by

wickamotkeo0
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
100% found this document useful (3 votes)
17 views

10228Beginning CSS Preprocessors With SASS Compass js and Less js Prabhu Anirudh pdf download

The document provides information about various resources and books related to CSS preprocessors, specifically SASS, Compass, and Less. It includes links to download these books and highlights their content, such as learning materials on Node.js, React.js, and data visualization with D3.js. Additionally, it outlines the structure and chapters of the book 'Beginning CSS Preprocessors' by Anirudh Prabhu, which covers the fundamentals and advanced topics of CSS preprocessors.

Uploaded by

wickamotkeo0
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 66

Beginning CSS Preprocessors With SASS Compass js

and Less js Prabhu Anirudh download

https://textbookfull.com/product/beginning-css-preprocessors-
with-sass-compass-js-and-less-js-prabhu-anirudh/

Download more ebook from https://textbookfull.com


We believe these products will be a great fit for you. Click
the link to download now, or visit textbookfull.com
to discover even more!

Learning Less js 1st Edition Libby Alex

https://textbookfull.com/product/learning-less-js-1st-edition-
libby-alex/

RESTful Web API Design with Node js 10 Learn to create


robust RESTful web services with Node js MongoDB and
Express js 3rd Edition English Edition Valentin
Bojinov
https://textbookfull.com/product/restful-web-api-design-with-
node-js-10-learn-to-create-robust-restful-web-services-with-node-
js-mongodb-and-express-js-3rd-edition-english-edition-valentin-
bojinov/

Fullstack Node js The Complete Guide to Building


Production Apps with Node js Davit Guttman

https://textbookfull.com/product/fullstack-node-js-the-complete-
guide-to-building-production-apps-with-node-js-davit-guttman/

Learning React js Learn React JS From Scratch with


Hands On Projects 2nd Edition Alves

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/

Full Stack JavaScript Learn Backbone js Node js and


MongoDB Mardan Azat

https://textbookfull.com/product/full-stack-javascript-learn-
backbone-js-node-js-and-mongodb-mardan-azat/

Jump Start Node js Get Up to Speed With Node js in a


Weekend 1st Edition Nguyen Don

https://textbookfull.com/product/jump-start-node-js-get-up-to-
speed-with-node-js-in-a-weekend-1st-edition-nguyen-don/

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/learning-node-js-development-
learn-the-fundamentals-of-node-js-and-deploy-and-test-node-js-
applications-on-the-web-1st-edition-andrew-mead/

Data Visualization with d3 js 1st Edition Teller Swizec

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

About the Author����������������������������������������������������������������������������������������������������� xi


About the Technical Reviewer������������������������������������������������������������������������������� xiii
Acknowledgments���������������������������������������������������������������������������������������������������xv
Introduction�����������������������������������������������������������������������������������������������������������xvii


■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

About the Author����������������������������������������������������������������������������������������������������� xi


About the Technical Reviewer������������������������������������������������������������������������������� xiii
Acknowledgments���������������������������������������������������������������������������������������������������xv
Introduction�����������������������������������������������������������������������������������������������������������xvii


■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

Which Are the Known Preprocessors?����������������������������������������������������������������������������� 6


Sass�������������������������������������������������������������������������������������������������������������������������������������������������������� 6
Less�������������������������������������������������������������������������������������������������������������������������������������������������������� 6
Compass������������������������������������������������������������������������������������������������������������������������������������������������� 6

Features of Preprocessors����������������������������������������������������������������������������������������������� 8
Variables������������������������������������������������������������������������������������������������������������������������������������������������� 8
Nesting��������������������������������������������������������������������������������������������������������������������������������������������������� 8
Import����������������������������������������������������������������������������������������������������������������������������������������������������� 9
Mixins����������������������������������������������������������������������������������������������������������������������������������������������������� 9
Extend/Inheritance������������������������������������������������������������������������������������������������������������������������������� 10
Operators���������������������������������������������������������������������������������������������������������������������������������������������� 10

v
■ Contents

Problems with CSS Preprocessors��������������������������������������������������������������������������������� 11


Problems with Mixins��������������������������������������������������������������������������������������������������������������������������� 11
Extending Selectors or Using Mixins Can Hamper Maintenance���������������������������������������������������������� 12

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

Building Your Own Grid System�������������������������������������������������������������������������������������� 56


Summary������������������������������������������������������������������������������������������������������������������������ 60

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

Detached Rules and Mixins�������������������������������������������������������������������������������������������� 78


Operations on Numbers and Colors�������������������������������������������������������������������������������� 78
Merging Properties��������������������������������������������������������������������������������������������������������� 79
Looping Mixins��������������������������������������������������������������������������������������������������������������� 80
Functions������������������������������������������������������������������������������������������������������������������������ 81
List Functions��������������������������������������������������������������������������������������������������������������������������������������� 81
Color Functions������������������������������������������������������������������������������������������������������������������������������������� 82
Type Functions�������������������������������������������������������������������������������������������������������������������������������������� 85
Mathematical Functions����������������������������������������������������������������������������������������������������������������������� 86
String Functions����������������������������������������������������������������������������������������������������������������������������������� 87
Miscellaneous Functions���������������������������������������������������������������������������������������������������������������������� 88

Using Less with External Frameworks��������������������������������������������������������������������������� 89


Cardinal CSS����������������������������������������������������������������������������������������������������������������������������������������� 89
Ionic and Less��������������������������������������������������������������������������������������������������������������������������������������� 90
Semantic Grid System�������������������������������������������������������������������������������������������������������������������������� 90

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

Compass and CSS3������������������������������������������������������������������������������������������������������ 111


Background-Gradient������������������������������������������������������������������������������������������������������������������������� 112
Border Radius������������������������������������������������������������������������������������������������������������������������������������� 114
Opacity������������������������������������������������������������������������������������������������������������������������������������������������ 116
Text Shadow��������������������������������������������������������������������������������������������������������������������������������������� 117
Box Shadow���������������������������������������������������������������������������������������������������������������������������������������� 119
Transitions������������������������������������������������������������������������������������������������������������������������������������������ 121
Textfield Placeholder�������������������������������������������������������������������������������������������������������������������������� 124

Image-url( )������������������������������������������������������������������������������������������������������������������� 125


Image-width()������������������������������������������������������������������������������������������������������������������������������������� 126
Image-height()������������������������������������������������������������������������������������������������������������������������������������ 126

Image Sprites and Compass���������������������������������������������������������������������������������������� 127


Text Hiding�������������������������������������������������������������������������������������������������������������������� 129
Inline Images with Compass���������������������������������������������������������������������������������������� 132
CSS Transform�������������������������������������������������������������������������������������������������������������� 133
Working with Compass Extensions����������������������������������������������������������������������������������������������������� 135

Summary���������������������������������������������������������������������������������������������������������������������� 137

Index��������������������������������������������������������������������������������������������������������������������� 139

ix
About the Author

Anirudh Prabhu is a software engineer with over six years of industry


experience. He specializes in technologies such as HTML5, CSS3, PHP,
jQuery, Twitter Bootstrap, Less, and Sass, and he also has knowledge of
CoffeeScript and AngularJS. In addition to web development, he has been
involved in building training materials and writing tutorials for these
technologies.

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.

What Are Preprocessors?


A preprocessor takes one form of data and converts it to another. In the context of CSS, Less and Sass are
popular preprocessor languages, and they take input in the Less or SCSS format and produce processed CSS.
These CSS preprocessors empower CSS by removing the inefficiencies and making web sites easier
and more logical to build. The increase in popularity of preprocessors led to the rise of different frameworks
based on them; one of the more popular is Compass.
Figure 1-1 shows how a preprocessor takes a preprocessor-formatted file and translates it to CSS that
the browser understands.

Figure 1-1. Preprocessor-friendly file being translated to normal CSS

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.

Why Use Preprocessors?


CSS uses a declarative form of programming. This means that the styles that you write in the code are used
directly by the browser, without any compiling.
Many developers prefer to write stylesheets by hand. They believe that preprocessors would add extra
complexity to their workflow or would have a steep learning curve. But in reality, CSS preprocessors make
your daily work a lot easier. This book shows you how preprocessors can be more efficient for writing CSS
without disturbing your workflow.
Let’s consider an example where you need to replace multiple instances of a color that’s used sitewide
by finding it one instance at a time. Wouldn’t it be great if CSS could simplify this process? Something like
Listing 1-1 would be an example.

Listing 1-1. Reusable Variable for Color


$site-color:#eee;

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.

Listing 1-2. Output of Listing 1-1


a {
color: #eee;
}

#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.

Listing 1-3. Repeated Code Block


p{
padding-bottom:45px;
text-align:center;
}
footer {
padding-bottom:45px;
text-align:center;
}

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;
}

Listing 1-5. Output of Listing 1-4


p {
padding-bottom: 45px;
text-align: center;
}

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.

Listing 1-7. Sass Version of Listing 1-6


$black:#000;
.container {
background-color: $black;
background-color: rgba($black, 0.9);
}

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.

Listing 1-8. Implementation of CSS Features for Different Browsers


.container {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

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.

Misconceptions About CSS Preprocessors


This section discusses some common misconceptions that prevent developers from adopting preprocessors
in their daily workflow.

You Need To Be a Command-Line Expert


Many developers fear the command line. To use preprocessors, you require very little command-line
knowledge. In fact, you need to learn only a single command. Additionally, there are applications that
perform the same task without accessing the command line.

You Need To Change the Way You Write CSS


Developers have a way of writing stylesheets and organizing them. Since the SCSS syntax is the same as CSS,
developers don’t need to change the way they have been writing CSS.

Why Not Write CSS Directly?


The initial reaction of many developers when looking at CSS preprocessors is, “What’s wrong with writing
the CSS directly? We use CSS regularly and can fix all the usual layout issues and develop responsive web
sites that work across all devices.”
Well, preprocessors by themselves cannot produce better CSS. For example, if you lack knowledge as to
how to use CSS, preprocessors won’t be of any use in solving your issues. Preprocessors help you write CSS
in a fast and maintainable manner by adhering to the DRY principle.

5
Chapter 1 ■ Introduction to Preprocessors

Which Are the Known Preprocessors?


Let’s look at some known preprocessors available today, shown in Figure 1-2.

Figure 1-2. Known preprocessing frameworks

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.

Listing 1-10. Example Showing the Use of a Mixin Provided by Compass


el{
@include box-sizing(border-box);
}

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.

Listing 1-11. Example Showing Use Typographical Functionalities of Compass


el{
@include adjust-font-size-to(42px);
}

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.

Listing 1-12. Example Showing Compass’ Simple Way of Building Sprites


@import "icon/*.png";
@include all-icon-sprites;

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.

Listing 1-13. Example Showing Implementation of Variables Using SASS


$text-color:#333;
body {
color:$text-color;
}

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.

Listing 1-14. Output of Previous Code Snippet


body {
color:#333;
}

Similarly in Less CSS @ symbol is used to declare a variable.

Listing 1-15. Example Showing Implementation of Variables Using Less


@text-color:#333;
body{
color:$text-color;
}

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.

Listing 1-16. Example of Nesting in Sass or Less


nav {
ul {
margin: 0 auto;
padding: 10px 15px;
list-height: 1em;
}
}

8
Chapter 1 ■ Introduction to Preprocessors

The generated CSS will look like Listing 1-17.

Listing 1-17. Output of Previous Code Snippet


nav ul {
margin: 0 auto;
padding: 10px 15px;
list-height: 1em;
}

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.

Listing 1-18. Example of Importing Content of One File into Another


@import 'reset';
body {
background-color: #efefef;
}

■■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;
}

.container { @include rounded-corners(10px); }

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.

Listing 1-21. Example for Extend in Sass


.messagebox {
font-size:1em;
line-height:40px;
}

.successBox {
@extend .messagebox;
color:#0F0;
}

Listing 1-22. Example for Extend in Less


.messagebox {
font-size:1em;
line-height:40px;
}

.successBox {
&:extend(.messagebox);
color:#0F0;
}

Operators
Preprocessors provide standard math operators so that you can perform calculations on the fly. See
Listing 1-23.

Listing 1-23. Example Showing a Math Operation in Sass and Less


.mainContent {
float: left;
width: 750px / 960px * 100%;
}

10
Chapter 1 ■ Introduction to Preprocessors

Problems with CSS Preprocessors


This section discusses the features of preprocessors that are used inappropriately. You will see most
common problems that occur due to misuse or overuse of preprocessor features.

Problems with Mixins


Mixins are reusable blocks of code that are called wherever you need to include them. This is instead of
having to rewrite these blocks several times.
Consider a code snippet written in the Sass preprocessor, shown in Listing 1-24.

Listing 1-24. An Example of a Mixin Using Sass


@mixin notification {
color: #fff;
border-radius: 50%;
}

.errorNotification {
@include notification;
background:#F00;
}

.successNotification {
@include notification;
background: #0F0;
}

This code compiles to Listing 1-25.

Listing 1-25. Output of Listing 1-24


.errorNotification {
color: #fff;
border-radius: 50%;
background: #F00;
}

.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.

Extending Selectors or Using Mixins Can Hamper Maintenance


Extending classes or using mixins can cause maintenance issues. Since the properties are declared and used
in different places, the chances of changing a property without anticipating a complete impact are high. This
can cause layouts to break at any point.

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”.

Listing 2-1. Command for Installing Sass


sudo gem install sass

13
Chapter 2 ■ Introduction to Sass

After installation completes, you can verify it by running the command in Listing 2-2.

Listing 2-2. Command for Verifying Sass Installation


sass -v

This should give you the output shown in Figure 2-1.

Figure 2-1. Output of the sass-v command

Upon completing this installation, you are ready to use Sass.

Checking Other Versions of Sass


You can check for other available versions, beside latest version, by executing the command shown in
Listing 2-3.

Listing 2-3. Checking for Other Versions of Sass


gem list sass –a –r

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

The output of this gem list command is shown in Listing 2-4.

Listing 2-4. Output Text of gem list Command


sass (3.4.18, 3.4.17, 3.4.16, 3.4.15, 3.4.14, 3.4.13, 3.4.12, 3.4.11, 3.4.10, 3.4.9, 3.4.8,
3.4.7, 3.4.6, 3.4.5, 3.4.4, 3.4.3, 3.4.2, 3.4.1, 3.4.0, 3.3.14, 3.3.13, 3.3.12, 3.3.11,
3.3.10, 3.3.9, 3.3.8, 3.3.7, 3.3.6, 3.3.5, 3.3.4, 3.3.3, 3.3.2, 3.3.1, 3.3.0, 3.2.19,
3.2.18, 3.2.17, 3.2.16, 3.2.15, 3.2.14, 3.2.13, 3.2.12, 3.2.11, 3.2.10, 3.2.9, 3.2.8, 3.2.7,
3.2.6, 3.2.5, 3.2.4, 3.2.3, 3.2.2, 3.2.1, 3.2.0, 3.1.21, 3.1.20, 3.1.19, 3.1.18, 3.1.17,
3.1.16, 3.1.15, 3.1.14, 3.1.13, 3.1.12, 3.1.11, 3.1.10, 3.1.9, 3.1.8, 3.1.7, 3.1.6, 3.1.5,
3.1.4, 3.1.3, 3.1.2, 3.1.1, 3.1.0)
sass-960gs (1.0.0, 0.1.0, 0.0.3, 0.0.2, 0.0.1)
sass-a11y (0.1.0)
sass-aleksi (0.1.2)
sass-align (0.1.1, 0.1.0)
sass-buttons (0.1.2, 0.1.1)
sass-capucine (0.0.3, 0.0.2, 0.0.1)
sass-color-helpers (2.0.0)
sass-color-schemes (0.4.0, 0.3.1, 0.3.0, 0.2.0, 0.1.0)
sass-extractor (0.0.1)
sass-extras (1.1.0, 1.0.2, 1.0.1, 1.0.0, 0.0.1)
sass-flexi (1.0.6, 1.0.5, 1.0.4, 1.0.3, 1.0.2, 1.0.1, 1.0.0)
sass-fontimage (0.1.1, 0.1.0)
sass-getunicode (1.0, 0.0.2, 0.0.1, 0.0.0)
sass-globbing (1.1.1, 1.1.0, 1.0.0)
sass-globbing-pr-20 (1.1.2)
sass-images (0.0.2, 0.0.1)
sass-import_once (0.1.3, 0.1.2, 0.1.0)
sass-json-vars (0.3.3, 0.3.2, 0.3.1, 0.3.0, 0.2.1, 0.2.0, 0.1.0, 0.0.1)
sass-list-maps (1.0.0, 0.9.9, 0.9.7, 0.9.6, 0.9.5, 0.9.3, 0.9.2, 0.9.1)
sass-material-colors (0.0.5, 0.0.4.2, 0.0.4.1, 0.0.4, 0.0.3, 0.0.2, 0.0.1)
sass-media_query_combiner (0.0.7, 0.0.6, 0.0.5, 0.0.4, 0.0.3, 0.0.2, 0.0.1)
sass-mediaqueries-rails (1.3, 1.2.3.1, 1.2.3)
sass-mixin-collection-rails (0.0.11, 0.0.1)
sass-pantones (0.0.1)
sass-pygments-rails (0.1)
sass-rails (5.0.4, 5.0.3, 5.0.2, 5.0.1, 5.0.0, 4.0.5, 4.0.4, 4.0.3, 4.0.2, 4.0.1, 4.0.0,
3.2.6, 3.2.5, 3.2.4, 3.2.3, 3.2.2, 3.2.1, 3.2.0, 3.1.7, 3.1.6, 3.1.5, 3.1.4, 3.1.3, 3.1.2,
3.1.1, 3.1.0)
sass-rails-bootstrap (2.2.2.3, 2.2.2.2, 2.2.2.1, 2.2.2, 2.2.1, 2.1.1, 2.1.0.1, 2.1.0, 2.0.4,
2.0.2)
sass-rails-source-maps (0.1.0, 0.0.4, 0.0.3, 0.0.2, 0.0.1)
sass-rails3 (4.0.1)

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.

Listing 2-6. Installing the Prerelease Version


sudo gem install sass –pre

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.

Listing 2-7. Command for Uninstalling Sass


gem uninstall sass –-version versionnumber

An Alternative to the Command Line


Besides The terminal method, there are GUI applications that will run and compile Sass, for people who are
scared to operate or have no prior experience using terminals. There are free as well as paid variants of such
apps for various platforms. Some of these are as follows
• Codekit (Paid) (available for Mac only)
• Compass (Paid) (available for Mac, Windows, and Linux)
• Prepros (Paid) (available for Mac, Windows, and Linux)
• Mixtures (Free) (available for Mac only)
• Scout (open source) (available for Mac, Windows, and Linux)
• Koala (Free) (available for Mac, Windows, and Linux)

Compiling the sass File


Once you have installed Sass, you can start coding and compiling. In order to do so, you must specify which
file Sass should watch. This can be done using the command shown in Listing 2-8.

Listing 2-8. Sass Command to Watch and Compile a File


sass --watch style.scss:style.css

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

M ONSIEUR ARMAND MICHEL—seated before his newly installed


Titian—was in the act of saying to himself that if its acquisition
could not, with entire accuracy, be viewed as an unqualified bargain,
it had been, at least, an indisputable stroke of diplomacy, when his
complacent meditation was interrupted by the entrance of Arsène. It
was the first time that Monsieur Michel had seen his new servant in
his official capacity, and he was not ill-pleased. Arsène was in
flawless evening dress, in marked contrast to the objectionably
flamboyant costume in which, on the preceding evening, he had
made application for the position of valet-maître d'hôtel, left vacant
by the fall from grace of Monsieur Michel's former factotum. That
costume had come near to being his undoing. The fastidious Armand
had regarded with an offended eye the brilliant green cravat, the
unspeakable checked suit, and the painfully pointed chrome-yellow
shoes in which the applicant for his approval was arrayed, and more
than once, in the course of conversation, was on the point of putting
a peremptory end to the negotiations by a crushing comment on
would-be servants who dressed like café chantant comedians. But
the reference had outweighed the costume. Monsieur Michel did not
remember ever to have read more unqualified commendation.
Arsène Sigard had been for two years in the service of the Comte de
Chambour, whose square pink marble hôtel on the avenue de
Malakoff is accounted, in this degenerate age, one of the sights of
Paris; and this of itself, was more than a little. The Comte did not
keep his eyes in his pockets, by any manner of means, when it came
to the affairs of his household, and apparently there was nothing too
good for him to say about Arsène. Here, on pale blue note-paper,
and surmounted by the de Chambour crest, it was set forth that the
bearer was sober, honest, clean, willing, capable, quiet, intelligent,
and respectful. And discreet. When the Comte de Chambour gave
his testimony on this last point it meant that you were getting the
opinion of an expert. Monsieur Michel refolded the reference, tapped
it three times upon the palm of his left hand, and engaged the
bearer without further ado.
Now, as Arsène went quietly about the salon, drawing the curtains
and clearing away the card table, which remained as mute witness
to Monsieur Michel's ruling passion, he was the beau idéal of a
gentleman's manservant,—unobtrusive in manner and movement,
clean-shaven and clear-eyed, adapting himself without need of
instruction to the details of his new surroundings. A less complacent
person than Armand might have been aware that, while he was
taking stock of Arsène, Arsène was taking stock, with equal
particularity, of him. And there was an unpleasant slyness in his
black eyes, a something akin to alertness in his thin nostrils, which
moved like those of a rabbit, and seemed to accomplish more than
their normal share of conveying to their owner's intelligence an
impression of exterior things. Also, had Monsieur Michel but
observed it, his new servant walked just a trifle too softly, and his
hands were just a trifle too white and slender. Moreover, he had a
habit of smiling to himself when his back was turned, which is an
undesirable thing in anybody, and approaches the ominous in a
valet-maître d'hôtel. But Monsieur Michel was far too much of an
aristocrat to have any doubt of his power to overawe and impress
his inferiors, or to see in the newcomer's excessive inconspicuity
anything more than a commendable recognition of monsieur's
commanding presence. So, when Arsène completed his work and
had shut the door noiselessly behind him, his master rubbed his
hands and said "Ter-rès bien!" in a low voice, this being his
superlative expression of satisfaction. Had his glance been able to
penetrate his salon door, it would have met, in the antichambre, with
the astounding spectacle of his new servant in the act of tossing
monsieur's silk hat into the air, and catching it, with extreme
dexterity, on the bridge of his nose. Unfortunately, the other side of
the door is something which, like the future and the bank-accounts
of our debtors, it is not given us to see. So Monsieur Michel repeated
his "Ter-rès bien!" and fell again to contemplating his Titian.
Yes, undoubtedly, it had been a great stroke of diplomacy. The
young Marchese degli Abbraccioli was not conspicuous for his
command of ready money, but his father had left him the finest
private collection of paintings in Rome, and this, in consequence of
chronic financial stress, was gradually passing from the walls of his
palazzo in the via Cavour into the possession of an appreciative but
none too extravagant government. It had been an inspiration, this
proposal of Monsieur Michel's to settle his claim upon the Marchese
for his overwhelming losses at baccarat by taking over one of the
two Titians which flanked the chimney-piece in his study. The young
Italian had assented eagerly, and had supplemented his
acquiescence with a proposal to dispose of the pendant for
somewhat more material remuneration than canceled
reconnaissances. But Armand Michel had undertaken it before, this
delicate task of getting objets d'art over the Italian frontier—yes, and
been caught in the act, too, and forced to disgorge. For the moment,
it was enough to charge himself with one picture, on the given
conditions, without risking hard cash in the experiment. Later—well,
later, one would see. And so, a rivederla, mio caro marchese.
Monsieur Michel fairly hugged himself as he thought of his success.
Mon Dieu, quelle génie, that false bottom to his trunk! He had come
safely through them all, the imbecile inspectors, and now his
treasure hung fairly and finally upon his wall, smiling at him out of
its tapestry surroundings. It was épatant, truly, and moreover, all
there was of the most calé. Only one small cloud of regret hung
upon the broad blue firmament of his satisfaction—the other picture!
It had been so easy. He might as well have had two as one. And
now, without doubt, the imbecile Marchese would sell the pendant to
the imbecile government, and that would be the end of it so far as
private purchase was concerned. Monsieur Michel rose from his chair
with a gesture of impatience, and, drawing the curtain back from the
window, looked out lugubriously upon the March cheerlessness of
the place Vendôme. Little by little, a most seductive plan formed
itself in his mind. After all, why not? A couple of weeks at Monte
Carlo, a week at Sorrento, and a fortnight at Rome, in which to win
the Titian from the Marchese degli Abbraccioli, by baccarat if
possible, or by banknotes should fortune prove unkind. It was the
simplest thing in the world, and he would avoid the remainder of the
wet weather and be back for the opening of Longchamp. And
Monsieur Michel rubbed his hands and said "Ter-rès bien!" again,
with much emphasis.
When, a week later, Arsène was informed of Monsieur's intention to
leave him in sole charge of his apartment for a time, he received the
intelligence with the dignified composure of one who feels himself
worthy of the confidence reposed in him. The cook was to have the
vacation for which she had been clamoring, that she might display to
her relatives in Lille the elaborate wardrobe which was the result of
her savings during three years in Monsieur Michel's employ.
Perfectly. And the apartment was to be aired and dusted daily, as if
monsieur himself were there. And visitors to be told that monsieur
was returning in a month. And letters to be made to follow monsieur,
to Monte Carlo at first, and then to Rome. But perfectly; it was
completely understood. Arsène bowed a number of times in
succession, and outwardly was as calm as a tall, candid-faced clock,
being wound up to run for a specified time independent of
supervision. But beneath that smooth and carefully oiled expanse of
jet-black hair a whole colony of the most fantastic ideas suddenly
aroused themselves and began to elbow each other about in a
veritable tumult.
Monsieur Michel took his departure in a whirl of confusion, losing a
quantity of indispensable articles with exclamations of despair, and
finding them the next moment with cries of satisfaction. Eugénie,
the cook, compactly laced into a traveling dress of blue silk, stood at
the doorway to bid her master good-by, and was run into at each
instant by the cabman or the concierge or Monsieur Michel himself,
each of whom covered, at top speed, several kilometres of stair and
hallway, in the stupendous task of transferring a trunk, a valise, a
hat-box, a shawl-strap, and an umbrella from the apartment to the
carriage below. On the surface of this uproar, the presence of Arsène
swam as serenely as a swan on a maelstrom. He accompanied his
master to the gare de Lyon, and the last object which met the
anxious eyes of Monsieur Michel, peering out from one of the first-
class carriages of the departing express, was his new servant,
standing upon the platform, as unmoved by the events of the
morning as if monsieur had been passing from the dining room to
take coffee in the salon instead of from Paris to take breakfast in
Marseille. The sight of him was intensely soothing to the fevered
spirit of Monsieur Michel, on whom the details of such a departure
produced much the same effect as do cakes of soap when tossed
into the mouth of an active geyser.
"He is calm," he said to himself, rubbing his hands. "He is very calm,
and he will not lose his head while I am gone. Ter-rès bien!"
But the calm of Arsène was the calm of thin ice over swiftly rushing
waters. As the polished buffers of the last carriage swung out of
sight around the curve with a curiously furtive effect, like the eyes of
an alarmed animal, slipping backward into its burrow, he clenched
the fingers of his right hand, and slipping his thumb nail under the
edge of his upper teeth, drew it forward with a sharp click. At the
same time he said something to his vanished master in the second
person singular, which is far from being the address of affection on
the lips of a valet-maître d'hôtel.
Wheeling suddenly after this singular manifestation, Monsieur Sigard
found himself the object of close and seemingly amused scrutiny on
the part of an individual standing directly behind him. There was
something so extremely disconcerting in this gentleman's
unexpected proximity, and in his very evident enjoyment of the
situation, that Arsène was upon the point of turning abruptly away,
when the other addressed him, speaking the colloquial French of
their class, with the slightest possible hint of foreign accent.
"Bah, vieux! Is it that I do not know what they are, the patrons? Oh,
lalà!"
"Avec ça! There are some who have it, an astounding audacity!" said
Arsène to the air over the stranger's head.
"Farceur!" replied the stranger, to the air over Arsène's. And then—
"There are two parrakeets that have need of plucking across the
way," he added, reflectively.
"There are two empty sacks here to put the feathers in," answered
Arsène, with alacrity; and ten minutes later, oblivious to the chill
damp of the March morning, Monsieur Sigard and his new-found
acquaintance, seated at a little table in front of a near-by wine-shop,
were preparing in company the smoky-green mixture of absinthe
and water which Paris slang has dubbed a parrakeet. On the part of
Arsène the operation was performed with elaborate solicitude, and
as he poured a tiny stream of water over the lump of sugar on the
flat spoon balanced deftly across the glass, he held his head tipped
sidewise and his left eye closed, in the manner of a contemplative
fowl, and was oblivious to all but the delectable business of the
moment.
But his companion, while apparently deeply engaged in the
preparation of his own beverage, was far from being wholly
preoccupied thereby. He was a man shorter by an inch or two than
Monsieur Michel's maître d'hôtel, dressed in the most inconspicuous
fashion, and with an air of avoiding any emphasis of voice or gesture
which would be apt to attract more than casual attention to the
circumstance of his existence. There was something about him
vaguely suggestive of a chameleon, an instant harmonizing of his
appearance and manner with any background whatsoever against
which he chanced to find himself placed, and a curious clouding of
his eyes when unexpectedly they were met by those of another,
which lent him an immediate air of profound stupidity. No doubt his
long practice in this habit of self-obliteration made him doubly
appreciative of Arsène's little outburst of ill-feeling on the platform of
the gare de Lyon. A man who would do that in public—well, he had
much to learn!
Just now, however, this gentleman's eyes were very bright, though
they had dwindled to mere slits; and he followed every movement of
the unconscious Arsène with short, swift glances from beneath his
drooping lids, as, bit by bit, the lumps of sugar melted under the
steady drip of the trickling water, and the opalescent mixture
mounted toward the brims. He knew but two varieties of absinthe
drinker, this observant individual,—the one who progressed, under
its influence, from cheerful candor to shrewdest insight into the
motives of others, and most skilful evasion of their toils; the other
whom, by easy stages, it led from obstinate reserve to the extreme
of careless garrulity. At this moment he was on the alert for
symptoms.
Arsène looked up suddenly as the last morsel of his sugar melted,
and, lifting his glass, dipped it before the eyes of his new friend.
"To your health,—Monsieur—?" he said, in courteous interrogation.
"Fresque," said the other.
"Bon! And I, Monsieur Fresque, am Sigard, Arsène Sigard, maître
d'hôtel, at your service, of the type who has just taken himself off,
down there."
And he indicated the imposing pile of the gare de Lyon with his
thumb, and then, closing his eyes, took a long sip of his absinthe,
and replacing the glass upon the table, plunged his hands into his
pockets and stared off gloomily toward the Seine.
"Poof!" he said, "but I am content that he is gone. What a filthiness,
a rich man—what?"
"Not to be denied," agreed Monsieur Fresque. "There is not a foreign
sou's worth of delicacy in the whole lot!"
"Mazette! I believe thee," answered the other, much pleased.
Fresque's thin lips relaxed the veriest trifle at the familiarity, and he
lit a cigarette and gazed vacantly into space.
"But what dost thou expect?" he observed, with calm philosophy.
It appeared that what Arsène expected was that honest folk should
not work from seven to ten, in an ignoble box of a pantry, on boots,
and silver, and what not, he demanded of him, name of a pipe! and
dust, and sweep, and serve at table, good heaven! and practice a
species of disgusting politeness to a type of old engraving like
Monsieur Armand Michel. And all, oh, mon Dieu! for the crushing
sum of twenty dollars a month, did he comprehend? while the
animal in question was sowing his yellow buttons by fistfuls.
Mazette! Evidently, he himself was not an eagle. He did not demand
the Louvre to live in, for example, nor the existence lalala of Emile
Loubet—what? but it was not amusing, he assured him, to be in the
employ of the great revolting one in question. Ah, non!
"Eiffelesque!" succinctly commented Monsieur Fresque.
But, said Arsène, there was another side to the question, and he
himself, it went without saying, was no waffle-iron, speaking of
stupidity. He had not been present the day fools were distributed.
Oh, far from that! In consequence, it was to become hump-backed
with mirth, that part of his life passed behind the back of the
example of an old Sophie whom he had the honor to serve. He had
not forgotten how to juggle since he traveled with a band of
mountebanks. And there were the patron's plates,—at one hundred
francs the piece, good blood! Also he smoked the ancient
cantaloupe's cigarettes, and as for the wines—tchutt! Arsène kissed
his finger-tips and took a long sip of absinthe.
"He is gone for long?" inquired Fresque.
Ah, that! Who knew? Six weeks at least. And meanwhile might not a
brave lad amuse himself in the empty apartment—eh? Oh, it would
be life in a gondola, name of a name of a name!
The conversation was prolonged for an hour, Arsène growing more
and more confidential under the seductive influence of his parrakeet,
and his companion showing himself so heartily in accord with his
spirit of license, that, by degrees, he captured completely the fancy
of the volatile valet, and was permitted to take his departure only on
the condition of presenting himself in the place Vendôme that
evening for the purpose of smoking the cantaloupe's cigarettes and
seeing Arsène juggle with the hundred-franc plates.
Monsieur Fresque was as good as his word. He put in an appearance
promptly at eight o'clock, hung his hat and coat, at his host's
invitation, on a Louis Quinze applique, and made himself
comfortable in a chaise longue which—on the guarantee of Duveen
—had once belonged to the Pompadour. Arsène outdid himself in
juggling, and afterwards they cracked a bottle of Château Laffitte
and drank it with great satisfaction out of Salviati glasses, topping
off the entertainment with Russian kümmel and two of Monsieur
Michel's cigars. Arsène, in his picturesque idiom, expressed himself
as being tapped in the eye with his new friend to the extent of being
able to quit him no longer, and forthwith Monsieur Hercule Fresque
took up his quarters in the bedroom of the cantaloupe, his host
established himself in Monsieur Michel's Empire guest chamber, and
the "life in a gondola" went forward for five weeks to the supreme
contentment of both parties.
Now it is a peculiarity of life in a gondola, as is known to all who
have sampled its delights, that, while it lasts, consideration of past
and future alike becomes dulled, and one loses all sense of
responsibility in the lethal torpor of the present. So it was not until
Arsène received a letter from Monsieur Michel, announcing his
return, that he began to figure up the possible consequences of his
experiment. They were, as he gloomily announced to Hercule,
stupefying to the extent of dashing out one's brains against the wall.
But one bottle of Château Laffitte remained, and none whatever of
Russian kümmel. Moreover, the brocade of the chaise longue was
hopelessly ruined by the boots of the conspirators, and the
enthusiasm of Arsène's juggling had reduced by fifty per cent the set
of Sèvres plates. What was to be done, bon Dieu, what was to be
done?
Monsieur Fresque, having carefully perused a letter with an Italian
stamp, which had come by the evening mail, revolved the situation
in his mind, slowly smoking the last of the cantaloupe's cigars, and
glancing from time to time at the despondent figure of his host, with
his eyes narrowed to mere slits. Had the fish been sufficiently
played? He reeled in a foot or so of line by way of experiment.
"What, after all, is a situation?" he said. "Thou wilt be discharged,
yes. But afterwards? Pah! thou wilt find another. And thou hast thy
rigolade."
"Ah, that!" replied Arsène with a shrug. "I believe thee! But thinkest
thou my old melon will find himself in the way of glueing the ribbon
of the Légion on me for what I have done? I see myself from here,
playing the harp on the bars of La Maz!"
"La vie à Mazas, c'est pas la vie en gondole," observed Hercule
philosophically.
"Tu parles!"
Hercule appeared to take a sudden resolve. He swung his feet to the
floor, and bending forward in the chaise longue, began to speak
rapidly and with extreme earnestness.
"Voyons, donc, mon gars, thou hast been foolish, but one must not
despair. What is done in France is never known in Italy. And here
thou art surrounded by such treasures as the imbeciles of foreigners
pay fortunes for, below there. Take what thou hast need of,—a trunk
of the patron's, some silver, what thou canst lay hands on of gold
and brass and enamel, whatever will not break—and get away
before he returns. In Milan thou canst sell it all, and get another
place. I have friends there, and thou shalt have letters. Voilà!"
"But one must have money," replied Arsène, brightening,
nevertheless. "And that is lacking me."
Hercule seemed to ponder this objection deeply. Finally, with a sigh
of resignation, he spoke again.
"B'en, voilà! Thou hast been my friend, is it not so? Hercule Fresque
is not the man to be ungrateful. I am poor, and have need of my
little savings—But, there! it is for a friend—pas? Let us say no
more!" And he thrust a roll of banknotes into the hands of the
stupefied Arsène.
The evening was spent in arranging the details of the flight. Arsène
produced a serviceable trunk from the storeroom, and in this the
two men placed a great variety of the treasures which Monsieur
Michel had accumulated during twenty years of patient search and
exorbitant purchase. Squares of priceless tapestry, jeweled watches
and snuff boxes, figurines of old Sèvres, ivories cunningly carved
and yellow with age, madonnas of box-wood, and wax, and ebony,—
all were carefully wrapped in newspapers and stowed away; and to
these Arsène added a dozen of his master's shirts, two suits of
clothes, and a box of cigarettes. But when all the available material
had been appropriated there yet remained an empty space below
the tray. It would never do to have the treasures knocking about on
the way. Arsène proposed a blanket—or, better yet, one of Monsieur
Michel's overcoats. But Hercule, after rearranging the trunk so as to
make the empty space of different form, turned suddenly to his
companion, who was picking nervously at his fingers and watching
the so fruitful source of suggestion with a pathetic air of entreaty,
and clapped him gleefully upon the chest.
"A painting!" he exclaimed.
Complete demoralization seemed to have taken possession of
Arsène. He was very pale, and his eyes constantly sought the salon
door as if he expected the object of his ingenious epithets to burst in
at any moment, with the prefect and all his legions at his heels.
"A painting?" he repeated blankly; "but how, a painting?"
But Monsieur Fresque had already mounted nimbly on a chair and
lifted the cherished Titian of Monsieur Michel from its place against
the tapestry. There was no further need of persuasion. The moment
had come for action; and, seizing a hammer, he began to wrench off
the frame, talking rapidly between short gasps of exertion.
"But certainly, a painting. This one is small—ugh!—but who can say
how valuable? They sell readily down there, these black daubs. Ah!
By rolling, it will fill the empty space, seest thou, and later it may
mean a thousand francs. One does not do things by—umph!—by
halves in such a case. Sacred nails! One would say they had been
driven in for eternity! Oof! Thou art fortunate to have me to advise
thee, great imbecile. Mayhap this is worth all the rest. Pig of a
frame, va! It is of iron. Ugh! He will be furious, thy patron, but what
of that? In Italy thou wilt hear no more of it. Still one nail. Come
away, then, type of a cow! Enfin!"
With one final effort he tore off the last fragment of frame, peeled
the canvas from the back-board, and, rolling it carefully, tucked it
into the empty space, replaced the tray, and closed the trunk with a
snap.
"Voilà!" he said, straightening himself and turning a red but
triumphant face to the astounded maître d'hôtel.
"Now for the letters," he added, seating himself at Monsieur Michel's
desk and beginning to scribble busily. "Do thou go for a cab, and at
a gallop. It has struck half past ten and the Bâle rapide leaves the
gare de l'Est at midnight."
Hardly had the door of the apartment closed upon the demoralized
valet when Monsieur Fresque hastily shoved to one side the note he
had begun, and, writing a sentence or two upon another slip of
paper, wrapped the latter about a two-sou piece, and went quietly to
the salon window. Opening this cautiously, he found a fine rain
falling outside, and the eastern half of the square deserted save for
two figures,—one the flying form of Arsène, cutting across a corner
into the rue Castiglione in search of a cab, and the other that of a
man muffled in a heavy overcoat and with a slouch hat pulled well
over his eyes, who was lounging against the railing of the Column,
and who, as Fresque opened the window, shook himself into activity
and stepped nimbly out across the wide driveway. Hercule placed
the paper containing the two-sou piece upon the window sill and
with a sharp flick of his forefinger sent it spinning down into the
square. The man in the slouch hat stooped for an instant in passing
the spot where it lay, and Monsieur Fresque, softly closing the
window, stretched his arms upward into a semblance of a gigantic
letter Y, and indulged in a prodigious yawn.
"Ça y est!" said he.
Papa Briguette had long since climbed into his high bedstead, in the
loge de concierge, when, for the second time in fifteen minutes, he
was aroused by the voice of Arsène calling, "Cordon, s'il vous plaît!"
in the main hallway, and, reaching from under his feather coverlid,
pressed the bulb which unlocked the street-door.
"Quel coureur, que ce gars!" grumbled the worthy man to his fat
spouse, snoring complacently at his side. "I deceive myself if, when
Monsieur Michel returns, thou dost not hear a different story."
"Awr-r-r-r!" replied Maman Briguette.
On the way to the gare de l'Est Arsène recovered the better part of
his lost composure, and listened with something akin to cheerfulness
to the optimistic prognostications of his companion. By the time the
precious trunk was registered and he had secured his seat in a
second-class compartment of the Bâle rapide, he was once more in
high feather and profuse in expressions of gratitude, as he smoked a
farewell cigarette with Fresque while waiting for the train to start.
"Thou canst believe me, mon vieux," he protested. "It is not a little
thing that thou hast done, name of a name. Ah, non! It was the act
of a brave comrade, that I assure thee. Et voyons! When I have sold
the effects down there, thou shalt have back thy little paper
mattress, word of honor! Yes, and more—thy share of the gain, mon
zig!"
He grasped the other's hand fervently as a passing guard threw
them a curt "En voiture, messieurs!" and seemed on the point of
kissing him farewell. There was some confusion attendant upon his
entering the compartment, owing to the excessive haste of a man
muffled in a heavy overcoat and with a slouch hat pulled well over
his eyes, who arrived at the last moment and persisted in scrambling
in, at the very instant chosen by Monsieur Sigard. The latter
immediately reappeared at the window, and, as the train began to
move, shouted a few final acknowledgments at his benefactor.
"B'en, au r'voir, vieux! And I will write thee from below there, thou
knowest. A thousand thanks. Fear not for thy blue paper—what?
Thou shalt have it back, sou for sou, name of a name!"
He was almost out of hearing now, his face a cream-colored splotch
against the deep maroon of the railway carriage, and, drawing out a
gaudy handkerchief, he waved it several times in token of farewell.
"I shall never forget thee, never!" he cried, as a kind of afterthought
and valedictory in one.
"Ah, ça!" said Monsieur Fresque to himself, as Arsène's face went
out of sight, "that I well believe!"
Yet, so inconstant is man, the promised letter from "below there"
never reached him. Another did, however, and it was this which he
might have been observed reading to a friend, with every evidence
of the liveliest satisfaction, one week later, at a rear table before the
Taverne Royale. One would hardly have recognized the plainly,
almost shabbily dressed comrade of Arsène, with his retiring
manners and his furtive eyes, in this extremely prosperous
individual, in polished top hat, white waistcoat and gaiters, and
gloves of lemon yellow. His companion was equally imposing in
appearance, and it was apparent that he derived as much
amusement from listening to Monsieur Fresque's epistle as did the
latter from reading it aloud, which he did with the most elaborate
emphasis, calling the other's attention to certain sentences by
tapping him lightly upon the arm and repeating them more slowly.
The letter was in Italian, and ran as follows:—

Milan, April 20, 1901.


My good Ercole,—I am leaving here today for Rome, where
the case of the government against the Marchese degli
Abbraccioli is to come on next week, but before I do so I
must write you of the last act in the little comedy of
Arsène Sigard. I never lost sight of him from the moment
we left Paris, and when he found I was also on my way to
Italy, he became confidential, and, in exchange for certain
information which I was able to give him about Milan, etc.,
told me a long story about himself and his affairs, which I
found none the less amusing for knowing it to be a tissue
of lies. The time passed readily enough, but I was relieved
when we started over the St. Gothard, because I knew
then that the game was as good as played. We arrived at
Chiasso on time (two o'clock) and I found Sassevero on
the platform when I jumped out. He had come on from
Rome the night before, and was in a positive panic
because Palmi, who had been watching old Michel there,
had lost him somehow and nobody knew where he'd
gone. He might have come through on any train, of
course, and Sassevero didn't even know him by sight.
Naturally, our little business with Sigard was soon done.
Cagliacci is still chief of customs at Chiasso, and he simply
confiscated the trunk and everything in it, though, of
course, the government wasn't after anything but the
picture. There were two hours of argument over the
disposition of Sigard, but it seemed best to let him go and
nothing further said, which he was only too glad to do.
The Old Man is shy of diplomatic complications, it
appears, and he had told Sassevero to frighten the chap
thoroughly and then let him slip off.
Here comes in the most remarkable part of all. Just as
Sigard was marching out of the room, in came the
Lucerne express, and our friend walks almost into the
arms of an oldish gentleman who had jumped out of a
carriage and was hurrying into the customs room.
"Bon Dieu!" said this individual, "what does this mean?"
"What does what mean?" put in Sassevero like a flash,
and the other was so taken by surprise that, before he
had time to think what he was saying, the secret was out.
"That's my valet de chambre!" he said.
"Really?" said Sassevero. "Bravo! Then you're the
gentleman with the Marchese degli Abbraccioli's second
Titian in the false bottom of his trunk!"
Could anything have been more exquisite? The old chap is
out some hundred thousand lire on the transaction,
because, of course, Cagliacci confiscated it like the other.
It was a sight to remember,—the two pictures side by side
in his room, and Michel and Sigard cursing each other
above them! We all went on to Milan by the next train,
except Sigard, who did the prudent thing on the
appearance of his padrone, and disappeared, but Michel's
appeal to the French consulate was of no effect. The
consul told him flat that he was going directly against the
law in trying to get old works of art over the frontier, and
that he couldn't plead ignorance after the detail of the
false bottom.
Sassevero says the Old Man is immensely pleased with the
way you handled your end of the affair. The funny part of
it is that Sigard apparently hadn't the most remote
suspicion of your being in any way involved in his
catastrophe.
Your most devoted,
Cavaletto.
Little Tapin

H IS name was Jean-Marie-Michel Jumière, and the first eighteen


years of his life were spent near the little Breton village of
Plougastel. They were years of which each was, in every respect,
like that which went before, and, in every respect, like that which
followed after: years, that is to say, devoid of incident, beyond the
annual pardon, when the peasants came from far and near to the
quaint little church, to offer their prayers at the cemetery Calvary,
and display their holiday costumes, and make love, and exchange
gossip on the turf round about. It is a land of wide and wind-swept
hillsides, this, imbued with the strange melancholy of a wild and
merciless sea, and wherein there are no barriers of convention or
artificiality between earth and sky, man and his Maker; but Jean-
Marie loved it for its very bleakness. From the doorway of his
mother's cottage, standing, primly white, in the midst of great rocks
and strawberry fields, with its thatched roof drawn down, like a
hood, about its ears, as if in protection against the western gales, he
could look out across the broad harbor of Brest to the Goulet, the
gateway to that great Atlantic whose mighty voice came to his ears
in stormy weather, muttering against the barrier of the shore. And
this voice of the sea spoke to Jean-Marie of many things, but, most
of all, of the navies of France, of the mighty battleships which went
out from Brest to unimagined lands, far distant, China, America, and
the southern islands, whence comrades, older than himself, brought
back curious treasures, coral, and shells, and coins, and even
parrots, to surprise the good people of Plougastel. He looked at
them enviously, as they gathered about the door of Père Yvetot's
wine-shop, when they were home on leave, and spun sailor yarns for
his delighted ears. How wonderful they were, these men who had
seen the world,—Toulon, and Marseille, and Tonkin,—how wonderful,
with their wide, flapping trousers, and their jaunty caps, with a white
strap and a red pompon, and their throats and breasts, showing
ruddy bronze at the necks of their shirts!
At such times Jean-Marie would join timidly in the talk, and,
perhaps, speak of the time when he, too, should be marin français,
and see the world. And the big Breton sailors would laugh good-
naturedly, and slap him on the shoulder, and say: "Tiens! And how
then shall the cruisers find their way into Brest harbor, when the
little phare is gone?" For it was a famous joke in Plougastel to
pretend that Jean-Marie, with his flaming red hair, was a lighthouse,
which could be seen through the Goulet, far, far out at sea.
But Jean-Marie only smiled quietly in reply, for he knew that his day
would come. At night, the west wind, sweeping in from the Atlantic,
and rattling his little casement, seemed to be calling him, and it was
a fancy of his to answer its summons in a whisper, turning his face
toward the window.
"All in good time, my friend. All in good time!"
Again, when he was working in the strawberry fields, he would strain
his eyes to catch the outline of some big green battleship, anchored
off Brest, or, during one of his rare visits to the town, lean upon the
railing of the pont tournant, to watch the sailors and marines moving
about the barracks and magazines on the quais of the porte
militaire. All in good time, my friends; all in good time!
Only, there were two to whom one did not speak of these things,—
the Little Mother, and Rosalie Vivieu. Already the sea had taken three
from Madame Jumière—Baptiste, her husband, and Philippe and
Yves, the older boys, who went out together, with the fishing fleet,
seven years before, in the staunch little smack La Belle Fortune. She
had been cheerful, even merry, during the long weeks of waiting for
the fleet's return, and, when it came in one evening, with news of La
Belle Fortune cut down in the fog by a North Cape German Lloyd,
and all hands lost, she had taken the news as only a Breton woman
can. Jean-Marie was but twelve at the time, but there is an intuition,
beyond all reckoning in years, in the heart of a fisher's son, and
never should he forget how the Little Mother had caught him to her
heart that night, at the doorway of their cottage, crying, "Holy
Saviour! Holy Saviour!" with her patient blue eyes upturned to the
cold, grey sky of Finistère! As for Rosalie, Jean-Marie could not
remember when they two had not been sweethearts, since the day
when, as a round-eyed boy of six, he had watched Madame Vivieu
crowding morsels of blessed bread into her baby mouth at the
pardon of Plougastel, since all the world knows that in such manner
only can backwardness of speech be cured. Rosalie was sixteen now,
as round, and pink, and sweet as one of her own late peaches, and
she had promised to marry Jean-Marie some day. For the time being,
he was allowed to kiss her only on the great occasion of the pardon,
but that was once more each year than any other gars in Plougastel
could do, so Jean-Marie was content. No, evidently, to these two
there must be no mention of his dreamings of the wide and
wonderful sea, of the summons of the impatient western wind, of
those long reveries upon the pont tournant.
So Jean-Marie hugged his visions to his heart for another year,
working in the strawberry fields, gazing out with longing eyes toward
the warships in the harbor, and whispering, when the fingers of the
wind tapped upon his little casement: "All in good time, my friend.
All in good time!"
And his day came at last, as he had known it would. But with what a
difference! For there were many for the navy that spring. Plougastel
had nine, and Daoulas fifteen ready, and Hanvec seven, and Crozon
twenty-one, and from Landerneau, and Châteaulin, and Lambezellec,
and le Folgoet came fifty more, and from Brest itself, a hundred; and
all of these, with few exceptions, were great, broad-shouldered lads,
strong of arm and deep of chest, and so the few who were slender
and fragile, like Jean-Marie, were assigned to the infantry, and sent,
as is the custom, far from Finistère, because, says the code, change
of scene prevents homesickness, and what the code says must, of
course, be true.
When Madame Jumière heard this she smiled as she was seldom
known to smile. The Holy Virgin, then, had listened to her prayers.
The gars was to be a piou-piou instead of a col bleu, after all! The
great sea should not rob her again, as it had robbed her in the time.
It was very well, oh, grace au saint Sauveur, it was very well! And,
all that night, the Little Mother prayed, and watched a tiny taper,
flickering before her porcelain image of Notre Dame de la
Recouvrance, while Jean-Marie tossed and turned upon his little
garret bed, and made no reply, even in a whisper, to the west wind,
rattling his casement with insistent fingers.
But it was all far worse than he had pictured it to himself, even in
those first few hours of disappointment and despair. The last Sunday
afternoon which he and Rosalie passed, hand in hand, seated by the
Calvary in Plougastel cemetery, striving dumbly to realize that they
should see each other no more for three long years; the following
morning, chill and bleak for that time of year, when he and the Little
Mother, standing on the platform of the station at Brest, could barely
see each others' faces, for the sea-fog and their own hot tears; the
shouts and laughter and noisy farewells of the classe, crowding out
of the windows of their third-class carriages; and, finally, the
interminable journey to Paris,—all of these were to Jean-Marie like
the successive stages of a feverish, uneasy dream. He knew none of
the noisy Breton peasant lads about him, but sat by himself in the
centre of the compartment, too far from either window to catch
more than fleeting glimpses of the fog-wrapped landscape through
which the train crept at thirty kilometres the hour. At long intervals,
they stopped in great stations, of which little Jean-Marie
remembered to have heard,—Morlaix, St. Brieuc, Rennes, and Laval,
where the recruits bought cakes and bottles of cheap wine, and
joked with white-capped peasant women on the platforms; and
twice during the long night he was roused from a fitful, troubled
sleep to a consciousness of raucous voices crying "Le Mans!" and
"Chartres!" and gasped in sudden terror—before he could remember
where he was—at the faces of his slumbering companions, ghastly
and distorted in the wretched light of the compartment lamp. So, as
the dawn was breaking over Paris, they came into the gare
Montparnasse, and, too drowsy to realize what was demanded of
them, were herded together by the drill sergeants in charge, and
marched away across the city to the barracks of La Pépinière.
The weeks that followed were to Jean-Marie hideous beyond any
means of expression. From the first he had been assigned to the
drum-corps, and spent hours daily, under command of a corporal
expert in the art, laboriously learning double rolls and ruffles in the
fosse of the fortifications. For they are not in the way of enduring
martyrdom, the Parisians, and even while they cry "Vive l'armée!"
with their hats off, and their eyes blazing, the drummers and buglers
are sent out of hearing, to practice the music that later, when the
regiments parade, will stir the patriotism of the throng.
But this part of his new life was no hardship to Jean-Marie, or Little
Tapin, as his comrades soon learned to call him, because he was the
smallest drummer in the corps. On the contrary, it was something to
be in the open air, even though that air was tainted with sluggish
smoke from the factory chimneys of Levallois-Perret, instead of
being swept and refreshed by the west wind from beyond the
Goulet. And he was very earnest, very anxious to please, was Little
Tapin. First of all the new drummers, he learned the intricacies of
the roll, and so diligently did he improve the hours of practice that
he was first, as well, to be regularly assigned to a place in the
regimental band. No, this was no hardship. What cramped and
crushed his kindly little heart, what clouded his queer, quizzical eyes,
was nothing less than Paris, beautiful, careless Paris, that laughed,
and danced, and sang about him, and had never a thought for Little
Tapin, with his funny, freckled face, and his ill-fitting uniform of red
and blue, and his coarse boots, and his ineradicable Breton stare.
In Plougastel he had been wont to greet and to be greeted, to hear
cheery words from those who passed him on the wide, white roads.
He was part of it all, one who was called by his honest name,
instead of by a ridiculous sobriquet, and who had his share in all that
went forward, from the strawberry harvest to the procession of the
pardon. And if all this was but neighborly interest, at least there
were two to whom Jean-Marie meant more, and who meant more to
him.
But Paris,—Paris, with her throngs of strange faces hurrying past,
her brilliantly lighted boulevards, her crowded cafés, her swirl of
traffic along avenues that one crossed only at peril of one's life,—he
was lost amid her clamor and confusion as utterly as a bubble in a
whirlpool! The bitterest hours of his new life were those of his leave,
in which, with a band of his fellows, he went out of the great green
gates of the caserne to seek amusement. Amusement! They soon
lost Little Tapin, the others, for he was one who did not drink, and
who walked straight on when they turned to speak to passing
grisettes, who clung to each others' arms, and looked back, laughing
at the sallies of the piou-pious. He was not bon camarade. He
seemed to disapprove. So, presently, while he was staring into a
shop window, they would slip down a side street, or into a tiny café,
and Little Tapin would find himself alone in the great city which he
dreaded.
He came to spending long hours of his leave in the galleries of the
Louvre, hastening past row upon row of nude statues with startled
eyes, or making his way wearily from picture to picture of the old
Dutch masters, striving, striving to understand. Then, footsore and
heartsick, he would creep out upon the pont du Carrousel, and stand
for half an afternoon, with his elbows on the railing. Behind him, the
human tide swung back and forward from bank to bank, the big
omnibuses making the bridge throb and sway under his feet. It was
good, that, like the rise and fall of his little boat on the swells of the
bras de Landerneau, when he rowed up with a comrade to fish at
the mouth of the Elorn. And there was always the Seine, whirling,
brown and angry, under the arches of the pont Royal beyond, on its
way to the sea, where were the great, green battleships. Little Tapin
strained his eyes in an attempt to follow the river's long sweep to
the left, toward the distant towers of the Trocadéro, and then
pictured to himself how it would go on and on, out into the good,
green country, past hillsides crowded with vineyards, and broad, flat
meadows, where the poplars stood, aligned like soldiers, against the
sky, until it broadened toward its end, running swifter and more
joyously, for now the wind had met it and was crying, "Come! Come!
The Sea! The Sea!" as it was used to cry, rattling the casement of
his little room at Plougastel. Then two great tears ran slowly down
his freckled cheeks, and dropped, unnoted, into the flying river,
wherein so many fall. Ah, what a baby he was, to be sure, Little
Tapin!
So three months went by, and then one morning the news ran
through La Pépinière that the regiment was going to move. There is
no telling how such tidings get abroad, for the pawns are not
supposed to know what part in the game they are to play. A loose-
tongued lieutenant, perhaps, and a sharp-eared ordonnance, or a
word between two commandants overheard by the sentry in his box
at the gates of the caserne. Whatever the source of information,
certain it was that, six hours after the colonel of the 107th of the line
had received his orders, his newest recruit could have told you as
much of them as was known to General de Galliffet himself, in his
office on the boulevard St. Germain.
A more than usually friendly comrade confided the news to Little
Tapin, exulting. The regiment was to move—in three days, name of
God! Epatant—what? And, what was more, they were to go to the
south, to Grenoble, whence one saw the Alpes Maritimes, with snow
upon them—snow upon them, did Tapin comprehend?—and always!
No matter whether it was a Tuesday, or a Friday,—yes, or even a
Sunday! There was always snow!
No, Little Tapin could hardly comprehend. He pondered dully upon
this new development of his fate all that afternoon, and then,
suddenly, while he was beating the staccato roll of the retraite in the
court of the caserne that night, he understood! Why, it was to go
further away, this,—further away from Plougastel, and the Little
Mother, and Rosalie, to be stationed in God knew what great town,
crueller, more crowded than even Paris herself!
All that night Little Tapin lay staring at the ceiling of the big dortoir,
while the comrades breathed heavily around him. And, little by little,
the spirit of rebellion roused and stirred in his simple Breton heart.
For he hated it all,—this army, this dreary, rigid routine, this
contemptuous comment of trim, sneering young lieutenants, with
waxed mustaches, and baggy red riding breeches, and immaculately
varnished boots. He hated his own uniform, which another tapin had
worn before him, and which, in consequence, had never even had
the charm of freshness. He hated the bugles, and the drums,—yes,
and, more than all, the tricolor, the flag of the great, cruel Republic
which had cooped him up in these desolate barracks of La Pépinière,
instead of sending him with other Bretons out to the arms of the
blue sea! And, when gray morning crept through the windows of the
dortoir, there lay upon the pallet of Little Tapin a deserter, in spirit, at
least, from the 107th of the line!
That day, for the third time since joining the regiment, Little Tapin
was detailed as drummer to the guard at the Palais du Louvre. He
knew what that meant,—a long, insufferably tiresome day, with
nothing to do save to idle about a doorway of the palace, opposite
the place du Palais Royal, watching the throng of shoppers scurrying
to and fro, and passing in and out of the big magasins du Louvre. It
was only as sunset approached that the drummer of the guard detail
had any duty to perform. Then he marched, all alone, with his drum
slung on his hip, across the place du Carrousel, and down the wide
central promenade of the Tuileries gardens, to the circular basin at
their western end, where, on pleasant afternoons, the little Parisians
—and some, too, of larger growth—manœuvred their miniature
yachts, to the extreme vexation of the sluggish gold-fish. There,
standing motionless, like a sketch by Edouard Detaille, he watched
the sun creep lower, lower, behind the arc de l'Etoile, until it went
out of sight, and then, turning, he marched back, drumming sturdily,
to warn all who lingered in the gardens that the gates were about to
close.
But they were not good for Little Tapin, those hours of idleness at
the portals of the palace. It is the second busiest and most densely
thronged spot in Paris, this: first the place de l'Opéra, and then the
place du Palais Royal. And to Little Tapin's eyes, as he glanced up
and down the rue de Rivoli, the great city seemed more careless,
more cruel than ever, and bit by bit the rebellious impulse born in
the dortoir grew stronger, more irresistible. His Breton mind was
slow to action, but, once set in a direction, it was obstinacy itself. He
took no heed of consequences. If he realized at any stage of his
meditation what the outcome of desertion must inevitably be, it was
only to put the thought resolutely from him. Capture, court-martial,
imprisonment, they were only names to him. What was real was that
he should see Plougastel again, sit hand in hand with Rosalie, and
refind his comrades, the wide, sunlit harbor, and the impatient
western wind, for which his heart was aching. What was false and
unbearable was longer service in an army that he loathed.
He arranged the details of escape in his mind, as he sat apart from
his comrades of the guard, fingering the drum-cords. An hour's leave
upon the morrow—certainly the tambour-major would grant him so
much, if he said it was to bid his sister good-by; then, a change from
his detested uniform to a cheap civile in the shop of some second-
hand dealer in the Gobelins quarter; and, finally, a quick dash to the
gare Montparnasse, when he should have learned the hour of his
train, and so, away to Finistère. It sounded extremely simple, as all
such plans do, when the wish is father to the thought, and in his
calculations he went no further than Plougastel. After that, one
would see. So the long afternoon stole past.
At seven o'clock the lieutenant of the guard touched Little Tapin
upon the shoulder, and, more by instinct than actual perception, he
sprang to his feet and saluted.
"Voyons, mon petit," said the officer, not unkindly. "It is time thou
wast off. Thou knowest thy duty—eh? There is no need of
instructions?"
"Oh, ça me connait, mon lieutenant," answered Little Tapin quaintly,
and, presently, he was striding away to his post, under the arc de
Triomphe, past the statues, and the flowerbeds, and the dancing
fountains, across the rue des Tuileries, and so into the wide, central
promenade of the gardens beyond.
The old woman who sold cakes, and reglisse, and balloons to the
children, was putting up the shutters of her little booth as he
passed, and two others were piling wooden chairs in ungainly
pyramids under the trees, though the gardens were still full of
people, hurrying north and south on the transverse paths leading to
the rue de Rivoli or to the quai and the pont de Solférino. But,
curiously enough, the open space around the western basin was
almost deserted as Little Tapin took his position, facing the great
grille.
The mid-August afternoon had been oppressively warm, and now a
thin haze had risen from the wet wood pavement of the place de la
Concorde, and hovered low, pink in the light of the setting sun.
Directly before Little Tapin the obelisk raised its warning finger, and
beyond, the Champs Elysées, thickly dotted with carriages, and half
veiled by great splotches of ruddy-yellow dust, swept away in a long,
upward curve toward the distant arc de l'Etoile.
But of all this Little Tapin saw nothing. He stood very still, with his
back to the basin, where the fat goldfish went to and fro like lazy
sentinels, on the watch for a possible belated little boy, with a pocket
full of crumbs. He was still deep in his dream of Plougastel, so deep
that he could almost smell the salt breeze rollicking in from the
Goulet, and hear the chapel bell sending the Angelus out over the
strawberry fields and the rock-dotted hillside.
After a minute, something—a teamster's shout, or the snap of a
cocher's whip—roused him, and he glanced around with the same
half-sensation of terror with which he had wakened in the night to
hear the guards shouting "Le Mans!" and "Chartres!" Then the
reality came back to him with a rush, and he grumbled to himself.
Oh, it was all very well, the wonderful French army, all very well if
one could have been a marshal or a general, or even a soldier of the
line in time of war. There was a chance for glory, bon sang! But to
be a drummer—a drummer one metre seventy in height, with
flaming red hair and a freckled face—a drummer who was called
Little Tapin; and to have, for one's most important duty, to drum the
loungers out of a public garden! No, evidently he would desert.
"But why?" said a grave voice beside him.
Little Tapin was greatly startled. He had not thought he was saying
the words aloud. And his fear increased when, on turning to see who
had spoken, he found himself looking into the eyes of one who was
evidently an officer, though his uniform was unfamiliar. He was plain-
shaven and very short, almost as short, indeed, as Little Tapin
himself, but about him there was a something of dignity and
command which could not fail of its effect. He wore a great black hat
like a gendarme's, but without trimming, and a blue coat with a
white plastron, the tails lined with scarlet, and the sleeves ending in
red and white cuffs. White breeches, and knee-boots carefully
polished, completed the uniform, and from over his right shoulder a
broad band of crimson silk was drawn tightly across his breast. A
short sword hung straight at his hip, and on his left breast were
three orders on red ribbons,—a great star, with an eagle in the
centre, backed by a sunburst studded with brilliants; another eagle,
this one of white enamel, pendant from a jeweled crown, and a
smaller star of enameled white and green, similar to the large one.
Little Tapin had barely mastered these details when the other spoke
again.
"Why art thou thinking to desert?" he said.
"Monsieur is an officer?" faltered the drummer,—"a general, perhaps.
Pardon, but I do not know the uniform."
"A corporal, simply—a soldier of France, like thyself. Be not afraid,
my little one. All thou sayest shall be held in confidence. Tell me thy
difficulties."
His voice was very kind, the kindest Little Tapin had heard in three
long months, and suddenly the barrier of his Breton reserve gave
and broke. The nervous strain had been too great. He must have
sympathy and advice—yes, even though it meant confiding in a
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

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.

Let us accompany you on the journey of exploring knowledge and


personal growth!

textbookfull.com

You might also like