chriseppstein

require 'sass'
require 'compass'
require 'fileutils'

str = '@import "blueprint/reset";'

Compass.add_project_configuration("path/to/config")

result = Sass::Engine.new(str, Compass.configuration.to_sass_engine_options.update(:syntax => :scss)).render

chriseppstein

// Style this how you want it to look
.input-placeholder-text
  color: #777

=input-placeholder
  &.placeholder, &:-moz-placeholder, &::-webkit-input-placeholder
    @extend .input-placeholder-text


form#login input

chriseppstein

// Mixins ---------------------------------------------------------------

=placeholder
  &::-webkit-input-placeholder
    @children
  &:-moz-placeholder
    @children
  &.placeholder 
    @children

chriseppstein

@mixin grid_container  {
  margin: auto;
  width: 960px;
  //  Tablet Layout: 768px.
  @media only screen and (min-width: 768px) and (max-width: 991px) {
      width: 764px;
  }

  //  Mobile Layout: 320px.
  @media only screen and (max-width: 767px) {

chriseppstein

This gist is no longer valid. Please see Compass-Rails for instructions on how to install.

chriseppstein

=gradient($startcolor, $endcolor, $startpos: top)
  background-color: $startcolor / 2 + $endcolor / 2
  @if $startpos == "top"
    filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')")
    -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')")
    background-image: -webkit-gradient(linear, top left, bottom left, from($startcolor), to($endcolor))
  @if $startpos == "left"
    filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='")#{$startcolor}unquote("', endColorstr='")#{$endcolor}unquote("')")
    -ms-filter: unquote("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#{$startcolor}', endColorstr='#{$endcolor}')")
    background-image: -webkit-gradient(linear, top left, top right, from($startcolor), to($endcolor))

chriseppstein

//
// How I would approach a fluid grid:
//
// [1] Let the name reflect the % width,
//     eliminating "1 of 12" guesswork.
//
// [2] Also, put 10px of padding to either
//     side, to stack and make a 20px gutter.
//
// [3] Make the box-sizing = border-box, so that

chriseppstein

module Sass::Script::Functions
  
  def includes_string(string, substring)
    assert_type string, :String
    assert_type substring, :String
    Sass::Script::Bool.new(string.value.include?(substring.value))
  end
  declare :includes_string, [:string, :substring]

end

chriseppstein

@mixin filter( $var )
	-webkit-filter: $var
	-moz-filter: $var
	-ms-filter: $var
	-o-filter: $var
	filter: $var

a
   &.on
       @include filter( sepia(100%) hue-rotate(33deg) contrast(69%) unquote("saturate(2)"))

chriseppstein

$test:();
@for $i from 0 through 5 {
  $test: append($test, a b, comma);
}
@debug $test;
@debug nth($test, 1);
@debug nth(nth($test, 1),2);