In this lesson we're going to do a quick comparison between the two most popular CSS preprocessors in use today, Sass ad LESS. We'll look at the similarities between these two, as well as the main differences.
Use jQuery selectors to locate and select elements on the page. jQuery selectors operate much like CSS3 seletors. Start out simple by selecting elements by tag, DOM id, or class name. Then get more advanced and select form elements based on their current state, and complex n-th child selectors. Additional notes: As a result of Drupal 7 using jQuery in no conflict mode, the jQuery object is not automatically assigned to the global $ symbol. The easiest way to get around this in Firebug or Webkit Inspector is to just use jQuery('element'); or do $ = jQuery; and then use the $ as per usual. If you take a look at the JS files in Drupal 7 you'll see that they almost all use an anonymous closure in order to assign the $ variable. Something like the following. (function ($) { // Add your code here and use $ as per usual. })(jQuery);
First look at basic fundamentals of jQuery's syntax and usage. Learn about using the $ function, jQuery selectors for finding elements on the page, creating new DOM elements, and browser detection. In addition to selecting elements on the page we'll introduce the basics of jQuery effects and events. Note: In D7 developers are encouraged to add a jQuery wrapper around JavaScript. (function ($) { // Original JavaScript code. })(jQuery);
When using Firebug console you need to use jQuery instead of $. >>> jQuery('.title')
Drupal 7 uses jQuery in no-conflict mode meaning you need to wrap your code in an anonymous function and pass the jQuery object into the function. This is a pretty common practice now days and is actually a better way to write jQuery in general rather than always assuming that jQuery is the $ symbol. But, it means in the console you need to use either jQuery('selector) or $ = jQuery;
Sass partials are a way to break out your Sass code into multiple files, and then import them to be compiled into one master CSS file. This feature helps you organize your Sass code the way that makes the most sense for you while working.
When you install Compass from the command line, or with certain apps, it comes with a special file names "config.rb" which is where Compass stores the various ways you can configure it to work with your project. Not all apps will create this file for you however, and it is a good thing to create and understand. In this lesson, we'll take a look at this file and explain the most common configuration options.
Additional resources
When you install Compass, in addition to a large mixin and function library, you are also installing a command line application. The commands that Compass provides make it easy to do common tasks, very quickly from the command line — things like creating a new project, and compiling your Sass into regualr CSS. Even if you are not familiar with the command line, these are very simple to use.
Additional resources
Sass is our base tool, and Compass is almost always used with Sass. Compass provides some great tools for us, but there are a few more resources out there that are worth knowing about and taking a look at. In this lesson we'll take a quick tour of some grid frameworks designed to work with Sass, as well as another popular mixin library.
Additional resources
In this lesson we take a tour of some other tools for working with Sass and Compass. We look at some sites with good information or helpful tools to use, and a few different apps that are made to make your workflow better. We can't cover everything out there, but these are tools that we've used ourselves, or are generally popular right now. There will always be more cool things coming out to help you be more efficient when working with Sass and Compass, but these should get you looking in the right direction.
Additional resources
In this lesson we take a look at compass mixins. We concentrate on a single mixin in the Typography category to show how a compass mixin can save lots of time and make your sass file much cleaner. We will take a look at how to create a horizontal list with a single include that handles all the necessary floats, paddings, margins, and everything we normally write in CSS but is now just a mixin away.
Learning Sass and Compass
CourseIn this series, we're going to be covering CSS preprocessors. Mainly we're going to be covering Sass, along with a related library, called Compass. While not used only on Drupal sites, it's a good thing to have in your arsenal of skills, especially if you do front-end design work.
To wrap everything up, we're going to show you how to extend beyond what we've covered in just the Sass and Compass basics, with other libraries that you can use with Sass.
Sass is in a class of tools called CSS preprocessors. CSS preprocessors have been around for a while now, but they've really started to gain in popularity in the last several years. In this lesson we'll find out what a CSS preprocessor is, what the benefits of using one are, and which ones are popular today.
Additional resources
When working with your CSS you will often have instances where something should include all of the styling associated with a class, in addition to a few extras that are specific to just that item. In regular CSS you would normally put the general class on the item, and add a more specific class with the additional styling. With the Sass @extend directive, you can have the more specific class inherit the styling of another class, so that you can just use the specific class in your HTML, keeping you HTML markup nice and concise.
Functions are another form super-variable, as it were, where you do a bunch of work that is assigned to something you can print out. But in this case you aren't injecting a bunch of CSS, instead you are just printing out a nice, final value. For many things you will want to do with functions, someone else has probably already written it. Sass comes with a lot of predefined functions for you to use, and there are libraries, like Compass, which provide many more. We'll take a look at some of the functions that Sass provides for us and see a function in action, along with our mixin, side by side, to really see the difference between them.
Additional resources
A mixin is a term used for a feature of preprocesors which acts a lot like a super-variable. You can write up larger chunks of CSS and assign them to a mixin name, then when you "include" that mixin, it will inject all of that CSS into the location. This is great for setting up common ways of displaying things, or handling common problems, and then just reusing that same method throughout. You can also add arguments to your mixin so that you can tweak the output according to your use case. This takes the reusable concept of variables up a notch.
One of the big advantages to using Sass is being able to reuse code. The simplest form of this is using variables. Variables in Sass work just like they do in other scripting languages. You simply assign a value to a variable name and then you can use that variable name anywhere you like. This is super helpful for doing things like defining the hex value for the color "blue" and then you can use the name "blue" wherever you want to use that hex value. This makes it easy to update that value in one place instead of having to find every instance of it and update all of them.
Additional resources
Sass' nesting feature makes it easy to organize your CSS in a way that makes it clear which selectors are related and generally provides a cleaner, clearer stylesheet. In this lesson we'll look at nesting, how to use it, and talk about making sure you don't nest unnecessarily.
Sass has a neat way of managing comments, where you can choose to either compile the comments, or not, from your scss. We're going to take a quick look at the two comment styles, and see how they appear (or don't) in our finished, compiled CSS.
We've looked at how easy it is to set Sass and Compass up from the command line, but for folks who prefer a nice GUI application, there are a few options available. Scout is a free Sass/Compass application that works cross-platform. In this lesson, we'll get Scout set up and see how it works to watch our projects.
Notes on Installing Scout:
- On OSX, If you double-click the .dmg and you get an error message saying you can't open this because it's from an unrecognized developer, control-click on the .dmg and select "Open" from the menu, then select "Open" from the dialogue box to open the .dmg installer.
- After installing Scout, OSX may again prevent you from opening it (depending on your security preferences) when it auto-opens it after installation. Navigate to where you installed it (i.e. "Applications"), control-click on the Scout icon, select open from the menu, and select "Open" from the dialogue box once again.
- If you get an error about Java, "No Java runtime present, requesting install," see the Scout GitHub issue queue for a solution.
Additional resources
Now that we have Ruby and Sass ready to go and working, let's also get our handy dandy mixin library, Compass, installed as well. We'll be using the command line in this lesson, but it's super simple to get this installed, and then we'll create a project to make sure everything is firing correctly. We'll look at a GUI tool to do this in another lesson.