Create an animated site with Sass and Compass(也可用来创建静态站点）

Add interactivity and animation to your site with CSS3 using Sass and Compass, and trigger the animations using jQuery.

When it comes to adding animation and interactivity in the browser, there are countless solutions by many people. What I'm proposing here isn't a global solution to some problem, but rather a workflow that's clean, simple, easily editable, and a breeze to maintain.
At BKWLD, we get the unique opportunity to develop in a forward-thinking way. Most of our clients give us the freedom to add polish and beauty to modern browsers, and let the experience gracefully degrade when necessary. Doing this lets us focus on using CSS3 for all the animation and interactivity, while letting the older browsers simply display static content.
There are many benefits to letting CSS drive the animations on a page - chiefly performance, which is better across the board. Since we're trying not to change DOM elements 20-30fps, animations will perform better, especially on devices that would otherwise have a tough time keeping up. For instance, CSS3 animation performance on iOS is noticeably smoother and quicker. So, if you're building responsive sites that still maintain most of your animation and functionality for mobile sizes, then this approach is especially beneficial.

Refer to the Sass homepage for all Sass-related questions

As for browsers that don't support CSS3, the transitions just won't happen. For example, if you have colours changing on mouse over, be sure to have a fallback so that the colour change still happens, just without a tween. Adding CSS3 transitions in an unobtrusive way is the best method for adding polish to your site, still allowing older browsers to access the content, which is ultimately the most important thing.
For this tutorial, I'm going to build a simple HTML page that showcases Sass, Compass and jQuery working together to create rich animation that's easy to write and maintain. For most of the animations, we will implement them by simply adding or removing a class from the element. This is minimally invasive to the DOM and, like I said above, it keeps the animation layer in CSS, which boosts performance. Now I will introduce Sass and Compass, and explain why these utilities are beneficial and worth the time to set up.

Refer to http://compass-style.org for all Compass-related questions

Sass

Sass is a preprocessor of CSS that adds additional functionality and power to regular CSS. In many ways Sass is very similar to CSS; it just extends its functionality, adding things like variables, mixins, nesting and more. It compiles into valid CSS, so the browser doesn't know any difference.
The first benefit of writing in Sass is the addition of variables. First, you declare your variable at the top of your document:

1. $blue = '#3366cc';

Then, you can use that variable elsewhere in your .scss file:

1. h2 {
2.   color: $blue;
3. }

1. .header {
2.   background-color: $blue;
3. }

When you need to change the colour, you simply edit the variable, and it changes everywhere that variable is used.
Another great feature of Sass is mixins (CSS that's declared in a separate block of code, and can be included anywhere). For example:

1. @mixin blueButton {
2.   border-radius: 10;
3.   background-color: blue;
4.   border: 1px solid black;
5.   padding: 10px 30px;
6.   color: #ffffff;
7. }

Then you can include that block wherever you want, even in multiple places. This makes editing and maintaining code very simple, especially when there are a lot of elements that have common styles.

1. a { @include blueButton; }
2. h3 a { @include blueButton; }

Mixins can even accept parameters, like so:

1. @mixin bgColor($customColor) {
2.   background-color: $customColor;
3. }

Then, when you style an element, you can call the mixin and pass the custom parameter:

1. a {
2.   @include bgColor(‘#3366cc’);
3. }

Compass

Compass is a great set of very powerful tools that are very easy to learn. When you use this in conjunction with Sass, it allows you to write very concise and readable code. Once Compass is installed on your machine, you can use it to create projects, watch projects and write CSS3-specific styles in a very convenient, short-handed way. For this project, I'm going to use Compass for watching the project folder (to compile our Sass into valid CSS) and for creating multiple prefixed properties with single lines of code.

Here is an example of the finished page with the grid showing the available cars for sale

One of Compass's main features is adding custom mixins that make writing vendor-specific CSS3 a breeze. For example, here's how you would normally add a border radius to an element:

1. .btn {
2.   -webkit-border-radius: 5px;
3.   -moz-border-radius: 5px;
4.   -o-border-radius: 5px;
5.   border-radius: 5px;
6. }

But with Compass, you can use the custom mixin that, when compiled, creates the code:

1. .btn {
2.   @include border-radius(5px);
3. }

This works with nearly every complex CSS3 declaration, from gradients to animations. Examples and explanations are available on Compass's site, which has extensive documentation.
One final note: Compass and Sass are built with Ruby. If you're on a Mac, then Ruby is installed by default. If you're on Linux or Windows, a bit of setup is needed. If you need help, just visit: http://ruby-lang.org.

Setting up

Let's get started by installing Sass and Compass. Open up your terminal and install Sass:

$ gem install sass

And now, Compass:

$ gem install compass

Note: if you're having trouble installing these gems from the command line, try running them with sudo, which will usually override any strange permissions settings you have on your machine.

When you click on a car for sale, a modal window will appear with further details, in addition to the information revealed on mouse over

From there, you need to put a config file in the root of your project. Create a file called config.rb and place it in the root of your project. Here's a simple example of a config file:

http_path = "/"
css_dir = "css"
sass_dir = "css/sass"
images_dir = "img"
javascripts_dir = "js"

As you can see, it's basically telling Compass where everything is in your project. Now, cd into your project folder, and run:

compass watch

This will listen to the project and compile valid CSS whenever you save any Sass (.scss) file. You can see all output generated in the terminal window, which is handy if there is an error. It will tell you what file is bad and even the lines that Compass/Sass didn't like.

The project

Now we can turn our attention to our project. If at any time you need to refer to my example, check out my project on GitHub. The page I've made is a simple car dealership inventory page. It shows a grid of cars for sale. More information about those cars will appear when you mouse over the item. Also, clicking on an item will bring up a modal window with additional information.
The basics of the layout is just plain HTML/CSS. The interactivity is achieved by adding and removing classes with JavaScript (or in this case, jQuery) to trigger animations.

The initial grid item. The overlay is there, but it's hidden

Project structure

Create your project folders in such a way that mirrors what you declared in your config.rb file. Below is an example of what the root of your project should look like:

root
  css/
  sass/
  js/
  img/
  index.html
  config.rb

In order to take advantage of the Compass libraries, we need to include them at the top of our Sass file. To do so, put the following at the top of your app. scss file:

@import "compass/css3";
@import "compass/reset";

Importing compass/css3 basically brings in all of Compass's CSS3 mixins as described. The reset import brings in a full CSS reset block into your project. When the Sass is compiled, you will see the resulting reset in your main CSS file. The CSS3 libraries won't be visible, but you need to include them in order to compile your CSS3 includes.

When you hover over an item, this overlay will show

Grid

The grid is just a floated list. All of the overlay information is already marked up and styled. But it's hidden for now, until we tell it to show. When you hover over the grid item, the content will animate in. For this overlay, I'm simply using the :hover selector. It doesn't showcase the technique of adding and removing classes to the DOM element to trigger animations, but I favoured this approach because it's easier and cleaner. For the adding classes approach, see the hiding/showing of the modal window described below:

1. <li>
2.   <img src="img/cars/1.png" class="main-car-img" />
3.   <div class="overlayHolder">
4.     <div class="overlay"></div>
5.     <div class="content">
6.       <img src="img/stats.png" />
7.     </div>
8.   </div>
9.   <img src="img/price.png" class="price" />
10. </li>

Modal

I'm showing a modal window on click, which brings up a detail window with specific information about that car. I am adding some animations using Compass to show how you can add some interactivity and polish. For X and Y movement, I'm relying on translateX and translateY, which is easy to grasp, and has fairly good browser support. I'm initially setting the modal window's Y position to its hidden, or off state.
For example:
//hide the modal so that it's off screen

@include translateY(-100%);

//Make sure it has some animation, 1/2 of a second, with easing

@include transition(translate 500ms ease-out);

Show

By adding the class 'on', I'm translating it to 0px to bring the modal to its final resting place:
//Translate the modal to 0, which makes it centred vertically

&.on {
  @include translateY(0);
}

Hide

The beauty of this approach comes when it's time to close the modal window. You simply remove the class on, which makes the modal animate back to -100%. When you remove the class, the element will then inherit the styles it had previously. Because there's a translate declaration on that element, it will slide out of view, in the same way that it animated in.

When the modal window has the on class, it will show over all the content. Some animations are added using Compass to add interactivity and polish

WRAP

My example code shows much more than I was able to explain here. For this tutorial, I've a lot of content saved out as images. To extend the functionality of this site, make all the text, buttons, prices, etc, and then apply this animation technique to more elements. Just don't rely on the animation to display vital content, or make sure there's at least a static fallback so people with less-capable browsers can still view the content. Hopefully you can extend, modify and evolve this code to fit your project。

from http://www.creativebloq.com/css3/create-animated-site-sass-and-compass-121310208
--------------------------------------------------------------------

Start web projects faster with Sassaparilla

Sassaparilla uses Sass and Compass to help projects start more quickly. Peter Coles and Adam Robertson show you how to get started – fast.

If you're anything like us, you'll agree that starting a new frontend build is often a repetitive task. Between setting up your HTML, JavaScript and CSS (as well as adding tried and tested defaults to your setup) you'll probably spend a large part of those early few hours doing things you've done a hundred times before. We made Sassaparilla to save us (and hopefully you) from having to do this.
Of course, there are plenty of tools out there that do this too. The wonderful HTML5 Boilerplate or Zurb's Foundation spring to mind. However, we often spent just as much time removing elements from these boilerplates as when we were adding elements to each new project.
The solution? Combine only the necessary elements for starting a project and make them as flexible as possible. Through trial and error, and a lot of refinement, we decided on the following goals for Sassaparilla:

1. Make accessible and scalable code as easy and as fast as possible to write
2. Focus on typography and vertical rhythm, and make this easy to implement
3. Prepare a system that can adapt easily to changes when working on a project
4. Include only what we need and use as few elements as possible

And so, Sassaparilla was born. It's not a boilerplate, it's more of a starting point for your projects.

• Download the source files for this tutorial

Installation

As its name may suggest, Sassaparilla relies on the preprocesser Sass and its best friend Compass to keep things flexible. You'll need to install Compass in order to use Sassaparilla in your projects.
This is pretty straightforward if you're on a Mac:

1. Simply open terminal
2. Type gem update --system to update your Ruby environment
3. Type gem install compass to install the latest version of Compass

Full installation details are on the Compass website.

A few simple terminal commands to start, and you’re away

Getting up and running

Getting Sassaparilla up and running is really easy. You can use a GUI like Codekit but we're going to assume for this tutorial that you're on a Mac, you're going to use terminal and you've downloaded Sassaparilla from the website, rather than it being forked from GitHub.

1. Create a new folder called Demo
2. Copy the files from Sassaparilla into the Demo folder
3. Open a new window in terminal
4. Type cd and then drag the folder Demo into the terminal window and press return. You have now changed directory into that folder
5. Now type compass watch and press return
6. You should see the message 'Compass is polling for changes'. This means, each time you save a SCSS file, it will update your CSS
7. That's it

A look at config.rb

The config file contains paths to your assets. In the case of Sassaparilla we keep the config file at the root of the project and then keep all our CSS, JavaScript, images etc in an assets folder, with each element having a sub folder. This keeps everything nice and neat.
However, you can change paths to your assets in the config file if you prefer to work with a different setup. You may have to stop and re-run the compass watch command to see the changes.
Sassaparilla follows a specific CSS cascade, and makes use of several SCSS files, each of which serves a different purpose. This allows you to include (or not include) separate parts, depending on what you need.

The CSS setup

All SCSS files for the Demo site live in the assets/CSS folder. This is where all CSS compiles too. In our case, to one CSS file called screen.css.
This file contains the bulk of your styles, as well as pulling together the other partial stylesheets into one CSS file. By and large, you will be doing most of your work within this stylesheet once you've written your global settings.
As a default, it includes some default styles for the header element, links and media queries. These are mainly left in as an example of how to use some of the syntax that we'll cover later. You can remove these if you like.

Set up your defaults for the project in the _settings.scss file

The libs folder

You'll also notice a sub-folder called libs. This is where the following five SCSS files live. You notice they all start with an underscore. This simply means, when we tell Compass to compile our project, these files will not compile to their own CSS file. Therefore, files prefixed with an underscore include:

• _reset.scss This file contains a simple reset for HTML elements. It assumes your webpage will have forms, so reset these too. If your site doesn't use forms, you can remove these resets.
• settings.scss This file contains all the variables for the site. Things such as colours and font sizing live here. This file is for defining your core setup and makes use of Compass's baseline and font-size measures. More on that later.
• mixins.scss Mixins are any user-made mixins for the project (Compass has many predefined ones already, that are well worth checking out). As a default, we've included some simple ones to get you started. Add more as needed.
• typography.scss This file contains the core typesetting for the site. It relies on variables setup in the settings.scss file, which we'll cover next. Again, this file by default contains some example syntax to get you started.
• forms.scss This file contains default form elements and standard styling. If you're not using forms, or you'd rather style them yourself, you can safely leave this file out.

Better rhythm and leading

Sassaparilla tries to make leading and spacing as easy as possible while writing accessible code. We're not keen on tricky maths, but like to work in ems. Luckily, Compass can handle this with a few smart defaults and tricks and a few commands.
Here's how we go about it:

Stage 1

In settings.scss set up your base-font-size: by default this is set to 16px and, generally, this works well in your calculations so you shouldn't need to change this (you can if you like).
Set up your base-line-height: to prevent oddly-spaced leading and large gaps between lines, we like to use a smaller measure, as you might do in print design. Something like 6px works well. It's well worth playing around with this value, depending on which fonts you're using. Later, you'll use multiples of this baseline to create your leading and spacing.

Stage 2

In typography.scss, set your default typography. How you apply your styles is up to you, but, for this example, we're using global settings (for H1, P, UL etc).
To keep a nice vertical rhythm, whenever you set a font size, you'll use the adjust-font-size-to command. This simply tells the element to become this size in pixels and then convert to ems, relative to the base-font-size that we set-up in stage one. This value (eg 26px) also becomes your base unit to work out how many lines of spacing you need above and below the element.
For example:

1. @include adjust-font-size-to(26px);

Adjust font size to 26px and return em equivalent.

1. margin: 0 0 rhythm(2, 26px) 0;

Add two lines of our base-line-height (6x2 = 12px) below the element, base those two lines on our font size and covert to ems equivalent.
Therefore:

1. @include adjust-font-size-to(26px);
2. margin: 0 0 rhythm(2, 26px) 0;

Gives us:

1. font-size: 1.625em;
2. line-height: 1.15385em;
3. margin: 0 0 0.46154em 0;

Control your type setting using Compass’s rhythm units

Spacing blocks and other elements

In order to keep a consistent vertical rhythm, you'll need to vertically space other elements on the page (sections etc) too. As luck would have it, the Compass leader and trailer functions are built just for this occasion.
You use them as so:

1. @include padding-leader(x);

Adds x lines of padding based on the base-line-height above the element.

1. @include padding-trailer(x);

Adds x lines of padding based on the base-line-height below the element.

1. @include leader(x);

Adds x lines of margin based on the base-line-height above the element.

1. @include trailer(x);

Adds x lines of margin based on the base-line-height below the element.

One final trick

Say, for example, you'd like to add a pixel value to a media query, but you'd like to have that value convert to the relevant em value for the base-line-height or base-font-size. That may mean a few calculations. Sassaparilla includes two functions to help with this.
These come in handy for things like letter-spacing as well as making media-query breakpoints em values, rather than pixels. You can use the following syntax:

1. em-font(#px)

Converts the value(#) to pixels based on the base-font-size.

1. em-base(#px)

Converts the value(#) to pixels based on the base-line-height.

Check your leading and spacing with a visual baseline

from http://www.creativebloq.com/web-design/start-web-projects-faster-sassaparilla-11135367