Jump Start Sass

Miriam Suzanne, Hugo Giraudel

Description

Get a Jump Start on the popular CSS preprocessor Sass today!

Using Sass, you can write your stylesheets in a more concise, dynamic, and readable way, and cut down many of the tedious repetitive tasks that come with writing vanilla CSS. Sass simplifies your stylesheets, adding some useful features missing from CSS. Most importantly, Sass will save you time.

This book provides a thorough introduction to Sass for the beginner. In it, you'll learn:

• What preprocessors are and how they can be useful
• Installation and getting started
• Variables, mixins, and functions
• Loops and conditions
• Nesting
• Extend
• Warnings & errors
• Project architecture
• The Sass ecosystem
• And more!

Sujets

• Web Design
• Computers
• Informatique

Informations

• Publié par: SitePoint
• Date de parution: 24 mars 2016
• Nombre de lectures: 0
• EAN13: 9781457199509
• Langue: English

Extrait

Summary of Contents
Foreword 1. Hello World! 2. Getting Started 3. Variables 4. Functions and Mixins 5. Loops and Conditions 6. Nesting 7. The @extend Directive 8. Warnings and Errors 9. Architecture 10. The Sass Ecosystem
JUMP START SASS

BY HUGO GIRAUDEL
& MIRIAM SUZANNE
Jump Start Sass

by Hugo Giraudel and Miriam Suzanne

Copyright © 2016 SitePoint Pty. Ltd.

Product Manager:  Simon Mackie

Tech Editor:  Kaelig Deloumeau-Prigent

English Editor:  Kelly Steele

Cover Designer:  Alex Walker

Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.

Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.

Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty. Ltd.

48 Cambridge Street  Collingwood VIC  Australia  3066

Web: www.sitepoint.com
Email: [e-mail]

About Hugo Giraudel
Hugo is a French front-end developer and writer working at Edenspiekermann in Berlin, Germany. Since discovering Sass in 2012, he has devoted a lot of time assisting the Sass community, as well as authoring SassGuidelines, SassDoc, and hundreds of articles on front-end technologies. In his spare time Hugo likes to work on open-source software, hang out with his cats, eat French cheese, and play pool—not necessarily in that order. You can find him on Twitter at: https://twitter.com/HugoGiraudel .

About Miriam Suzanne
Miriam Suzanne is an author, performer, musician, designer, and web developer. She has been an active member of the Sass community since developing the Susy layout toolkit in 2009. Miriam creates web software with OddBird, music with Teacup Gorilla, novels and poetry with [WriteyWrite], theater with Vicious Trap, and Lego spaceships with anyone who is interested. She is also the author of Riding SideSaddle* (a multimedia open-source novel), and The Post-Obsolete Book (a performable website).

About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, Ruby, mobile development, design, and more.
Foreword
When I started contributing to the features and development of Sass more than eight years ago, I’d never have predicted that one day it would reshape the face of modern front-end web development. But these days, Sass is a staple technology for web developers and designers. It may not be right for every project, but you absolutely must have Sass in your toolbox.
Even more exciting to me is the amazing community of smart, talented, and enthusiastic designers and developers that has sprung up around a technology created to help front-end developers build stylesheets in a more reusable and maintainable way. From meetups to dedicated conferences, people around the globe have come together to share their excitement for Sass―clearly there’s more going on here than in your standard web development tool!
Over the years, two of those community members, Miriam Suzanne and Hugo Giraudel, have become some of the most notable users and creators of Sass plugins and best practices for how to use Sass effectively. Miriam created one of the most well-known grid system frameworks, Susy , along with a wonderful testing tool named true , for ensuring that Sass code is working correctly. Hugo’s writing on websites such as Sass Guidelines has set the standard for how to wield Sass effectively, while his plugins have pushed Sass to the very limits of what’s possible. Both have left an indelible mark on Sass, both in the community and on the technology itself. Moreover, they are trusted advisors when early feedback is sought on new features that are being added to the language.
If you’re yet to learn Sass, there’s no time like the present. I suggest that you jump start your learning of Sass right now with this book. The combined expertise of these authors with more than a decade of learning and crafting world-class websites using Sass means that you’re in great hands.
Chris Eppstein, Sass Core Developer

