manabuyasuda

// ==========================================================================
// Function remove-unit
// ==========================================================================

//
// 16pxや1remなど単位のある数値から単位だけを削除する@functionです。
// 単位のない数値を使用すると、値はそのまま返されます。
// TODO: 登録している単位と単位なしのいずれかに当てはまらない場合はエラーになります。
//
// e.g.

manabuyasuda

//
// e.g.
//
// .main-navigation {
//     @include nav(fill);
//     > li {
//         @include nav__item(fill);
//         > a {
//             @include nav__link(fill, 12px);
//         }

manabuyasuda

<div class="o-central-box">
  <button type="button"><span>search</span></button>
</div>

manabuyasuda

// #Flexbox

// flexboxコンテナを指定します。
@mixin display-flex {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

// flexboxコンテナをインラインで指定します。

manabuyasuda

// @desc ブロック要素内の上部に影をつくります。
// e.g. scss
// .shadow {
//   @include shadow();
// }
//
// e.g. html
// <div class="shadow">
//   <img/>
// </div>

manabuyasuda

// 1.グローバルナビゲーション（マウスオーバーVer.）
// `.find()`で要素を取得（高速化）。
// 使用するclassを変数化して保守性と速度を上げる。
$(function(){
  var $nav = $('.global-nav').find('> li');
  var $navAll = $nav.find('ul');
  var state = 'is-active';

  $nav.hover(
    function() {

manabuyasuda

// タブリスト
// `.index(this)`でクリックされた`li`のインデックスを取得して変数に格納。
// `.eq()`でインデックスを渡す。
// `return false;`でアンカータグを無効化する。
$(function(){
  var $tabList = $('.tabList').find('li');
  var $tabBody = $('.tabBody').find('li');
  var state = 'is-active';

  $tabList.click(function() {

manabuyasuda

<!-- 実際の画像サイズの半分を指定する -->
<img src="" alt="" width="100px" height="100px" class="image-unset"/>

manabuyasuda

// @desc - スクロールの方向を判断して、ナビゲーションの表示を切り替えます。
$(function() {
  // 表示を切り替えるナビゲーションのクラス名を指定する。
  var $nav = $('.nav');
  var state = 'is-active';
  $nav.addClass(state);

  var startPos = 0;
  var scrollTimer;

manabuyasuda

// @desc - img要素内のsrc属性をウィンドウサイズに応じて置換する。
// @example html
// <img src="image_sp.png" class="js-image-switch" alt="">
// CSSで画像の描画サイズを切り替えると、より柔軟に対応できる
// @see - https://gist.github.com/manabuyasuda/d000bcdcf5ea7ac17c9c
$(function() {
  // 置換の対象とするclass属性。
  var $elem = $('.js-image-switch');
  // 置換の対象とするsrc属性の文字列。
  var sp = '_sp';