chriseppstein

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

chriseppstein

Two different types with this name exist, but they are unrelated.

I'm a little slow, so maybe everyone else already realized this, but after struggling for almost a year with periodic "Two different types with this name exist" error from typescript, I've realized it is actually really helpful error and it highlights a real problem that I've failed to understand until this week.

I've been working around this issue by making sure that my libraries with common dependencies are always on the same version for some of our shared library dependencies. This works because package managers dedup the same version of a dependency. But when the versions diverge you get different instances of the library. In this mode, Good Guy TypeScript is telling us "Hey you're comparing values and types from different instances of the same library and that's a Bad Idea."

chriseppstein

@mixin ie6 { * html & { @content } }

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

chriseppstein

module Sass::Script::Functions
  def random(max = Sass::Script::Number.new(100))
    Sass::Script::Number.new(rand(max.value), max.numerator_units, max.denominator_units)
  end
end

chriseppstein

module Tracer
  def trace(method)
    method, ending = split_method_name(method)
    define_method "#{method}_with_trace#{ending}" do |*arguments|
      puts "called #{self.class}##{method}#{ending}(#{arguments.map(&:inspect).join(', ')})"
       returning(send("#{method}_without_trace#{ending}", *arguments)) do |v|
         if block_given?
           yield self, v
         end
         puts "#{self.class}##{method}#{ending} => #{v.inspect}"

chriseppstein

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

chriseppstein

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

chriseppstein

@function up-to($list, $index) {
  $l: ();
  @each $e in $list {
    @if length($l) < $index {
      $l: append($l, $e, list-separator($list));
    }
  }
  @return $l;
}

chriseppstein

#!/usr/bin/env ruby
require 'rubygems'
require 'nokogiri'
require 'open-uri'

url = ARGV[0]

class Document < Nokogiri::XML::SAX::Document
  SEMANTIC_CONTAINERS = %w(body article section nav aside hgroup header footer)
  COUNT_ELEMENTS = %w(p a)

chriseppstein

@function color-shift($color, $amount: 10%) {
  @return if(lightness($color) > 50%,
             darken($color, $amount),
             lighten($color, $amount))
}

$my-bg-color: #333;
$my-fg-color: #c00;

.shifted {