Who Should Read This Book
This book assumes reasonable familiarity with HTML and CSS. You don’t need to be familiar with JavaScript or any programming language, although some experience would be helpful. No prior experience with Sass or any other CSS preprocessor is assumed.

Conventions Used
You’ll notice that we’ve used certain typographic and layout styles throughout the book to signify different types of information. Look out for the following items:

Code Samples
Code in this book will be displayed using a fixed-width font, like so:
<h1>A Perfect Summer’s Day</h1><p>It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.</p>
If additional code is to be inserted into an existing example, the new code will be displayed in bold:
function animate() { new_variable = "Hello"; }
Where existing code is required for context, rather than repeat all the code, a vertical ellipsis will be displayed:
function animate() { … return new_variable; }
Some lines of code are intended to be entered on one line, but we’ve had to wrap them because of page constraints. A ↵ indicates a line break that exists for formatting purposes only, and should be ignored:
URL.open("http://www.sitepoint.com/blogs/2015/05/28/user-style-she↵ets-come-of-age/");

Tips, Notes, and Warnings

Tip: Hey, You!
Tips will give you helpful little pointers.

Note: Ahem, Excuse Me …
Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Important: Make Sure You Always …
… pay attention to these important points.

Warning: Watch Out!
Warnings will highlight any gotchas that are likely to trip you up along the way.

Supplementary Materials
https://www.sitepoint.com/premium/books/jssass1
The book’s website, containing links, updates, resources, and more. http://community.sitepoint.com/
SitePoint’s forums, for help on any tricky web problems. [e-mail]
Our email address, should you need to contact us for support, to report a problem, or for any other reason.

Want to take your learning further?
Thanks for choosing to buy a SitePoint book. Would you like to continue learning? You can now gain unlimited access to ALL SitePoint books and courses plus high-quality books from our selected partners at SitePoint Premium . Enroll now and start learning today!
Chapter 1 Hello World!
Welcome, fellow developer! I heard you wanted to learn about Sass. How adventurous! Worry not, my friend, as we will be your guides during this incredible journey, walking you through ten chapters in no time so that you can start using Sass in your day-to-day projects.
From learning about variables and mixins, to how to structure your project architecture—this book will cover the basics of the language in a detailed, informative, and fun way.

CSS in Modern Front-end Development
The creation and maintenance of our projects on the Web has advanced as the Web has progressed. Where we were once perhaps webmasters, the many, varied disciplines involved in making websites and applications has diversified. Front-end development is now one of many roles required in making today’s websites. A front-end developer will generally now produce HTML, CSS, and JavaScript for a web application or site so that its visitors can access the content and interact with it.
With modern websites providing more content in various ways and with most web makers adopting an approach that incorporates responsive web design principles, we’re now writing more complex CSS than ever before. Add to that how CSS is an ever-changing language, with more and more features added to its existing set every year.
CSS practices and methodologies such as OOCSS , SMACSS , ITCSS , and BEM (to name but four) are excellent tools and processes that help with writing stylesheets and keeping us sane in this modern era of front-end development. Yet, creating CSS for a responsive, device-agnostic website using OOCSS and BEM can lead to thousands of lines of code in one cumbersome file.
We will soon explore how Sass can help you with this. But if you happen to be a total beginner on the matter, you might even be wondering …

What is Sass?
Sass is a stylesheet language that is an extension of CSS . It is one of a few preprocessors (more on that in a bit) available to the front-end developer. As it has been around the longest (of the aforementioned preprocessors), we could agree with the official website when it reports to be the “most mature, stable, and powerful professional-grade CSS extension language in the world.”
Using Sass helps eliminate some of the monotony and overhead from writing CSS. No longer will you have to remember that specific hex color code for the company’s brand. Say goodbye to one long CSS stylesheet or additional HTTP requests, as well as increased page load times by splitting up your CSS files to several files such as