This is an in depth and easy to follow Compass + Sass Screencast. Are you developing web front-ends in plain CSS? Welcome to 2011, you better start using this now.
Create Custom “Github” Style Ribbons, Using Compass!
Remember those neat ribbons that Github made for their users a while back? I was reading a great article on how to make those on your own using CSS3 and thought they would make a perfect Compass plugin!
INSTALLATION
Compass provides an excellent plugin infrastructure, so getting these ribbons going in your compass project is easy:
First, install the gem, using Rubygems:
$ gem install css3-ribbons
Then, go into your compass project and execute this command:
compass install css3-ribbons -r css3-ribbons
USAGE
If you want to start using CSS3 Ribbons in your stylesheets, simply do the following:
@import "css3-ribbons"
+ribbon("#ribbon-selector")
NOTE: visit the project README to see what your markup should look like.
You can customize everything about the ribbon, which corner placement, what color, totally custom for your website! NO images necessary, 100% CSS3. Visit the project page below to learn about all the configuration options.
Check it out and let me know what you think!
Github Project: http://www.github.com/perezd/css3-ribbons
Move You Existing Stylebase Over to Sass (or SCSS), Effortlessly With sass-convert.
This is Part 5 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”
For some projects, starting from scratch in Sass/SCSS is a no go. A lot of time and effort might have been spent on an existing stylebase, and that might make dropping it all, and starting over from scratch cost prohibitive or frankly intimidating. When you install Sass, it comes with a handy command named sass-convert, which can actually convert an entire pre-existing CSS stylebase to Sass compliant (or SCSS compliant) syntax, quite simply! Here are the options available for the sass-convert command:
Usage: sass-convert [options] [INPUT] [OUTPUT]
Description:
Converts between CSS, Sass, and SCSS files.
E.g. converts from SCSS to Sass,
or converts from CSS to SCSS (adding appropriate nesting).
Options:
-F, --from FORMAT The format to convert from. Can be css, scss, sass, less, or sass2.
sass2 is the same as sass, but updates more old syntax to new.
By default, this is inferred from the input filename.
If there is none, defaults to css.
-T, --to FORMAT The format to convert to. Can be scss or sass.
By default, this is inferred from the output filename.
If there is none, defaults to sass.
-R, --recursive Convert all the files in a directory. Requires --from and --to.
-i, --in-place Convert a file to its own syntax.
This can be used to update some deprecated syntax.
--dasherize Convert underscores to dashes
--old Output the old-style ":prop val" property syntax.
Only meaningful when generating Sass.
-C, --no-cache Don't cache to sassc files.
-s, --stdin Read input from standard input instead of an input file
--trace Show a full traceback on error
-?, -h, --help Show this message
-v, --version Print version
I especially enjoy the —recursive and —in-place options that are available to you from the sass-convert command, but beware, if you do an —in-place conversion, it will not update the filetypes, so you’ll have to do that yourself. This isn’t a horrible issue since it gives you an excuse to review and learn how sass converted over your pre-existing files, but either way, I recommend making a copy of the stylebase, and doing your conversion there.
@extend: Think Class Hierarchy, but for CSS!
This is Part 4 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”
@extend is a new feature that came to be in the latest release of Sass (Sass 3 as of writing). @extend feels like a complex concept at first, but if you are at all familiar with the Class Inheritance design pattern in computer science, you’ll feel at home very quickly.
Hopefully, if you are using Sass, you are taking advantage of the Sass mixin capabilities to keep your stylesheets encapsulated and consistent. But, if you’ve been using mixins a lot, you may have come to realize that in many cases, mixins end up making your code quite verbose, when its compiled down to CSS. Here is a common usage pattern for mixins in Sass:
=my-base-class
font-weight: bold
font-size: 12px
+box-shadow(#fff, 0px, 1px, 0px)
#subclass-1
+my-base-class
#subclass-2
+my-base-class
#nested
#subclass-3
+my-base-class
which becomes the following CSS:
#subclass-1 {
font-weight: bold;
font-size: 12px;
-moz-box-shadow: white 0px 1px 0px;
-webkit-box-shadow: white 0px 1px 0px;
-o-box-shadow: white 0px 1px 0px;
box-shadow: white 0px 1px 0px;
}
#subclass-2 {
font-weight: bold;
font-size: 12px;
-moz-box-shadow: white 0px 1px 0px;
-webkit-box-shadow: white 0px 1px 0px;
-o-box-shadow: white 0px 1px 0px;
box-shadow: white 0px 1px 0px;
}
#nested #subclass-3 {
font-weight: bold;
font-size: 12px;
-moz-box-shadow: white 0px 1px 0px;
-webkit-box-shadow: white 0px 1px 0px;
-o-box-shadow: white 0px 1px 0px;
box-shadow: white 0px 1px 0px;
}
This might be a little confusing at first, but the ultimate change is this: You are not defining a mixin or any other sort of special sass-oriented convention, you are simply defining a CSS class-based selector, and using the @extend keyword to associate your other selectors with that class-based selector. Why repeat the mixin n-number of times in your codebase? @extend lets you declare your properties in one place, adhering to encapsulation, but completely cuts down on the redundancy/verbosity factor of conventional mixins.
@import "compass/css3"
.my-base-class
font-weight: normal
font-size: 12px
+box-shadow(#fff, 0px, 1px, 0px)
.my-base-class:hover
font-weight: bold
.nested .my-base-class
color: blue
#subclass-1
@extend .my-base-class
#subclass-2
@extend .my-base-class
#nested
#subclass-3
@extend .my-base-class
will produce the following CSS:
.my-base-class, #subclass-1, #subclass-2, #nested #subclass-3 {
font-weight: normal;
font-size: 12px;
-moz-box-shadow: white 0px 1px 0px;
-webkit-box-shadow: white 0px 1px 0px;
-o-box-shadow: white 0px 1px 0px;
box-shadow: white 0px 1px 0px; }
.my-base-class:hover, #subclass-1:hover, #subclass-2:hover, #nested #subclass-3:hover {
font-weight: bold; }
.nested .my-base-class, .nested #subclass-1, .nested #subclass-2, .nested #nested #subclass-3, #nested .nested #subclass-3 {
color: blue; }
@extend is a very very powerful feature of Sass 3, and I think we have not even begun to scratch the surface with what it can do. What sorts of ideas do you have for @extend?
Color with Code: Compass Colors Makes Picking Colors Easier!
This is Part 3 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”
Compass provides a huge array of built in functions for helping us get just the right look out of the colors we choose for our designs. The really neat thing about the functions is that they can be used anywhere in your stylesheet. background property definition, borders, shadow colors, font colors, you name it. You can pass either hex, RGBA, or even those old school color words like firebrick or goldenrod.
I love using the Compass color functions for doing hover states, getting just the right blend on a css gradient, and picking the perfect grays or yellows using darken, lighten, and saturate. You can even pass the color functions into each other!
You can even use the Sass color functions to extract color opacity from an RGBA color!
Optimize for Many, not all: Target only specific browsers when using CSS3 mixins with Compass
This is Part 2 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”
CSS3 and HTML5 are fantastic technologies, and thanks to Compass we can start to utilize some of CSS3’s awesomeness in our stylesheets, without having to worry about exactly how every CSS3 compliant browser implements every method. If we want to use a CSS3 box-shadow style on a div, compass provides us with all the CSS necessary to do this, even though all browsers don’t implement it identically:
@import compass/css3/box-shadow #my-div +box-shadow(#fff, 0px, 1px 0px)
produces this CSS:
#my-div {
-moz-box-shadow: white 0px 1px 0px 5px;
-webkit-box-shadow: white 0px 1px 0px 5px;
-o-box-shadow: white 0px 1px 0px 5px;
box-shadow: white 0px 1px 0px 5px;
}
This is part of the awesome that is Compass, it takes care of all the variations of the CSS3 declarations for each browser, as needed. However, if you are using a lot of CSS3 mixins, you may end up wit more CSS than you really want or need for your intended audience. For example, perhaps your site gets a majority of its traffic from Firefox, Chrome, and Safari web browsers, and traffic from opera, Konqueror/KHTML is fairly low. While its fantastic that Compass is taking care of all of the browser inconsistencies for you, you’ve got all the extra CSS laying around to support them, even though they make up less than 8% of your total visits.
If you are in a situation like this, fear not! Compass gives you the ability to slim down your CSS3 mixins, by explicitly disabling specific css3 browser support, right in your stylesheet!
All we have to do is add this at the top of our stylesheets:
$experimental-support-for-opera: false $experimental-support-for-khtml: false @import compass/css3/box-shadow #my-div +box-shadow(#fff, 0px, 1px 0px)
and that will remove all css3 support from the Compass mixins for KHTML and Opera. This may feel like a strange optimization, but I think its definitely a useful one to know, especially if your traffic patterns make this decision easy for you. Some may think this is a micro-optimization, but it really depends on how heavily you are using the CSS3 mixins.
Smarter Sprites: Inline Image Function with Sass
This is Part 1 of my 5 part series: “From good to Great, 5 Things you didn’t know Compass could do.”
CSS Sprites has been a long time standard practice for efficiently implementing lots of imagery that we include in our designs today. The primary reason for using CSS sprites is to decrease the number of server requests that our client-side code will make to our server down to a single request. Lets look at how we would implement a simple CSS sprite pattern in compass today:
.icon-sprites
background-image: image-url("icons/sprite.png")
height: 35px
width: 35px
#some-icon
background-position: -12px 0px
#another-icon
background-position: -50px 0px
That code is pretty concise, and accomplishes our goal of making a single request to the server for all our icons. But, what if we could make zero requests to the server for this sprite? With compass, you can do this with one minor change! Introducing Compass’s inline image function
.icon-sprites
background-image: inline-image("icons/sprite.png") /* ! */
height: 35px
width: 35px
#some-icon
background-position: -12px 0px
#another-icon
background-position: -50px 0px
We simply change our declaration from image-url, to inline-image and Compass embeds our image into our stylesheet directly. Here is the CSS file that is generated based on our little change:
.icon-sprites {
background-image: url('data:image/gif;base64,R0lGODlh+gAkAPcAANDdl9HemrHGUd3nu9vku8/Ysb7GotjhucHJpaW2YLbFecHPiLbDgrvIhq25fL/Mi7O/grS9j7rDldTerNXfsNjhtr/HoeHqv9DYsN/ovsrSrMXNqOLrweHqwNTctavATq/EUK7CT63BT6u/Tqi8Tae6TKW4S6S3S6K2SqK1SqCzSZ+ySZ6xSJmsRrDFUa7DUKm9TqW5TKG0SpyvSJutR6O2TKS3TaCzS5+yS6S4TqK1TaG0TJ+xS6S3Tp+xTJyvS6K0TputS6K0UJ+xT56vTqCyUKCxUKS2U5yuT5ytT6GyUp+wUZ2uUJqqT56vUpytUZmpT6W3VqKzVKGyVKCxU6O1VpytU6CwVae5WqS1WKKzV6GxVp6vVaGyV52tVae3W6OzWZ+vV52tVqi5XaGxWZurVqu7X6W1XJ+uWZ2sWKi4X6e3X6a1XqGwXJyrWay8Y6m4Yae3YKy9ZKq6Y5+tXaq5ZKm4ZKe2Y6CuX6y8Z6a0Y6KxYZ+tX6u7Z628aZ+tYKy7aae2Zqa0ZaOxY56rYLHBbbC/bKi3Z6e1Zqq5abHAbqm4aaOxZbLAb6+9bau6a6a0aKWzZ7C/b6GuZbPBcau5bLXEc6SxaKGuZqKwaLbFdbXDdKy6b7fFdq+9cbPBdaOvarnHerrIe7vKfa26c6ezb6Swbau4c7vJfrXCerK/eL7Mgb3LgLG+eKy4dKezccHPhLG9eaaxccLQhrXCfam1dKaxcrTBfcTRiLbCf6u2d6m0dsbTi7rGgrnGgsbUjK66e8nXj8vYkcrXkMLOir7LiL3Jh7vHhbjEg665fMXRjbbBgrS/gbK+gLG9f7K9f8zZk7jEhc/cls3alc7alczZlMvYk8nWksfTkMXSj8TQjr3JibrGh7jDhbfChLXAg6+6f6u2fM7blsrXk8nVksjUkcPPjsLOjb/Li7vGiLjEhrfBirK7ibrBmqGyTKCxTKKzTqGyT5qqTKSzW6i3X5+tWq+9a7TCcKGtZqWwa6Wwbqaxb6SvbrG8e6q0d////yH5BAEAAP8ALAAAAAD6ACQAAAj/AAMIHEiwoMGDBf8pXMiwocOHECNKnEjxH8KLGA1W3Mix48aMIDECGEmypMmTKE16XMmyZcOUMGOedEmzpkOZOHPq3AnAps+fDHkKBUrUo9CjSHEWXdoyaU6mUCM6nUo1qlWKVGNe3fov61RhYFioWDJLJ9ezQb2iRBtVbVIwMFy4EOGD11O2Z3WyohIvzjCzeJe6PfpLhQsBiEtIuhv4as5gPj68IHEGcGOgMoWFohcF3oojWQyV3SmM1S+TqFAgRkwC0UlWdktedoyzEQnEIFKMljkbc0poityVGBEChAsQImCgyAJLp5MULAyVLPfjBe4UrUquKpIiSOyRvdvi/1QSYjUMQIzD00w5qwgJ6wJchBBRPL6IFHmk4aTxAkQJNcKQlAkLJJCAghvlkNSJDCLkpoBs6gkmEywmHIbYC0Xox1uE6500yg4iHPdBDCqQAQkZQJAQwnEkfDGNTITUUBwMU5CkjT+E/AFKOgqi0B8JTRADIYe+xfTFB6vFR8I9ShHZlEmz7FBeCCYMEoEBG2iwgQHhSDECi3DIhE4+PHwAAglzkFQNOuhkQ5ImPoZQAx3fUDOkkzadRA0sm2hSCBYwgJCkAP69ockmouCyFp4rmQRNESIQ2gM7GhDAwaWXemABGJGCEIMlMmWTzBPvxUAJezrM584+28zEaJ4kBf+zxg0nlEACDCEOitsHJJQQAwrx9PEiSa8aVZIfJBwmAiQHYOosBxdIcMJhL7gTYEzUfFPPezLsVpIUH4iAQy0JulqsSyVdEaiu7Or6wgmO3HnuRCUJc4OgAoSgxqUZNFAHHLQMcCkBXcBHgj05pfNEuFKcZAgJIuxQyzUpzYsuSTzg2+7GiI1AhrwWQ1RSJyWs5gIMZihwRAki3IcMpohEmq8SOj2DgwgldFLSL1LGcAnFFYfcKElWIMnxxi6UsAfIQr9EEhsjJCmfCC/I9UIKzmB6h8wuoOAtTNRcwrIRJfUBwwdcaKNV0x2V5AoPuR49qAsjJHEM02wrVNIQ8A3/CsIINSwhCwaXXiCExiV8opM2RIhggigkuRPCCadsmHdF073iw5dyrwYCDEwAYyexl99E0g0WDvqBHu0gUEAHlz5w22okPLITIySMEMdIosQgAhflwlQ65iWRAwwXJGjM8ZleNDMs6cMvVJJh7JKwTgaYXoCODX0LQMIiOxmTwgs+jGQHDCRE0mT0Upk0jTdhGH30CGioI4657Jfkg/K0R3MpBb4YQwm6571K7IQaTggBCk6jBRHUoBfrY99DUhKLGHSuBgwImgRL4gSZqc4Tl7JDCVakKxOogidtGBEqAMACEKygGhGUoNNOsoAadE4GMFzUBkmyBxiwyz+WKESy/354A2XwRBDoi5cKXnCF9MgwLSdBhQXlVoPvqESGJbkFClLnORikoAYf4OJqPiAGDekkEDCAwSEAoAIRbMGJT9QbSszWORKcSof5I8k4rOBBxJwMEhFgRxb66McaVI4naCRBINjoRjjGMSVUKI/cRDAPDeaRJK5AgfJAUIVKHUACJRvUCLyADaEcAgYl4AQbX0AFRz4RJcGQQerm0qsRbPIdloyeScpBhyFeKAGYqsAJBkWXfhxlHo5LBQAypgJXYvE1NsQNCZyQj1fgYQdh9KMKoIFHXZrEGFZIHm56MIFLFcOHqxGBCkphjaMU4QUyMCIXRBCDVcQwjl05CTGCYP8mEaCAD8zIBjm2oYsnxOADIYCBPO6HP2+aZBlpiAF8RJADRcihBPiimw/2UUqhzEJGRLDTINJoh3s+8iTTkIUXZpAEfWzDjNbwBj68gIQy6CKXw0OJNLgxCR685zghICEIPnACL+gieDxJRAlggIeRaPEDb7QcPuV4knKoAxzf6KhJzKEOCKhjHDgtHUzO4YA/EAEFtuqVCVQgBlN0o51IIQUNWpCLkVwDCiwog0lfORi85S0m4kAHBHaRCUxMAhP6cIA6tIqUbNhiFzkEwDP4oY69PrOv4LlsTKyRDXOcwxzYYChVrhFZAFADqcKbqvQwm9kdsva1PVEtVTHLV9gKsla2s+1rbTEbEAA7');
height: 35px;
width: 35px;
}
NOTE: This is all fine and good, but remember, there is a tradeoff occurring when you embed your images into your stylesheets. HTTP is smart enough to attempt to load multiple images, stylesheets, javascript files, etc in a concurrent nature (usually not more than 2 a time), so by integrating the overhead of this file into your stylesheet, you are effectively increasing your stylesheet download time to whatever it weighs + every image you are inlining. In some cases, this is a great thing, especially if your icon sprite is less than 4KB.
So, use your best judgement and keep an eye on your stylesheet file size when using inline-image, this can be an incredibly useful trick for speeding up the appearance of your pages, depending on their design.
From Good to Great Presentation
View more presentations from perezd.
Compass/SASS User Meetup, in Mountain View, CA!
Are you going to be at the Compass/Sass User meetup, June 29th @ 7:00 PM? I will be! In fact, I’ll be doing a short presentation, “From Good to Great, 5 Things You didn’t know Compass could do.”
Also, we’ll be hearing from Nathan Weizenbaum (creator of Sass), Chris Eppstein (creator of Compass), and a bit from the engineering team of Sencha! (creators of the new html5/mobile app framework powered by compass)
Other topics of discussion:
- New to Sass 3? (Hear about SCSS)
- wtf is @extend? (indepth)
- How can I contribute/make a plugin for compass?
- … whatever else!
There will also be hacking and compass discussions to be had! If you want to know whats happening at the cutting edge of front-end software design, you need to be here!
Rails 2.3 Installer for Compass/Sass
Have you always wanted to try out Compass and Sass, but were anxious or overwhelmed about the mess and setup of integrating the framework and tools into your web apps?
Do you use Compass/Sass a bunch, and dread the repetitive steps to integrate your favorite tool into your favorite web framework?
FEAR NOT, I recently submitted a Rails 2.3 application template that can easily setup and configure Compass and Sass for a new or existing rails app. As of Compass 0.8, my app template has become the official Compass installer for Ruby on Rails!
Want to try it out right now? No download necessary, just run this command:
$ rails <yourappnamehere> -m http://www.compass-style.org/rails/installer
Viola! Just answer the three simple questions, and the template will take care of the rest! If you want to learn more about Compass/Sass, read my epic blog post or watch my screencast!
