antsa

// Maruku (https://github.com/nex3/maruku)

.content
  :markdown
    ## Heading
    Some text here

// =>

<div class='content'>

antsa

// =========================
// Example 1: using a @mixin
// =========================

// SCSS:

    @mixin a_pink_box() {
    	float: left;
    	display: block;
    	color: pink;

antsa

// A sass @mixin to create the body border effect
// with pseudo elements as described by CSS-Tricks:
// http://css-tricks.com/body-border/

@mixin bodyborder($color, $width) {
  body {
    border-left: $width solid $color;
    border-right: $width solid $color;
    
    &:before, &:after {

antsa

// Provides a mixin to define hyphenation
//
// Requires Compass
//
// (http://blog.fontdeck.com/post/9037028497/hyphens)
// (http://www.w3.org/TR/css3-text/#hyphenation)
//
// $value - The hyphenation property value. One of "none", "manual", "auto" or "all"
//
// Example .scss:

antsa

require "chunky_png"
require "base64"

module Sass::Script::Functions
  def background_noise(kwargs = {})
    opts = {}
    Sass::Util.map_hash({
        "intensity"  => [0..1,          "",   :Number, Sass::Script::Number.new(0.5) ],
        "opacity"    => [0..1,          "",   :Number, Sass::Script::Number.new(0.08)],
        "size"       => [1..512,        "px", :Number, Sass::Script::Number.new(200) ],

antsa

Testing IE 7/8/9 on OSX

Steps needed to start IE7/8/9 testing on OSX with VirtualBox

• Download and install VirtualBox (https://www.virtualbox.org/wiki/Downloads)
• Download the free VPC images of IE versions you need from Microsoft (http://www.microsoft.com/download/en/details.aspx?id=11575)
• For each image, extract the auto-unarchiving .exe. Zipeg was tested and it worked (http://www.zipeg.com/)
• Open the extracted VHD in VirtualBox
• In VirtualBox change the Storage settings: Settings --> Storage --> Remove the drive from under SATA and add it under the IDE driver.

antsa

// Placeholder @mixin for Sass
//
// A mixin to style placeholders in HTML5 form elements.
// Includes also a .placeholder class to be used with a polyfill e.g.
// https://github.com/mathiasbynens/jquery-placeholder
// Requires Sass 3.2.
//
// Example usage (.scss):
// 
// input {

antsa

// A mixin for media queries: @mq
//
// Use with keywords in $medias array:
// @include mq($media: iphone) {
//  ...
// }
// 
// Use with manual queries:
// @include mq("all and (min-width:33em)") {
//  ...

antsa

@mixin all-retina-sprites($map, $map2x) {
  @media (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    $base-class: sprite-map-name($map);

    .#{$base-class}-all-retina-sprites {

antsa

<!-- Fallbacks of SVG -->

<svg width="96" height="96">
    <image xlink:href="svg.svg" src="fallback.png" width="96" height="96"/>
</svg>