(dai.tumblr.com) 大胆blah

Kyosuke hamalog: Sass と LESS 以外の選択肢 Stylus →

kyosuke:

Less & Sass Advent calendar 2011 の10日目です。

CSSメタ言語ではSass(SCSS)LESSが流行っているしLess & Sass Advent calendarですが、あえて別の選択肢として「Stylus」というものを紹介しようと思います。

StylusもSassやLESSと同じようにCSSに変換するCSSメタ言語の一つです。 開発者はnode.jsでの超有名ライブラリ「express」を作ったTJ Holowaychuk。 彼はもともとSass(SCSS対応前のバージョン)をnode.jsに移植したSass.js


Bourbon: A set of vanilla Sass mixins that use SCSS syntax →

thechangelog:

The designers at Thoughtbot have thoroughly impressed me with Bourbon, a set of vanilla Sass mixins that use SCSS syntax.

This isn’t the first time we have covered a project by Thoughtbot (search for Thoughtbot). However, this is the first project of theirs that specifically targets Sass. With the adoption of the SCSS syntax of Sass as the default in Rails 3.1, I’m sure that we can expect even more contributions from them to the Sass and Compass ecosystem.

The project was originally championed as sass-mixins by Chad Mazzola and co-conspirator Phil LaPier. 3 days ago it was moved to the Thoughbot org and renamed to Bourbon.

For more Sass related news follow @SassWatch and @TheSassWay.

What do you mean “Vanilla Sass”?

Bourbon was designed to provide a comprehensive framework of Sass mixins that are as vanilla as possible - which basically means they should not deter from the original CSS syntax. The mixins contain vendor specific prefixes for all CSS3 properties for support amongst modern browsers. The prefixes also ensure graceful degradation for older browsers that support only CSS3 prefixed properties.

I agree with Phil LaPier, I’m definitely a fan of Compass as well, but going vanilla Sass with this project as well as adhering to the SCSS syntax is a plus for those that are coming to Sass from CSS and requires less configs and more standard conventions.

So what do I get with Bourbon?

As stated in the readme, Bourbon is a work in progress, so feel free to fork it and help out.

// Custom Functions
@import "functions/compact";
@import "functions/golden-ratio";
@import "functions/tint-shade";

// CSS3 Mixins
@import "css3/animation";
@import "css3/border-radius";
@import "css3/box-shadow";
@import "css3/box-sizing";
@import "css3/flex-box";
@import "css3/inline-block";
@import "css3/linear-gradient";
@import "css3/radial-gradient";
@import "css3/transform";
@import "css3/transition";

// Addons & other mixins
@import "addons/button";
@import "addons/position";

Examples!!

Bourbon does a lot so I expect you to inspect the source yourself, but I’ll list a few popular examples here.

Box Sizing

A new fav to my toolkit, box-sizing will change the box-model of the element it is applied to.

@include box-sizing(border-box);

Border Radius

Border-radius also takes short-hand notation.

@include border-radius(10px);
@include border-radius(5px 5px 2px 2px);

Position

I use position in every design. Instead of writing:

position: relative;
top: 0px;
left: 100px;

You can write:

@include position(relative, 0px 0 0 100px);

Transitions

Transitions supports multiple parentheses-deliminated values for each variable.

@include transition (all, 2.0s, ease-in-out);
@include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
@include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));

Addons and Functions

Bourbon also ships with a number of helpful addons and functions which will be extremely helpful to review for those who want to push the boundaries of their stylesheets.

Requirements and Installation

Whether you’re wanting to install Bourbon in a Rails 3.1.x project, Rails 3.0.9 and below or to a project other than Rails, such as a Serve project or a plain ol’ HTML project, there are instructions for that. Although I will say that I prefer to not copy code from a project like this into my project. I think Compass does this right by leading with including external extensions as gems and keeping them compartmentalized. Keeping it external also promotes any tweaks or changes that need to be made to be put back into the project for all to use and enjoy.

Checkout the readme for details on how to install Bourbon in your project. The only requirement (other than Ruby) is sass 3.1+.

[Project on GitHub] [Readme] [Discuss on Hacker News]