Compass Utilities. Spriting with Compass. 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 Setup For this tutorial, let's imagine that in your project's image folder there are four icons: images/my-icons/new.pngimages/my-icons/edit.pngimages/my-icons/save.pngimages/my-icons/delete.png Each is an icon that is 32px square. Basic Usage **Note: The use of icon is only for this example, "icon" represents the folder name that contains your sprites. The simplest way to use these icon sprites is to let compass give you a class for each sprite: @import "compass/utilities/sprites"; @import "my-icons/*.png"; @include all-my-icons-sprites; And you'll get the following CSS output: You can now apply the my-icons-XXX classes to your markup as needed.
Let's go over what happened there. Nested Folders Example: @import "themes/orange/*.png"; @include all-orange-sprites; Oily PNG. Build a Street Fighter Demo with CSS Animations and JavaScript. 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. Let's Create the First CSS Move We'll start with the punch (see in the sprite bellow it's the third one). Then we need to set up a DIV for Ken which will receive our punch move (and all our other future moves): Let's assume vendor prefixes are implicitly working. What we just did is apply an animation (punch) to a class name (.punch) which basically animates background-position from 0px to -280px (on x axis).
Finally we need a way to add/remove the .punch class name on DIV.ken when another key is pressed. Take it to the Next Level with SASS What's Next? About Julien Knebel. Compass Typography. Blueprint Module. 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. Installing To create a project using blueprint: compass create my_project --using blueprint To add blueprint to an existing compass project: compass install blueprint To add blueprint and compass to a Rails project: compass init rails --using blueprint Alternate Project Layouts For any of the above commands you could have also selected the blueprint/basic or blueprint/semantic patterns.
Compass create my_project --using blueprint/semantic This file can be imported using: @import "blueprint" Imports Mixins view source blueprint($nested) Usage examples: As a top-level mixin, apply to any page that includes the stylesheet: Scoped by a presentational class: Scoped by semantic selectors: Compass CSS3. 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 #hsl. The following functions are provided: Note: These functions are described in more detail below. RGB Functions rgb($red, $green, $blue) Creates a Color from red, green, and blue values. rgba($red, $green, $blue, $alpha) Creates a Color from red, green, blue, and alpha values. red($color) Gets the red component of a color. green($color) Gets the green component of a color. blue($color) Gets the blue component of a color. mix($color1, $color2, [$weight]) Mixes two colors together.
HSL Functions hsl($hue, $saturation, $lightness) Creates a Color from hue, saturation, and lightness values. hsla($hue, $saturation, $lightness, $alpha) Creates a Color from hue, saturation, lightness, and alpha values. hue($color) Gets the hue component of a color. saturation($color) Gets the saturation component of a color. lightness($color) Gets the lightness component of a color. unique-id() Sass & Compass @ SenchaConf.
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. Features Fully CSS3-compatible Language extensions such as variables, nesting, and mixins Many useful functions for manipulating colors and other values Advanced features like control directives for libraries Well-formatted, customizable output Firebug integration Syntax There are two syntaxes available for Sass.
The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. Either syntax can import files written in the other. . # Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass Using Sass gem install sass. CSSOM, Vars, Mixins, Nesting, and Modules. 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.
Always judging. Many of these improvements are directly inspired by CSS preprocessors like SASS and LESS. NOTE: Everything described in this post is experimental, and in the process of being proposed to the CSS Working Group. CSSOM Improvements The CSS Object Model (or CSSOM for short) is the javascript interface to CSS. Now, don't get me wrong. We can do better than this. The new improvements to the CSSOM we're implementing solve all these problems and more. Pretty much all heavy JS development involves tweaking CSS a lot. CSS Variables Both declaring and using variables are really easy: CSS Mixins CSS Nesting. 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. Over the years, a number of solutions have cropped up that attempt to deal with these problems. One of the most popular is the CSS framework, COMPASS. Below, we'll give you a quick introduction to how COMPASS works, and some tips on how to make it work for you. What is COMPASS? COMPASS is an open source CSS authoring framework written in Ruby that attempts to fix a lot of the shortcomings of CSS.
Those features include: With all that and dozens more tidbits to offer, COMPASS provides a robust authoring environment for CSS creation that automatically monitors your code as you write it, compiling it down to pure CSS for use on your site. How Does COMPASS Work? Where to Go From Here. 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. Plus other ZURB Playground favorites like Orbit and Reveal. With case studies like ZURB Jobs, Swizzle and the Foundation site itself, how can we deny ZURB of hitting this one out of the park?
Foundation's Features ZURB Foundation features a set of global styles that include Eric Meyer's reset, tested styles for typography, links, lists, tables and more. And ZURB didn't stop there, they did an awesome job showing off the documentation too. Installation From your Terminal … (sudo) gem install ZURB-foundation If you use Bundler, simply add ZURB-foundation to your Gemfile and bundle install.
Form here, you have a few options on getting started with ZURB Foundation. Compass install ZURB-foundation/project. Csswizardry/inuit.css. 35 Great Resources for Compass and Sass. With front-end design getting more and more attention in web development these days, it’s not a wonder that the two are beginning to meld into one. It is crucial to maintain consistency and efficiency in web projects and Sass/Compass tackles this head on. In geek speak, Sass is a meta language integrated with CSS that makes stylesheets more manageable and less repetitive.
This simply means you can create CSS without copying and pasting and having to constantly search for previous style references. The beauty of implementing Sass/Compass is that the learning barrier is low and only requires general knowledge of CSS. It can be utilized in existing popular CSS frameworks because it actually compiles to CSS. Sass stands for Syntactically Awesome Style Sheets and it will create mixins, set variables, do math when necessary and much more. Compass is the open-source CSS authoring framework where you can write Sass. Articles, Opinion and General Information Getting Started with Sass and Compass. Sass & Compass Introduction, maddesigns (Sven Wolfermann) #t3cs12 #t3dd12. Introduction tweet: @maddesigns #sass Sven Wolfermann | maddesigns Who is the guy? Sven Wolfermann (34) Freelancer for modern frontend development (HTML5, CSS3, jQuery) from Berlin CSS3 Adventskalender 2010/2011 wrotes articles for T3N, PHP-Magazin and Webstandards-Magazin (new: Screengui.de) Certified TYPO3 Integrator CSS is awesome CSS3 ist not enough… Recommended knowledge for this tutorial CSS (for sure) HTML5 Boilerplate Modernizr No PHP Knowledge nessessary* *can contain tracks of Ruby Short intro to HTML5 Boilerplate Short intro to Modernizr What is Sass?
Sass means syntactically awesome style sheets is a preprocessor Similar preprocessors: LESS, Stylus (needs JS, i.e. a node.js server Installing Sass In order to install and run Sass, you need to have Ruby installed on your system. Mac OSX Easy! Linux if not installed, use the package manager $ sudo apt-get install ruby1.9.1-full Installing Sass (Ruby first) on Windows? Use $ sudo gem install sass install beta version (3.2 Sass. Using Compass and Sass for CSS in your Next Project. 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. It takes something like this: And turns it into: You can check out Sass at What is Compass?
Compass makes working with Sass even easier. Installation Both Sass (which is part of the Haml Project) and Compass are installed through RubyGems. To install both of these gems, we can just run a single command: As long as it says that it successfully installed both gems, you are good to go! Project Setup If you are working with a Ruby-based project then check out the documentation as it will explain how to get it working with your specific framework, but I'll assume we are working with a simple HTML or the like project.
And you should see: Math. Cleaner 960.gs using SASS and Compass :: The League of Extraordinary Developers. 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"> ...
Full 960.gs layouts often contain a large number of divs, classes and even id's containing layout information, which in our opinion is incorrect. SASS and Compass to the rescue We recently started using SASS and Compass to help try and organise our stylesheets. SASS - Syntactically Awesome Stylesheets - allows you to put nested rules, variables, mixins and selector inheritance into your stylesheets. NB. Setting up Compass with 960.gs. Getting started with Sass and Compass - Beginner. So your friend, co-worker, web-buddy or whomever told you about Sass, Compass … or both. Great! Now what? In this beginner guide we take you through the first steps of getting started with Sass and Compass.
We walk you through installation, creating a test project, compiling your first lines of Sass to CSS, and we even "mixin" a little Sass history. Install Sass and Compass Sass and Compass get installed as Ruby gems so you'll need to have Ruby on your machine. If you're on Windows, you can run the Ruby Installer. Getting Ruby in place is beyond the scope of this article, so, if you hit any snags hit up the mailing list if you need help finding the right resources for getting Ruby on your machine. Install Sass Ok, let's install Sass! Windows: Linux / OS X: For Linux and OS X folks, depending on your setup, you may or may not need to install gems under the sudo user. Ok, I know what you're thinking. If you are intimidated by the command line, don't be.
CSS Parser Create a test project Do it. Foundation: The Most Advanced Responsive Front-end Framework from ZURB. Compass Home | Compass Documentation. Sass Challenge: Use selector inheritance this week. While the most talked about feature of Sass 3 has certainly been the new SCSS syntax, it is not the most interesting feature of that release. In fact, the goal of the new syntax was to remove a barrier to adoption so that more people could enjoy the powerful features that Sass has to offer. Without a doubt, the most powerful feature that Sass provides is selector inheritance. Do you @extend? I don’t think people are really using @extend yet. Maybe I’m wrong, but I don’t see people talking about it much yet and I don’t see code snippets using it very often.
Why you should use inheritance Inheritance makes an implicit relationship explicit. Oh and it’s a really good way to reduce the size and increase the performance of your generated stylesheets. The Challenge This week, take a little time to read up on @extend if you haven’t done so yet and then seek out an opportunity to use it. The Basics Here’s some basic documentation on the @extend directive: Some “Best Practices” Some Interesting Uses. SASS and Compass for Web Designers: Grids and Sprites. Style Guides Using Sass @extend « Thomas Reynolds. Style Guides Using Sass @extend There are some very common front-end development patterns that drive me crazy.
CSS with every style related to a specific selector on one line and IE-only stylesheets with conditional comments are both common place and even encouraged by some. But the worst, in my opinion, is breaking our CSS into multiple files in an attempt to make them "themable. " Usually this results in something like a main.css and a fonts.css or colors.css. Sass' @extend feature allows us to have a style-guide.sass in which designers can run free, but is not dependent on DOM structure.
The Style Guide The designer on the project has put together a wonderful style guide PDF which I will be implementing in Sass. As you can see, each style has a title and some specifics for the text treatment. First I setup variables for our color palatte. $primary-orange: $hover-orange: $steel-blue: $bright-blue: $dark-grey: Next I create some simple mixins to handle usage of custom fonts. Conclusion.