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

//
// 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

=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

@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

// 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

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

// An example for:
// http://blog.rebeltix.com/2011/04/css-sass-and-how-to-improve-the-mess/

@for $i from 1 through 6 {
  h#{$i} {font-size: 12pt + (14 - $i*2);}
}

@for $i from 1 through 3 {
  box-level-#{$i} {background-color: #333 + ($i * #333);}
}

chriseppstein

body > div {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(5%, rgba(0, 0, 0, 0.5)), color-stop(5%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0px, rgba(0, 0, 0, 0)), color-stop(0px, rgba(0, 0, 0, 0.25)), color-stop(40px, rgba(0, 0, 0, 0)), color-stop(50px, rgba(0, 0, 0, 0)), color-stop(60px, rgba(0, 0, 0, 0.25)), color-stop(100px, rgba(0, 0, 0, 0)), color-stop(110px, rgba(0, 0, 0, 0)), color-stop(110px, rgba(0, 0, 0, 0.25)), color-stop(150px, rgba(0, 0, 0, 0)), color-stop(160px, rgba(0, 0, 0, 0)), color-stop(160px, rgba(0, 0, 0, 0.25)), color-stop(200px, rgba(0, 0, 0, 0)), color-stop(210px, rgba(0, 0, 0, 0)), color-stop(210px, rgba(0, 0, 0, 0.25)), color-stop(250px, rgba(0, 0, 0, 0)), color-stop(260px, rgba(0, 0, 0, 0)), color-stop(260px, rgba(0, 0, 0, 0.25)), color-stop(300px, rgba(0, 0, 0, 0)), color-stop(310px, rgba(0, 0, 0, 0)), color-stop(310px, rgba(0, 0, 0, 0.25)), color-stop(350px, rgba(0, 0, 0, 0)), color-s

chriseppstein

# Code below generates this error
# undefined method `value' for "members/fenwick1.gif":String
# for line ih = ...

module ApplicationHelper
  def member_image_link(member)
    return if member.logo.blank?
    
    ih = image_height(Sass::Script::String.new(member.m_logo))
    ihv = ih.length-2

chriseppstein

@mixin some_sprite($state) {
  background-image: url(...);
  background-position: if($state is hover, 18px, 0px) 18px;
}

// somewhere down the line ..........

.thingy {
  @include some_sprite(default);
}