Chris Eppstein chriseppstein

## concept.sass
@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);
}

## sass_and_less_compared.markdown

      
              1 file
            
          
              159 forks
            
          
                77 comments
              
            
              749 stars
            
          
                chriseppstein
                / sass_and_less_compared.markdown
            
            
              Created
              November 12, 2010 21:35
            
          
    Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax
in sass, if you prefer it, it has no functional differences from the SCSS syntax.
For Less, I'm using the JavaScript version because this is what they suggest on the website.
The ruby version may be different.
Variables


## my_app_integration.rb
module MyAppIntegration

  extend self

  class Installer < Compass::Installers::ManifestInstaller
    def completed_configuration
      @completed_configuration ||= MyAppIntegration.configuration
    end
    # do special install stuff here
    # like installing package manifests, etc.

## _minified_filenaming.md

      
              2 files
            
          
              0 forks
            
          
                2 comments
              
            
              15 stars
            
          
                chriseppstein
                / _minified_filenaming.md
            
            
              Last active
              April 9, 2025 14:16
            
              
                compiling a minified version of css. This configures your compass project to emit files in minified form when compiling for production. 
              
          
    $ compass compile --environment production && compass compile

Afterwards you will have both the minified and non-minified versions in your output folder. Note that compass clean will not clean up your minified files.

  
## 0_selector_hacks.scss
@mixin ie6 { * html & { @content } }

#logo {
  background-image: url("/images/logo.png");
  @include ie6 { background-image: url("/images/logo.gif"); }
}

## input-placeholder.sass
// Mixins ---------------------------------------------------------------

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

## 0_namespacing.scss
mymodule {
  @at-root {
    .#{&}-header { ... }
    .#{&}-footer { ... }
    .#{&}-body   {
      a          { ... }
      span       { ... }
      p          { ... }
    }
  }

## pgp_public_key.txt
-----BEGIN PGP PUBLIC KEY BLOCK-----

mQINBFhrJiwBEADCAf2/KIky7iVU+OnU16vXs9yewnevPCkKTNwWfcPbmxGGiN/n
DAAUOxJ62XiXC5MKVThr2od9kl/VtBI9IYtAqXCQ/hA9yTUJ47/ZcM55RQqyiwjP
DWjZXzp5V2P+/Ny3nyST1Z7/kH6GlFZ6+nPOkeQSQyYjwqPqwz2UZL0h+rZHTlzE
edGlilStHFOuwdqfsDZtb0qGaXT7AN1BPmn9ulzNG/8lcssIGio3/xLJ5fLCfoqx
Qb0iZPtiOCiPSJwM484a8JgHrwmsoBlOJmJ6tZc9HohU4OFgZyCwnxE0fTcNvuDt
+JDCNCumpoa8/6x7U0eIg2ghJ9EDRliy1O5VxHLttOz/I+1guEedk/EcOx/5Q1Zz
BPdJuBrB2ryJ1GDEJi+Cy3MCI48VTc3/4toGarGyH/gaVWOfFt1QJAaXPPFkij5Y
egfAy6yQYY0uYGml65VK0QdsRuZESjAYkXcUpdOiGdrUp77JwgNEuMmBZ7Q1d3jn

## inline_example.scss
@include "icon/*.png";

#{$icon-sprite-base-class} {
  background-image: inline-sprite($icon-sprites);
}

## 0_usage.scss
@include keyframes(appear-and-roundify) {
  0%   { opacity: 0; @include border-radius(2px);  }
  100% { opacity: 1; @include border-radius(10px); }
}
	@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);
	}
	module MyAppIntegration

	extend self

	class Installer < Compass::Installers::ManifestInstaller
	def completed_configuration
	@completed_configuration \|\|= MyAppIntegration.configuration
	end
	# do special install stuff here
	# like installing package manifests, etc.
	@mixin ie6 { * html & { @content } }

	#logo {
	background-image: url("/images/logo.png");
	@include ie6 { background-image: url("/images/logo.gif"); }
	}
	// Mixins ---------------------------------------------------------------

	=placeholder
	&::-webkit-input-placeholder
	@children
	&:-moz-placeholder
	@children
	&.placeholder
	@children
	mymodule {
	@at-root {
	.#{&}-header { ... }
	.#{&}-footer { ... }
	.#{&}-body {
	a { ... }
	span { ... }
	p { ... }
	}
	}
	-----BEGIN PGP PUBLIC KEY BLOCK-----

	mQINBFhrJiwBEADCAf2/KIky7iVU+OnU16vXs9yewnevPCkKTNwWfcPbmxGGiN/n
	DAAUOxJ62XiXC5MKVThr2od9kl/VtBI9IYtAqXCQ/hA9yTUJ47/ZcM55RQqyiwjP
	DWjZXzp5V2P+/Ny3nyST1Z7/kH6GlFZ6+nPOkeQSQyYjwqPqwz2UZL0h+rZHTlzE
	edGlilStHFOuwdqfsDZtb0qGaXT7AN1BPmn9ulzNG/8lcssIGio3/xLJ5fLCfoqx
	Qb0iZPtiOCiPSJwM484a8JgHrwmsoBlOJmJ6tZc9HohU4OFgZyCwnxE0fTcNvuDt
	+JDCNCumpoa8/6x7U0eIg2ghJ9EDRliy1O5VxHLttOz/I+1guEedk/EcOx/5Q1Zz
	BPdJuBrB2ryJ1GDEJi+Cy3MCI48VTc3/4toGarGyH/gaVWOfFt1QJAaXPPFkij5Y
	egfAy6yQYY0uYGml65VK0QdsRuZESjAYkXcUpdOiGdrUp77JwgNEuMmBZ7Q1d3jn
	@include "icon/*.png";

	#{$icon-sprite-base-class} {
	background-image: inline-sprite($icon-sprites);
	}
	@include keyframes(appear-and-roundify) {
	0% { opacity: 0; @include border-radius(2px); }
	100% { opacity: 1; @include border-radius(10px); }
	}