chriseppstein

@mixin agenda($type: "Lesbian") {
  @if (rand(100) < 3) {
    &:before {
      content: "#{$type} Kisses 👄👄";
      display: none;
    }
  }
}

chriseppstein

#include <nan.h>
#include "number.h"
#include "../create_string.h"

using namespace v8;

namespace SassTypes
{
  Number::Number(Sass_Value* v) : SassValueWrapper(v) {}

chriseppstein

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

@function extract-keyword-arg($argname, $args...) {
  $kwargs: keywords($args);
  @return map-get($kwargs, $argname);
}

chriseppstein

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

.button-base
  background-color: #f0f0f0
  border-radius: 20px
  border: 1px solid #ccc
  color: #333

chriseppstein

Mandelbrot in SCSS

The mandelbrot algorithm in SCSS.

A Live example by Gregor Adams

chriseppstein

@function str-replace($source, $substring, $replacement, $fail-silently: false) {
  $start: str-index($source, $substring);
  @if $start {
    @return str-slice($source, 1, $start - 1)  + $replacement + str-slice($source, $start + str-length($substring))
  }
  @if $fail-silently {
    @return $source;
  } @else {
    @error "'#{$substring}' was not found in '#{$source}'";
  }

chriseppstein

@function -my-function-exists($name) {
  $name: unquote($name);
  $result: function-exists($name);
  @if $result == "function-exists(#{$name})" {
    @return false;
  } @else {
    @return $result;
  }
}

chriseppstein

How did you come to be interested in Sass and then creating Compass?

When I found Sass in 2007 it was version 1.8 and part of another open source project called Haml which is an HTML templating language for ruby. While Haml was good, I found Sass to be revolutionary. It didn't have most of the features it has today, but it had enough for me to see the promise of a system where stylesheet libraries (often called CSS frameworks) could be distributed like software libraries with proper APIs and none of the downsides that traditional CSS Frameworks had.

chriseppstein

@each $browser in browsers() {
  .#{$browser} {
    @each $version in browser-versions($browser) {
      threshold: $version omitted-usage($browser, $version);
    }
  }
}

chriseppstein

• CSSCritic
• PhantomCSS
• Wraith
• Diffux
• Depicted