Scott Kellum scottkellum

A test to play with output style that allows line 33 in .scss to be the same in a compiled css.

Inspired by this post: http://jeffcroft.com/blog/2012/mar/20/css-preprocessors-view-source-output-readability/

file structure

style.scss
_foo.scss

OOCSS vs OOSass

note that this requires Sass 3.2 alpha or higher

OOCSS is awesome because it helps us organize our style sheets in clean and simple ways but it can be far too rigid for the new responsive web. How can we use preprocessors to preserve both flexibility and cleanliness of code? Can these objects be abstracted to our preprocessors?

Lets first take a look at three column widths in OOCSS to see how they compare.

CSS

Sass objects

Just about every CSS framework today uses grid objects so lets take the small step of building a straightforward three column grid with CSS objects.

CSS
.width-1 { width: 33.333%; }
.width-2 { width: 66.666%; }
.width-3 { width: 100%; }

HTML

Sass

%half { width: 50%; }
%full { width: 100%; }

#foo {
  @extend %full;

  @media screen (min-width: 600px) {
 @extend %half;

	/* Normalize 7" tablets. */
	/* Original Sass version here: https://gist.github.com/1387706 */

	/* Default is 6/5 offset from a base of 16px. I find the default 3/2 on the tab to be too much. */

	/* Standard 7" 1024x600 tablet -- 16px x (6/5) */
	@media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), all and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait) { html { font-size: 19.2px; } }

	/* 1024x600 tablet with pixel ratio of 3/2 -- 16px x (2/3) x (6/5) */
	@media screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (max-device-height: 400px) and (orientation: landscape), all and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (max-device-height: 683px) and (orientation: portrait) { html { font-size: 12.8px; } }

	<!doctype html>

	<html>
	<head>
	<!-- Encoding -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>

	/*
	@theme Dark
	@override-placeholders html, xml, sourcecode.js
	*/

	:document-base {
	color: #999;
	background-color: #000000;
	insertion-point-color: #ffffff;
	selection-background-color: #444;

	/* Apply blur to the first child, which is the chrome. */
	#chromeContainer .chrome:first-child {
	filter: blur(2px);
	}

	/* Overwrites the above style, until the lightbox is written to the DOM and becomes the new last-child. */
	#chromeContainer .chrome:last-child {
	filter: blur(0);
	}

	/////////////////////////////
	// SIZE
	/////////////////////////////

	// Base size should be the em height on the html element
	$base-size: 16px !default
	$pi: 3.14159265 !default

	// Android uses density-independent pixels. Using the same terminology here for conversions.
	// Convert dips to em, rem, or px

	// MEASUREMENTS

	// Grid types to work on -- column, scale
	$grid-type: column !default
	$scale-grid-direction: rtl !default
	$scale-grid-style: incremental !default

	$base-size: 16px !default
	$line-height: 1.3em !default