matori

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

$foo: ".foo";

#{$foo} {
  color: red;
}

matori

<ul role="tablist">
    <li role="presentation">
        <a href="#tabpanel1" id="tab1"
           role="tab" aria-controls="tabpanel1" aria-selected="true">タブ 1</a>
    </li>
    <li role="presentation">
        <a href="#tabpanel2" id="tab2"
           role="tab" aria-controls="tabpanel2" aria-selected="false">タブ 2</a>
    </li>
    <li role="presentation">

matori

/*
 * Based on metalsmith-jade
 * https://github.com/MaxBareiss/metalsmith-jade
 * License MIT (c) 2014 Max Bareiss
 * */

/*
 if you need output non-HTML file (like xml),
 you have to add `ext` metadata key and  extension-name string value (like 'xml') to that content.

matori

mixin meta(name, content)
    if name.match(/content-(encoding|length|language|type|style-type|script-type)|default-style|refresh|set-cookie|pragma|cache-control|expires|allow|date|last-modified|location|www-authenticate|x-ua-compatible|x-dns-prefetch-control/i)
        meta(http-equiv="#{name}", content="#{content}")
    else
        meta(name="#{name}", content="#{content}")

matori

@charset "UTF-8";

/// `$use-before` は `$collapse-margin` が `false` の場合のみ意味を持つ。引数なし（初期値）だと micro clearfix が生成される。
/// @group util
/// @param {Bool} $collapse-margin (false) - マージンの相殺を許可するかどうか
/// @param {Bool} $use-before (true) - `:before` 擬似要素を出力するかどうか
/// @link http://nicolasgallagher.com/micro-clearfix-hack/ A new micro clearfix hack – Nicolas Gallagher
/// @link http://kojika17.com/2013/06/clearfix-2013.html floatを解除する手法のclearfix と 次世代のレイアウトの話｜Web Design KOJIKA17
@mixin clearfix($collapse-margin: false, $use-before: true) {

matori

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

@function selector-to-string($selector: "") {
  @if $selector == "" {
    $selector: &;
  }
  $selector-length: str-length(#{$selector});

matori

プリンより滑らか スムーズなアニメーションの作り方 HTML5 Conference 2015 1.25

スピーカー

Brian Birtles - Working on Web Animations and Firefox at Mozilla Japan https://twitter.com/brianskold

はじめに

• 滑らかといえばプリン

matori

'use strict'

# http://stackoverflow.com/a/7557433
# https://gist.github.com/anonymous/f09b5cd487b5ad55c46e
module.exports = (element, partial = false, position = 0.85)->
    rect = element.getBoundingClientRect()
    windowHeight = window.innerHeight or document.documentElement.clientHeight
    windowWidth = window.innerWidth or document.documentElement.clientWidth
    unless partial
        rect.top >= 0 and

matori

'use strict'

el = document.createElement 'div'
detectionTargets =
    transitionend:
        'WebkitTransition': 'webkitTransitionEnd'
        'transition': 'transitionend'
    animationend:
        'WebkitAnimation': 'webkitAnimationEnd'
        'animation': 'animationend'

matori

@charset "UTF-8";

$state-chain-mixin-pseudo-syntax-legacy: false !default;

@mixin state-chain($state-change-target, $state) {
    $selector: selector-append($state-change-target, ".st-#{$state}");
    $self: false;

    $state-chain-before-pseudo: "::before";
    $state-chain-after-pseudo: "::after";