Brice Shatzer BriceShatzer

MIT License

Copyright (c) [year] [fullname]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

How `@extend` Works

@akhleung is working on hcatlin/libsass and was wondering how @extend is implemented in the Ruby implementation of Sass. Rather than just tell him, I thought I'd write up a public document about it so anyone who's porting Sass or is just curious about how it works can see.

Note that this explanation is simplified in numerous ways. It's intended to explain the most complex parts of a basic correct @extend transformation, but it leaves out numerous details that will be important if full Sass compatibility

Some articles:

How to automate a visual regression test (WebdriverCSS)
CSS Testing with PhantomCSS, PhantomJS, CasperJS and Grunt (PhantomCSS)
Automating Style Guide-Driven Development (Style Guide Based Testing
Automating CSS Regression Testing (BackstopJS)

Some tools:

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	/**
	* Annoying.js - How to be an asshole to your users
	*
	* DO NOT EVER, EVER USE THIS.
	*
	* Copyright (c) 2011 Kilian Valkhof (kilianvalkhof.com)
	* Visit https://gist.github.com/767982 for more information and changelogs.
	* Visit http://kilianvalkhof.com/2011/javascript/annoying-js-how-to-be-an-asshole/ for the introduction and weblog
	* Check out https://gist.github.com/942745 if you want to annoy developer instead of visitors
	*

	@import "compass/css3/images";

	// CSS-only multi-line ellipsis with generated content
	// yields `position:relative`, so remember to declare an eventual `position:absolute/fixed` after including this mixin
	@mixin limitLines(
	$maxLinesPortrait, // Mandatory: The number of lines after which the clipping should take action.
	$maxLinesLandscape: $maxLinesPortrait, // You may provide a different line limit for landscape orientation.
	// Note that 'portrait' is our default orientation. However, if you omit $maxLinesLandscape,
	// the value of $maxLinesPortrait is used for whatever orientation (that is, without a media query).

	#!/bin/sh
	# Redirect output to stderr.
	exec 1>&2
	# enable user input
	exec < /dev/tty

	consoleregexp='console.log'
	# CHECK
	if test $(git diff --cached \| grep $consoleregexp \| wc -l) != 0
	then

	@font-face {font-family: "Droid Sans"; src: local("Tahoma");}
	@font-face {font-family: "noto"; src: local("Tahoma");}
	@font-face {font-family: "Arial Negreta"; src: local("Arial");}
	@font-face {font-family: "Droid Sans"; font-weight: bold; src: local("Tahoma Bold");}
	@font-face {font-family: "Droid Serif"; src: local("Tahoma");}
	@font-face {font-family: "Droid Serif"; font-weight: bold; src: local("Tahoma Bold");}
	@font-face {font-family: "Droid Serif"; font-style: italic; src: local("Tahoma Italic");}
	@font-face {font-family: "opensans"; src: local("Tahoma");}
	@font-face {font-family: "open_sans"; src: local("Tahoma");}
	@font-face {font-family: "open_sans"; font-weight: bold; src: local("Tahoma Bold");}

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

Brice Shatzer BriceShatzer

How @extend Works

What forces layout / reflow

Element APIs

Getting box metrics

How `@extend` Works