jekyll-assets octopress theme.scss

gistfile1.scss

$noise-bg: image-url("{% asset_path images/noise.png %}") top left !default;
$img-border: inline-image("{% asset_path images/straight-border.png %}");

// Main Link Colors
$link-color: #e11e30 !default;
$link-color-hover: adjust-color($link-color, $lightness: 20, $saturation: 45) !default;
$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default;
$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;

// Main Section Colors
$main-bg: #2f2f2f !default;
$page-bg: #252525 !default;
$article-border: #eeeeee !default;

$header-bg: #333 !default;
$header-border: lighten($header-bg, 15) !default;
$title-color: #f2f2f2 !default;
$subtitle-color: #aaa !default;

$text-color: #cccccc !default;
$text-color-light: #aaa !default;
$type-border: #ddd !default;

/* Navigation */
$nav-bg: #2f2f2f !default;
$nav-bg-front: image-url("{% asset_path images/noise.png %}");
$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11));
$nav-color: lighten($nav-bg, 38) !default;
$nav-color-hover: lighten($nav-color, 25) !default;
$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default;
$nav-border: darken($nav-bg, 10) !default;
$nav-border-top: lighten($nav-bg, 15) !default;
$nav-border-bottom: darken($nav-bg, 25) !default;
$nav-border-left: darken($nav-bg, 11) !default;
$nav-border-right: lighten($nav-bg, 7) !default;

/* Sidebar colors */
$sidebar-bg: #2f2f2f !default;
$sidebar-link-color: $link-color !default;
$sidebar-link-color-hover: $link-color-hover !default;
$sidebar-link-color-active: $link-color-active !default;
$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
$sidebar-border-hover: darken($sidebar-bg, 7) !default;
$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default;
$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default;
$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default;

$footer-color: #888 !default;
$footer-bg: #2f2f2f !default;
$footer-bg-front: image-url("{% asset_path images/noise.png %}");
$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11));
$footer-color: darken($footer-bg, 38) !default;
$footer-color-hover: darken($footer-color, 10) !default;
$footer-border-top: lighten($footer-bg, 15) !default;
$footer-border-bottom: darken($footer-bg, 15) !default;
$footer-link-color: darken($footer-bg, 38) !default;
$footer-link-color-hover: darken($footer-color, 25) !default;
$page-border-bottom: darken($footer-bg, 5) !default;


/* Core theme application */

a {
  text-decoration: none;
  @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color, $active: $link-color-active);
}
aside.sidebar a {
  @include link-colors(#2f2f2f, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
}
a {
  @include transition(color .3s);
}

html {
  background: $page-bg image-url("{% asset_path images/line-tile.png %}") top left;
}
body {
  > div {
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}

You just want to use {% asset_path noise.png %} as long as you have your sources for the jekyll-assets gem setup right in config.yml:

# Plugin: jekyll-assets
assets:
  # Pathname of the destination of generated (bundled) assets relative to the destination of the root.
  dirname: blog/assets
  # Base URL of assets paths.
  # baseurl: /assets/
  baseurl: http://cloudfront.coneybeare.me/blog/assets/
  # Pathnames where to find assets relative to the root of the site.
  sources:
    - _assets/images
    - _assets/imgs
    - _assets/fancybox
    - _assets/javascripts
    - _assets/jwplayer
    - _assets/stylesheets
    - _assets/webfonts

The sources section is where you tell jekyll-assets to look for paths. so because _assets/images contains noise.png, it will find them. If you had a subfolder in there called noises, with the noise.png file in that subfolder, you could then call {% asset_path noises/noise.png %} to make it work, or add the _assets/images/noises folder to your config. understand?

it actually seems that compass helpers

image-url($path, $only-path, $cache-buster)

inline-image($image, $mime-type)

were breaking correct {% asset_pipeline path/to_asset.ext %} compilation, so by replacing those to url I am now able to use the asset pipeline.

$noise-bg: url("{% asset_path noise.png %}") top left !default;
$img-border: url("{% asset_path straight-border.png %}");

// Main Link Colors
$link-color: #e11e30 !default;
$link-color-hover: adjust-color($link-color, $lightness: 20, $saturation: 45) !default;
$link-color-visited: adjust-color($link-color, $hue: 80, $lightness: -4) !default;
$link-color-active: adjust-color($link-color-hover, $lightness: -15) !default;

// Main Section Colors
$main-bg: #2f2f2f !default;
$page-bg: #252525 !default;
$article-border: #eeeeee !default;

$header-bg: #333 !default;
$header-border: lighten($header-bg, 15) !default;
$title-color: #f2f2f2 !default;
$subtitle-color: #aaa !default;

$text-color: #cccccc !default;
$text-color-light: #aaa !default;
$type-border: #ddd !default;

/*[> Navigation <]*/
$nav-bg: #2f2f2f !default;
$nav-bg-front: url("{% asset_path noise.png %}");
$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11));
$nav-color: lighten($nav-bg, 38) !default;
$nav-color-hover: lighten($nav-color, 25) !default;
$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default;
$nav-border: darken($nav-bg, 10) !default;
$nav-border-top: lighten($nav-bg, 15) !default;
$nav-border-bottom: darken($nav-bg, 25) !default;
$nav-border-left: darken($nav-bg, 11) !default;
$nav-border-right: lighten($nav-bg, 7) !default;

/*[> Sidebar colors <]*/
$sidebar-bg: #2f2f2f !default;
$sidebar-link-color: $link-color !default;
$sidebar-link-color-hover: $link-color-hover !default;
$sidebar-link-color-active: $link-color-active !default;
$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default;
$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default;
$sidebar-border-hover: darken($sidebar-bg, 7) !default;
$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default;
$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default;
$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default;

$footer-color: #888 !default;
$footer-bg: #2f2f2f !default;
$footer-bg-front: url("{% asset_path noise.png %}");
$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11));
$footer-color: darken($footer-bg, 38) !default;
$footer-color-hover: darken($footer-color, 10) !default;
$footer-border-top: lighten($footer-bg, 15) !default;
$footer-border-bottom: darken($footer-bg, 15) !default;
$footer-link-color: darken($footer-bg, 38) !default;
$footer-link-color-hover: darken($footer-color, 25) !default;
$page-border-bottom: darken($footer-bg, 5) !default;


/*[> Core theme application <]*/

a {
  text-decoration: none;
  @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color, $active: $link-color-active);
}
aside.sidebar a {
  @include link-colors(#2f2f2f, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active);
}
a {
  @include transition(color .3s);
}

html {
  background: $page-bg url("{% asset_path line-tile.png %}") top left;
}
body {
  > div {
    background: $sidebar-bg $noise-bg;
    border-bottom: 1px solid $page-border-bottom;
    > div {
      background: $main-bg $noise-bg;
      border-right: 1px solid $sidebar-border;
    }
  }
}