Tenderfeel

<!-- クリックでfancyboxを機動させる画像と、ポップアップさせたい画像の記述 -->
<!-- ★classにクリッカブルマップのIDと同じクラスを追加する -->
<a href="http://jsrun.it/assets/o/x/g/D/oxgDY.jpg" class="fancybox map-1">
    <img src="http://jsrun.it/assets/o/x/g/D/oxgDY.jpg" width="200" />
</a>
<!-- ポップアップした画像に貼られるクリッカブルマップの設定です -->
<!-- ★mapのIDと同じクラスをareaのclassに追加する -->
<map name="map-1" id="map-1">
<area shape="rect" coords="7,8,38,36" href="http://jsrun.it/assets/9/Q/J/1/9QJ1n.jpg" class="fancybox map-1" />
<area shape="rect" coords="41,6,70,35" href="http://jsrun.it/assets/y/z/4/q/yz4qn.jpg" class="fancybox map-1" />

Tenderfeel

$official:true;            //Official
$support-for-webkit:true;  //Chrome, Safari
$support-for-mozilla:true; //Firefox
$support-for-ie:true;      //IE
$support-for-o:true;       //Opera
 
@mixin prefix($property, $value...) {
 
  @if $property == 'keyframes' {
      @if $support-for-webkit { @-webkit-keyframes $value { @content; } }

Tenderfeel

//need gist: 3554697

//再生時間
$default-animation-duration       : 0.5s !default;     
 
//実行までの待ち時間
$default-animation-delay          : 0    !default;
 
//実行回数(number | infinite)
$default-animation-iteration-count: 1    !default;

Tenderfeel

//need gist: 3554697
@mixin keyframes($name) {

  @include prefix(keyframes, $name) {
        @content;
  }
}

Tenderfeel

@mixin data-background($image...){
  $length:length($image);
  @if ($length > 1) {
    $images:null;
    $sizes:null;
    
    @for $i from 1 through $length {
       $images:append($images, inline-image(nth($image, $i)), "comma");
       $sizes:append($sizes, image-size(nth($image, $i)), "comma");
    }

Tenderfeel

//累乗した値を求める
@function pow($a, $b) {
  @for $a from 1 through $b {
    $a: $a * $a;
  }
  @return $a;
}

//√nを計算
@function sqrt($n) {

Tenderfeel

//-----------------------------------------------
//CSS Flexible Box Layout Module Mixin
//W3C Candidate Recommendation, 18 September 2012
//http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
//-----------------------------------------------


//Flex Containers: the ‘flex’ and ‘inline-flex’ ‘display’ values
$default-flex-display: flex;

Tenderfeel

//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--  
// CSS Speech Bubble Mixin  
// _bubble.scss  
//
// http://jsdo.it/Tenderfeel/ApPq
//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--

// # bubble-tail-init 
//
// しっぽのベース作成  

Tenderfeel

//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--
// CSS3 animation mixin  
// !!! NEED Compass !!!  
//
//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--

// # Animation
//
// animationショートハンドにベンダープレフィックス付けるmixin  
//

Tenderfeel

//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--
// Compass Configurable Variables
//
// Compassのmixinとかのオプション
//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--
// 
// # Compass Cross-Browser Support Configuration
// http://compass-style.org/reference/compass/support/
// 
// `$legacy-support-for-ie` --- IE6&IE7用のhackを使うならtrue.初期値はfalse