- INSTANT SASS CSS How-to
- Alex Libby
- 1198字
- 2021-07-29 16:56:40
What this book covers
Throughout this book, we're going to look at a variety of exercises that are designed to help you become accustomed to working with the basics of the LESS CSS preprocessor language. You're probably wondering what we're going to cover, right? No problem – let me reveal all:
Downloading and installing SASS (Must know) is the most important part of this book – here, we take a look at how to download and install SASS. Depending on which platform you prefer to use, it can be really easy, or somewhat more involved.
Adding support to text editors (Must know) will take you through how to add support for SASS to your favorite text editor. In this recipe, we'll use Sublime Text 2 as our editor, but the principles could equally apply to other editors that you may prefer to use.
Pre-compiling SASS (Must know) will show you that you don't always have to rely on the command line to compile SASS; there are alternatives available that can do the heavy work for you. In this recipe, I'll show you how, using Scout. We'll also look at a means to convert CSS back to SCSS, although it is not without its shortcomings
Viewing SASS in a browser (Become an expert) is crucial to help debug any style issues in your code. There will be moments when you've written a style, only to find it's not working as you expected. No problem – I'll show you some ways to view this information, depending on which browser you prefer to use.
Using nested rules (Must know) in SASS is a good way to reduce repetition in your code. In this recipe, we'll start our coding journey by looking at how you can use SASS to nest your CSS rules, to avoid such repetition.
Using comments in SASS (Should know) will probably be one of the most important things you use in SASS when starting out. After all we're only human, and you won't be able to remember what each style is meant to do, once you complete your project! In this recipe we'll see how to add comments in this task, and when to use the different types available.
Getting interactive with Script (Become an expert) may at first appear easy, but it's simplicity belies its true power. In this recipe, you'll learn how you can easily check the results of any mathematical formula you decide to use in writing SASS. Not sure what I mean? Here's why you'll see margin-left: 5px + 8px/2px equals 9px, and not 6.5px, as you might otherwise expect.
Using CSS-3 directives in SASS (Must know) will be a lifesaver, particularly for anyone who uses responsive design techniques. You are very likely to have used keywords such as @media or @import in your code, but have you nested your CSS-3 directives before? In this recipe, I'll show you how you can achieve this and more, using SASS.
Controlling output in SASS (Must know) will show you how you can really save time when working with lots of repeating styles. In this recipe, you'll see how you can use the power of SASS to dynamically create styles for multiple items that use the same styles, such as a group of social media buttons.
Creating and using mixins (Must know) is probably one of the most frequent things you will do when working with SASS. In this recipe, we'll see how you can start to build your own mixins, that you can easily reuse in your projects. We'll also see how you can start to reduce (or even avoid) duplication of styles that you might otherwise have in your projects.
Building functions within SASS (Must know) is no different to using functions in other programming languages. In this recipe, you'll see how you can use the power of SASS to dynamically create styles in CSS, using functions to work out the appropriate style, based on the values you use.
Altering output style (Should know) of your CSS will make you wish you had started using CSS a long time ago. SASS has the ability to use a number of different styles when producing your style sheet output, and maintains a consistent format when using SASS. In this recipe, we'll take a look at the styles available, and how to enable them in your code.
Using a pre-built mixin library (Should know) when working in SASS may seem like a shortcut, but I'm a great believer in "why reinvent the wheel?". We've talked about writing our own mixins throughout this book. It is worth looking online though, to see if people have already created a suitable library available for your needs. In this recipe, we'll take a look at one such example, available from lesselements.com.
Writing mixins – developing a style (Must know) will show you how it can be advantageous to develop your own style when writing mixins in your projects. This recipe will give you some tips you can use, to help in developing your own style when writing mixins, functions, and so on, when developing in SASS.
Downloading and installing Compass (Should know) will take a look at another, well-known library that is often used by developers using SASS, that contains a whole host of useful mixins that you can use. In this recipe, we'll learn how to download and install the library on your own system, ready for use.
Creating sprites using Compass and SASS (Become an expert) will show you how easy it is to produce sprites. You'll soon be on the way to producing them with little fuss, although there are a few gotchas you'll need to be aware of.
Using vendor prefixes and Compass (Become an expert) takes you through how you can avoid the necessary evil that is the bane of every developer's life: vendor prefixes. Fortunately though, Compass makes this really easy. In this recipe, we'll see how, through the use of mixins, vendor prefix issues will become a thing of the past
Building a slider using Compass (Become an expert) takes you through how you can apply some of the skills we've covered, and puts them to good use building a content slider. In this recipe, you'll see how we can use the power of WooTheme's FlexSlider library, and a little help from SASS and Compass, to produce something you can drop in to your future projects, or use as a starting point for further development
Using SASS with WordPress (Become an expert) will take you through how you can begin to apply some of the techniques we've looked at throughout this book, within the confines of a CMS system. In this recipe (and the next), we'll take a look at how you can use it in WordPress. Although the same principles will apply to most (if not all) CMS systems.
Using Compass in WordPress (Become an expert) is where we can really show off the power of SASS and Compass. In this recipe, we'll use the same principles as before, but with Compass. I'll show you how you can begin to adapt a theme to use SASS, and make your development work a lot easier.