eyecatchup

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

eyecatchup

(function(l, l2, s) {

l2 = l2 || 6;

NodeList.prototype.forEach = [].forEach;
NodeList.prototype.slice = [].slice;

var toc = document.createElement('div');
var headerLevel = l || 2;
var tocStyle = s || 'ul';

eyecatchup

//tiny requestFileSystem Wrapper
//author @ukyo
//apache license

//refer: http://d.hatena.ne.jp/shirokurostone/20111014/1318593601
var fs = (function(window){

var fs = {},
  BlobBuilder = window.WebKitBlobBuilder || window.MozBlobuilder || window.MSBlobBuilder,
  requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem,

eyecatchup

#!/bin/bash
AUTHOR=$(git config user.name)
DATE=$(date +%F)
git log --no-merges --format="%cd" --date=short --no-merges --author="$AUTHOR" --all | sort -u -r | while read DATE ; do
  if [ $NEXT != "" ]
  then
    echo
    echo [$NEXT]
  fi
  GIT_PAGER=cat git log --no-merges --format=" %s" --since=$DATE --until=$NEXT --author="$AUTHOR" --all

eyecatchup

<?php

// API access key from Google API's Console
define( 'API_ACCESS_KEY', 'YOUR-API-ACCESS-KEY-GOES-HERE' );


$registrationIds = array( $_GET['id'] );

// prep the bundle
$msg = array

eyecatchup

<?php
try {
    $sxe = simplexml_load_string($xmlstring, 'SimpleXMLIterator');
    for ($sxe->rewind(); $sxe->valid(); $sxe->next()) {
        if ($sxe->hasChildren()) {
            foreach ($sxe->getChildren() as $element=>$value) {
                echo $value->species . '<br />';
            }
        }
    }

eyecatchup

Typography

Headings

Headings from h1 through h6 are constructed with a # for each level:

# h1 Heading
## h2 Heading
### h3 Heading

eyecatchup

Death to tabs, long live spaces

Do this

1. Fix any inconsistent indentation in your existing files, or Python code will break, since it considers a tab to be 8 and we're about to make it 4.

2. Populate .gitattributes in your repository, as below.

    *.py filter=spabs
   

eyecatchup

layout	tags
posts	css github jekyll markdown grunt

This is a test post which will contain enough markup to test CSS styles.

It should have a

• list
• link

eyecatchup

! function() {
    function hasClass(el, klass) {
        return el.className.match(new RegExp("(\\s|^)" + klass + "(\\s|$)"))
    }

    function addClass(el, klass) {
        hasClass(el, klass) || (el.className += " " + klass)
    }

    function removeClass(el, klass) {