Permalink
Browse files

Site updated at Thu Oct 21 07:13:48 UTC 2010

  • Loading branch information...
1 parent 5598dbd commit e25dd0e6517f39215dd4110fd532f6d996e02d4e @chriseppstein committed Oct 21, 2010
@@ -2,8 +2,8 @@
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
- <title>What's New in Sass 3.1: Named Arguments</title>
- <meta content="Details on the new syntax for calling functions and mixins." name="description" />
+ <title>Compass Extensions are Easy | How to make a simple compass extension</title>
+ <meta content="How to make a simple compass extension." name="description" />
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
@@ -62,21 +62,21 @@ <h1 class="n">#chris-eppstein</h1>
<div class="blog" id="page">
<div class="contents section alpha">
<div id="tweet-this">
- <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="chriseppstein" data-url="http://chriseppstein.github.com/blog/2010/10/22/sass-3-1-named-arguments/" data-text="What's New in Sass 3.1: Named Arguments">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+ <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="chriseppstein" data-url="http://chriseppstein.github.com/blog/2010/10/21/compass-extensions-are-easy/" data-text="Compass Extensions are Easy">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div class="metadata">
Published:
- <span class="pubdate">22 Oct, 2010</span>
+ <span class="pubdate">21 Oct, 2010</span>
</div>
<h2 class="header">
- What&#8217;s New in Sass 3.1: Named Arguments
+ Compass Extensions are Easy
</h2>
- <div class="article"><h2>Rationale</h2>&#x000A;&#x000A;<p>If you&#8217;ve ever had a mixin that needed to accept many arguments for customization,&#x000A;but you wanted to mostly rely on the default values for those arguments then you&#8217;ve&#x000A;probably found yourself frustrated. To make this situation easier to manage, Sass is&#x000A;introducing <strong>Named Arguments</strong> in Sass 3.1. Named arguments are of the form&#x000A;<code>$name: value</code> and must come after any normal (positional) arguments being passed.&#x000A;They can be used for either optional or required arguments.</p>&#x000A;&#x000A;<h2>Syntax</h2>&#x000A;&#x000A;<p>Consider this mixin:</p>&#x000A;&#x000A;<pre><code>@mixin border-radius($value, $moz: true, $webkit: true, $standard: true) {&#x000A; @if $moz { -moz-border-radius: $value }&#x000A; @if $webkit { -webkit-border-radius: $value }&#x000A; @if $standard { border-radius: $value }&#x000A;}&#x000A;</code></pre>&#x000A;&#x000A;<p>Sass now supports the following ways of including this mixin:</p>&#x000A;&#x000A;<pre><code>@include border-radius(10px);&#x000A;@include border-radius(10px, true, false);&#x000A;@include border-radius(10px, $webkit: false);&#x000A;@include border-radius($value: 10px, $webkit: false);&#x000A;@include border-radius($webkit: false, $value: 10px);&#x000A;@include border-radius(10px, $standard: false, $webkit: false);&#x000A;</code></pre>&#x000A;&#x000A;<p>In addition to mixins, any functions defined by Sass or an extension to Sass can now&#x000A;<a href="http://github.com/nex3/sass/blob/master/lib/sass/script/functions.rb#L189-221">declare that they accept</a> named arguments. For instance, because&#x000A;Sass implements it&#8217;s own <code>hsl()</code> function so that the color may be understood and manipulated,&#x000A;it is possible to write:</p>&#x000A;&#x000A;<pre><code>p {&#x000A; color: hsl($hue: 180, $saturation: 78%, $lightness: 57%);&#x000A;}&#x000A;</code></pre>&#x000A;&#x000A;<p>Since the named arguments are variable names, underscores and dashes can be used interchangeably&#x000A;just like elsewhere in Sass.</p>&#x000A;&#x000A;<h2>Documentation</h2>&#x000A;&#x000A;<p>The documentation of <a href="http://github.com/nex3/sass/commit/a0effa0114e66df310d099869f9c7bb4778fceab#diff-2">Sass functions</a> now includes the argument names so that you&#x000A;may use them. Since we&#8217;ve been planning on this feature for a while now, Compass&#8217;s&#x000A;<a href="http://compass-style.org/docs/">documentation</a> already displays the argument names for you to use.</p>&#x000A;&#x000A;<h2>Improved Readability</h2>&#x000A;&#x000A;<p>CSS is a verbose language and for good reason: it optimizes for the reader. This is one&#x000A;of the ways that I think CSS is great for newcomers. Since mixins are non-standardized&#x000A;abstractions they are not well known to the average reader who is unfamiliar with your project.&#x000A;It is our hope that Sass users will take advantage of the new calling semantics to produce&#x000A;slightly more verbose stylesheets that are easier to understand because of the use of well-named&#x000A;arguments on both the calling and receiving sides of a mixin.</p>&#x000A;&#x000A;<h2>Argument Names are Part of Your API</h2>&#x000A;&#x000A;<p>It&#8217;s important to remember that your argument names will now be part of your mixin&#8217;s public API&#x000A;and those names should only be changed with careful consideration of the callers. <strong>Now might&#x000A;be a good time to change your argument names in preparation of the upcoming release</strong>.&#x000A;Consider using Sass&#8217;s <code>@warn</code> directive to deprecate argument names before you change them&#x000A;or to find the places where they are being used in your project.</p>&#x000A;&#x000A;<h2>New Power for Ruby-based Sass Functions</h2>&#x000A;&#x000A;<p>Sass functions defined in ruby can accept any number of positional arguments. Similarly,&#x000A;they can declare that they accept any keyword arguments by passing <code>:var_kwargs =&gt; true</code>&#x000A;when declaring the function to Sass. In these functions, any keyword&#x000A;arguments that do not get bound to named positional arguments, get passed as a Hash of&#x000A;name value pairs that the function can inspect and handle accordingly.</p></div>
+ <div class="article"><p>If you&#8217;ve ever taken the time to read the <a href="http://compass-style.org/docs/tutorials/extensions/">documentation on compass extensions</a>&#x000A;you&#8217;ve probably been a little overwhelmed by it. Compass extensions are powerful &#8211; an&#x000A;extension can provide:</p>&#x000A;&#x000A;<ol>&#x000A;<li>Stylesheet libraries</li>&#x000A;<li>Project templates &amp; patterns that can install&#x000A;front-end assets into the user&#8217;s project.</li>&#x000A;<li>Integration with an application framework (Ruby based or otherwise).</li>&#x000A;<li>Custom ruby-based sass functions.</li>&#x000A;<li>New command line subcommands.</li>&#x000A;<li>New configuration options.</li>&#x000A;</ol><h2>All I want to do is share some stylesheets!</h2>&#x000A;&#x000A;<p>But you don&#8217;t have to do any of that fancy stuff. This should be easy &#8211; and it is!&#x000A;Just follow these 5 simple steps:</p>&#x000A;&#x000A;<ol>&#x000A;<li>&#x000A;<p>Make a directory with the name of your extension, create a subdirectory named <code>stylesheets</code>&#x000A;and put your stylesheets in there:</p>&#x000A;&#x000A;<pre><code>mkdir -p my_awesome_extension/stylesheets&#x000A;cp -r my_project/sass/utilities/* my_awesome_extension/stylesheets&#x000A;</code></pre>&#x000A;</li>&#x000A;<li>&#x000A;<p>Create an archive of your extension:</p>&#x000A;&#x000A;<pre><code>tar -zcvf my_awesome_extension-0.1.0.tar.gz my_awesome_extension&#x000A;</code></pre>&#x000A;</li>&#x000A;<li><p>Post your extension online somewhere.</p></li>&#x000A;<li>&#x000A;<p>Download/Copy the extension and unpack it into your project&#8217;s extensions directory:</p>&#x000A;&#x000A;<pre><code>mkdir extensions # rails projects should use vendor/plugins/compass_extensions&#x000A;cd extensions&#x000A;# download or copy the extension to this folder&#x000A;tar -zxvf my_awesome_extension-0.1.0.tar.gz&#x000A;rm my_awesome_extension-0.1.0.tar.gz&#x000A;</code></pre>&#x000A;</li>&#x000A;<li>&#x000A;<p>You can now import your extension&#8217;s stylesheets:</p>&#x000A;&#x000A;<pre><code>@import "my_utility"&#x000A;</code></pre>&#x000A;</li>&#x000A;</ol><p>That&#8217;s it. Sorry if I made it sound hard! You don&#8217;t even have to make an archive file.&#x000A;You could simply create a git repo and clone it when you need it &#8211; any way that gets&#x000A;the extension files into the project&#8217;s extensions directory.</p></div>
<div class="footer">
<div id="disqus_thread"></div>
<script type="text/javascript">
//<![CDATA[
- var disqus_url = "http://chriseppstein.github.com/blog/2010/10/22/sass-3-1-named-arguments";
+ var disqus_url = "http://chriseppstein.github.com/blog/2010/10/21/compass-extensions-are-easy";
var disqus_developer = 1;
//]]>
</script>
View
@@ -61,7 +61,7 @@ <h1 class="n">#chris-eppstein</h1>
<div id="content">
<div id="page">
<div class="contents">
- <h2 style="margin-top:0">Post Archives</h2>&#x000A;<h3>2010</h3>&#x000A;<ul>&#x000A; <li class="">&#x000A; <a href="/blog/2010/09/11/compass-merging-with-lemonade/">Compass & Lemonade</a>&#x000A; <span class="pubdate">11 Sep, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/09/01/blurring-the-line-between-content-and-presentation-with-data-attributes/">Data Attributes: Blurring the Line Between Content and Presentation?</a>&#x000A; <span class="pubdate">01 Sep, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/08/16/sass-language-design/">Sass Language Design: Philosophy & Approach</a>&#x000A; <span class="pubdate">16 Aug, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/08/14/sass-recipes/">Sass Recipes: Simple, Working Sass examples</a>&#x000A; <span class="pubdate">14 Aug, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/08/02/sass-extend-challenge/">Sass Challenge: Use selector inheritance this week.</a>&#x000A; <span class="pubdate">02 Aug, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/08/01/building-a-personal-framework/">Building a Personal CSS Framework with Compass</a>&#x000A; <span class="pubdate">01 Aug, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/07/15/refactor-my-stylesheets-the-negative-value-mixin/">Refactor My Stylesheets: The Negative Value Mixin</a>&#x000A; <span class="pubdate">15 Jul, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/06/19/1st-compass-sass-meetup/">SF Bay Area Sass Meetup: June 29, 2010</a>&#x000A; <span class="pubdate">19 Jun, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/28/nested-bundles/">Working with Nested Application Bundles</a>&#x000A; <span class="pubdate">28 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/25/refactor-my-stylesheets-digg-edition/">Refactor My Stylesheets: The Digg.com Edition</a>&#x000A; <span class="pubdate">25 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/17/where-are-your-images/">Where are your Images?</a>&#x000A; <span class="pubdate">17 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/14/compass-roadmap/">Compass 1.0 Roadmap</a>&#x000A; <span class="pubdate">14 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/10/announcing-the-v0-10-release/">Compass v0.10 Released</a>&#x000A; <span class="pubdate">10 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/04/11/compass-core-team/">Introducing the Compass Core Team</a>&#x000A; <span class="pubdate">11 Apr, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/02/08/haml-sucks-for-content/">Haml Sucks for Content</a>&#x000A; <span class="pubdate">08 Feb, 2010</span>&#x000A; </li>&#x000A;</ul>&#x000A;<h3>2009</h3>&#x000A;<ul>&#x000A; <li class="">&#x000A; <a href="/blog/2009/12/08/the-year-in-review/">2009 - In Review</a>&#x000A; <span class="pubdate">08 Dec, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/10/19/css-unsupported-directive/">We Can Have Hack Free CSS With the @unsupported Directive</a>&#x000A; <span class="pubdate">19 Oct, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/10/12/css-class-inheritance/">CSS Class Inheritance: Abstracting Selectors</a>&#x000A; <span class="pubdate">12 Oct, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/09/30/what-is-compass/">What is Compass</a>&#x000A; <span class="pubdate">30 Sep, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/09/25/separating-style-concerns/">Separating Style Concerns</a>&#x000A; <span class="pubdate">25 Sep, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/09/20/why-stylesheet-abstraction-matters/">Why Stylesheet Abstraction Matters</a>&#x000A; <span class="pubdate">20 Sep, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/09/07/building-a-jekyll-watcher-with-fssm/">Building a Jekyll Watcher with FSSM</a>&#x000A; <span class="pubdate">07 Sep, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/04/26/compass-screencast/">Compass Screencast</a>&#x000A; <span class="pubdate">26 Apr, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/04/14/cultural-impacts-of-data-model-naming/">Setting a Tone with Model Naming</a>&#x000A; <span class="pubdate">14 Apr, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/02/15/a-sassy-response-to-css-framework-disadvantages/">Disadvantages of CSS Frameworks: A Sass-y Response</a>&#x000A; <span class="pubdate">15 Feb, 2009</span>&#x000A; </li>&#x000A;</ul>&#x000A;
+ <h2 style="margin-top:0">Post Archives</h2>&#x000A;<h3>2010</h3>&#x000A;<ul>&#x000A; <li class="">&#x000A; <a href="/blog/2010/10/21/compass-extensions-are-easy/">Compass Extensions are Easy</a>&#x000A; <span class="pubdate">21 Oct, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/09/11/compass-merging-with-lemonade/">Compass & Lemonade</a>&#x000A; <span class="pubdate">11 Sep, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/09/01/blurring-the-line-between-content-and-presentation-with-data-attributes/">Data Attributes: Blurring the Line Between Content and Presentation?</a>&#x000A; <span class="pubdate">01 Sep, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/08/16/sass-language-design/">Sass Language Design: Philosophy & Approach</a>&#x000A; <span class="pubdate">16 Aug, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/08/14/sass-recipes/">Sass Recipes: Simple, Working Sass examples</a>&#x000A; <span class="pubdate">14 Aug, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/08/02/sass-extend-challenge/">Sass Challenge: Use selector inheritance this week.</a>&#x000A; <span class="pubdate">02 Aug, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/08/01/building-a-personal-framework/">Building a Personal CSS Framework with Compass</a>&#x000A; <span class="pubdate">01 Aug, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/07/15/refactor-my-stylesheets-the-negative-value-mixin/">Refactor My Stylesheets: The Negative Value Mixin</a>&#x000A; <span class="pubdate">15 Jul, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/06/19/1st-compass-sass-meetup/">SF Bay Area Sass Meetup: June 29, 2010</a>&#x000A; <span class="pubdate">19 Jun, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/28/nested-bundles/">Working with Nested Application Bundles</a>&#x000A; <span class="pubdate">28 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/25/refactor-my-stylesheets-digg-edition/">Refactor My Stylesheets: The Digg.com Edition</a>&#x000A; <span class="pubdate">25 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/17/where-are-your-images/">Where are your Images?</a>&#x000A; <span class="pubdate">17 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/14/compass-roadmap/">Compass 1.0 Roadmap</a>&#x000A; <span class="pubdate">14 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/05/10/announcing-the-v0-10-release/">Compass v0.10 Released</a>&#x000A; <span class="pubdate">10 May, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/04/11/compass-core-team/">Introducing the Compass Core Team</a>&#x000A; <span class="pubdate">11 Apr, 2010</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2010/02/08/haml-sucks-for-content/">Haml Sucks for Content</a>&#x000A; <span class="pubdate">08 Feb, 2010</span>&#x000A; </li>&#x000A;</ul>&#x000A;<h3>2009</h3>&#x000A;<ul>&#x000A; <li class="">&#x000A; <a href="/blog/2009/12/08/the-year-in-review/">2009 - In Review</a>&#x000A; <span class="pubdate">08 Dec, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/10/19/css-unsupported-directive/">We Can Have Hack Free CSS With the @unsupported Directive</a>&#x000A; <span class="pubdate">19 Oct, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/10/12/css-class-inheritance/">CSS Class Inheritance: Abstracting Selectors</a>&#x000A; <span class="pubdate">12 Oct, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/09/30/what-is-compass/">What is Compass</a>&#x000A; <span class="pubdate">30 Sep, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/09/25/separating-style-concerns/">Separating Style Concerns</a>&#x000A; <span class="pubdate">25 Sep, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/09/20/why-stylesheet-abstraction-matters/">Why Stylesheet Abstraction Matters</a>&#x000A; <span class="pubdate">20 Sep, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/09/07/building-a-jekyll-watcher-with-fssm/">Building a Jekyll Watcher with FSSM</a>&#x000A; <span class="pubdate">07 Sep, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/04/26/compass-screencast/">Compass Screencast</a>&#x000A; <span class="pubdate">26 Apr, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/04/14/cultural-impacts-of-data-model-naming/">Setting a Tone with Model Naming</a>&#x000A; <span class="pubdate">14 Apr, 2009</span>&#x000A; </li>&#x000A; <li class="">&#x000A; <a href="/blog/2009/02/15/a-sassy-response-to-css-framework-disadvantages/">Disadvantages of CSS Frameworks: A Sass-y Response</a>&#x000A; <span class="pubdate">15 Feb, 2009</span>&#x000A; </li>&#x000A;</ul>&#x000A;
</div>
</div>
<div class="aside" id="sidebar">
Oops, something went wrong.

0 comments on commit e25dd0e

Please sign in to comment.