Sass & Compass
Get flash to fully experience Pearltrees
Spriting has never been easier with Compass. You place the sprite images in a folder, import them into your stylesheet, and then you can use the sprite in your selectors in one of several convenient ways. Sprite Tutorial Contents
Spriting with Compass | Compass Documentation
I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite. As with everyone I know, I played to Street Fighter in my childhood and when I saw this ... guess what popped in my head? If the pen doesn't render above, click here to see it in action.
Build a Street Fighter Demo with CSS Animations and JavaScript
Blueprint Module | Compass Documentation
Source on Github The blueprint module is a simple way of importing all of the most commonly used blueprint modules. In addition, it provides a single mixin, +blueprint , that can be used to generate the blueprint css styles.Source on Github The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example border-radius and text-shadow . What rendering engines you support for the experimental css properties is governed by the configurable variables defined in the browser support module . This file can be imported using: @import "compass/css3" Appearance – Specify the CSS3 appearance property.
Compass CSS3 | Compass Documentation
Note: This page has also been ported to the new docs . Compass allows you to easily download, install, and upgrade plugins that share design and design elements between users and projects. For instructions on how to install a plugin, please refer to the individual plugin’s instructions.
Compass Plugins · chriseppstein/compass Wiki
Module: Sass::Script::Functions
Methods in this module are accessible from the SassScript context. For example, you can write $color = hsl(120deg, 100%, 50%) and it will call Sass::Script::Functions#hsl . The following functions are provided: Note: These functions are described in more detail below.
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables , nested rules , mixins , inline imports , and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library . Features
File: SASS_REFERENCE
File: SASS_REFERENCE
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables , nested rules , mixins , inline imports , and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library .I recently gave a talk about some experimental CSS improvements that Chrome engineers are working on. My slide deck was shared pretty widely, but it's not really designed to be looked at without me standing in front of it providing more background. So, here's a blog post talking about the same stuff. It's almost like I'm standing right beside you, whispering and secretly judging you.
CSSOM, Vars, Mixins, Nesting, and Modules - Tab Completion
HOW TO: Get Started With the COMPASS CSS Framework
Anybody who's built a website of any size knows how quickly CSS can get out of hand. Style sheets can grow bloated and lengthy, making it difficult to find things, introducing redundancy and producing an end product that makes code maintenance tedious. Let's face it — CSS is not very well-designed.
Zurb Foundation, for Sass and Compass - Projects
What do you get when combine the power of Sass with Zurb? You get Zurb Foundation for Sass and Compass. Foundation is awesome. I come out of the gate saying, “Foundation is awesome.” It’s the perfect flexible grid from desktop to mobile. Foundation includes forms, buttons, and a UI library.Sass & Compass Introduction, maddesigns (Sven Wolfermann) #t3cs12 #t3dd12
Introduction tweet: @maddesigns #sass Sven Wolfermann | maddesigns Who is the guy?Sass could potentially be called CSS 2.0; it has some really nifty features that allow you to write your code in less time and with more flexibility. In today’s article, we will be working the basics! What is Sass? Sass is simply a different way to work with CSS. It allows you to keep your CSS code very simple and helps increase readability.
Using Compass and Sass for CSS in your Next Project
Cleaner 960.gs using SASS and Compass Due to large cases of divitis, classitis and some presentational naming conventions we don't agree with, we've kept the front-end grid systems, such as 960.gs , at arms length. That has recently changed due to SASS and Compass . Why so down on grid systems? If you've never looked at the markup of grid systems before, below is an very small example taken from the 960.gs site. < div class = "container_12" >< div class = "grid_7 prefix_1" >< div class = "grid_2 alpha" > ... </ div >< div class = "grid_3" > ... </ div >< div class = "grid_2 omega" > ... </ div ></ div >< div class = "grid_3 suffix_1" > ... </ div ></ div >