1. 首页
  2. 代码片断库
  3. scss
全部数据
text
javascript
php
markdown
sh
java
python
html
csharp
css
sql
c_cpp
PHP
ruby
xml
scss
json
swift
JavaScript
typescript
vbscript
powershell
CSS
apache_conf
ActionScript 3
r
ini
HTML
golang

scss @each dentro de @Mixin

Bucle @each dentro de @mixin

BucleDentroMixin.scss 
/* ***************************** */    
/* @each dentro de un mixin */
/* ***************************** */


@mixin nombres{
    $list: mario, alejandro, jaime;

        @each $var in $list{

            .name-#{$var} {

                display: block;
            }
        }
    }


    .h1 {
        @include nombres;
    }

scss @each Lista directa

Bucle @each con lista directa

BucleListaDirec.SCSS 
/* ***************************** */    
/* @each con una lista directamente */
/* ***************************** */
// BUCLE01

$grupoanimales: perro,gato,dinosaurio,
                perro,gato,dinosaurio,
                perro,gato,dinosaurio,
                perro,gato,dinosaurio,
                perro,gato,dinosaurio,
                perro,gato,dinosaurio;

/*variable local*/
@each $animal in $grupoanimales{
/* $animal: perro*/
    .#{$animal}__icon {
        background-image: url(‘../img/#{$animal}.jpg’);
        
    }
}

scss 列网格百分比

// Casey Lee <br/> <br/> SASS函数用于计算波旁/整齐网格列的百分比，例如; 70％= 70 * 12/100 <br/>（可以添加到kronos中的_grid-settings.scss）<br/>

column-percentage 
/**
 * Calculate the percentage of grid columns (70% = 70 * 12 / 100)
 * @param  {int} $percent
 * @return {float}
 * @usage: @include span-columns(column-percentage(30));
 */
@function column-percentage($percent) {
    @return ($percent * $grid-columns) / 100;
}

scss 来自wp_nav_menu的补充工具栏/小工具子菜单

// Casey Lee <br/> <br/>用于显示当前页面的活动子级项目的基本scss（使用核心wp菜单小部件）。 <br/> https://cl.ly/ae254654c088

theme 
&.widget_nav_menu {
    ul li {
        display:none;
        &.current-menu-ancestor,
        &.current-menu-item,
        &.current-page-parent {
            display:block;
            ul {
                display:block;
                li {
                    display:block;
                    ul {
                        display: none;
                    }
                    &.current-menu-item {
                        ul {
                            display: block;
                        }
                    }
                    ul {
                        margin-left: em(20);
                    }
                }
            }
        }
    }

scss 按钮[Mixin]

_mixin 
// Button transparent mixin
@mixin all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
  font-family: "Montserrat", "Arial", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.2;
  border-radius:3px;
  box-shadow: 0 15px 38px 0 rgba(0, 0, 0, 0.23);
  transition: all .2s ease-out;
}

// Button mixin
@mixin button($font-size: 12px, $min-height: 40px, $min-width: 100px) {
  @include all-btn();
  font-size: $font-size;
  height: $min-height;
  min-width: $min-width;
  &:hover {
    box-shadow:none;
  }
}


//Exemple
.btn {
  @include button(14px, 50px, auto);
  max-width: 245px;
  width: 100%;
  color: #fff;
  background-color: $but-main-color;
  border: 1px solid $but-main-color;

  &:hover {
    color: $but-main-color;
    background-color: transparent;
  }
}

scss 动画链接[Mixin]

_mixin 
@mixin animate-link {
  position: relative;
  display: inline-block;
  color: $but-main-color;

  &:before,
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 0;
    background-color: $but-main-color;
    transition: width 0.2s ease-out;
  }

  &:before { left: 0; }
  &:after { right: 0; }

  &:hover {
    &:before,
    &:after {
      width: 50%;
    }
  }
}

scss ハンバーガーメニュー+グランドナビ

ハンバーガーメニュー+グランドナビ

.markdown 
ハンバーガーメニュー＋グランドナビ
-----------------


A [Pen](https://codepen.io/anonie/pen/KKPdOzN) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/KKPdOzN/license).
index.html 
				<div class="l-gnav">
					<label for="gnav-trigger" class="berger-menu-wrap">
						<div class="berger-menu">
							<div class="berger-menu__item berger-menu_item01"></div>
							<div class="berger-menu__item berger-menu_item02"></div>
							<div class="berger-menu__item berger-menu_item03"></div>
						</div>
					</label>
					<input type="checkbox" id="gnav-trigger" />
					<div class="gnav-contents-wrap">
						<div class="gnav-contents__inner">

						</div>
					</div>
				</div>
script.js 
$(function() {
	$('.berger-menu-wrap').click(function() {
		if($(this).find('.berger-menu').hasClass('is_active')){
			 $(this).find('.berger-menu').removeClass('is_active');
		} else {
			 $(this).find('.berger-menu').addClass('is_active');
		}
	});	
});
scripts 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
style.scss 
$color-main: #168893;
$color-deep: #01293f;
$color-light: #efefef;




/**** trigger ****/
.berger-menu-wrap {
	z-index: 10001;
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	display: inline-block;
	width: 35px;
	&:hover {
		cursor: pointer;
	}
}
.berger-menu {
	display: flex;
	flex-direction: column;
	&__item {
		transition: 0.2s;
		content: "";
		width: 100%;
		height: 3px;
		border-radius: 1.5px;
		margin-bottom: 7.5px;
		background: $color-main;
	}
}
.berger-menu_item01 {
	top: 0;
		.berger-menu.is_active & {
			transform: translateY(10px) rotate(225deg);
			transition: 0.2s;
			background: #fff;
		}
}
.berger-menu_item02 {
	top: 5px;
		.berger-menu.is_active & {
			opacity: 0;
		}
}
.berger-menu_item03 {
	top: 10px;
	margin-bottom: 0;
		.berger-menu.is_active & {
		/* 	transform: translateY(-12.5px) rotate(-45deg); */
			transform: translateY(-10px) rotate(-45deg);
			transition: 0.2s;
			background: #fff;
		}
}
[id="gnav-trigger"] { /* check box */
	display: none;
}
/**** contents ****/
.gnav-contents-wrap {
	position: absolute;
	top: 0;
	right: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transition: .8s;
}
input[id="gnav-trigger"]:checked ~ .gnav-contents-wrap {
	top: 0;
	height: 100vh;
	width: 100vw;
	opacity: 1;
	background:$color-main;
	color: #fff;
}

scss なび1

なび1

1.markdown 
なび1
---


A [Pen](https://codepen.io/anonie/pen/zgLoLM) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/zgLoLM/license).
index.html 
		<div class="l-header">
			<header>

				<div class="l-nav">
					<nav>
						<ul class="nav-main u-flex --js-flex-end">
							<li class="nav-main__item">
								<a href="#">クリニックについて</a>
								<!-- sub menus -->
								<ul class="nav-main__sm-item-wrap">
									<li class="nav-main__sm-item u-flex">
										<div class="sm-item__inner">
											<a href="">
												<figure class="sm-item__img"><img src="./img/sub-menu-img01-1.png" alt="クリニック概要"></figure>
												<div class="sm-item__ttl u-flex">クリニック概要</div>
											</a>
										</div>
										<div class="sm-item__inner">
											<a href="">
												<figure class="sm-item__img"><img src="./img/sub-menu-img01-2.png" alt="院長について" class=""></figure>
												<div class="sm-item__ttl u-flex">院長について</div>
											</a>
										</div>
									</li>
								</ul>
							</li>
							
							<li class="nav-main__item">
								<a href="#">診療のご案内</a>
								<!-- sub menus -->
								<ul class="nav-main__sm-item-wrap">
									<li class="nav-main__sm-item u-flex">
										<div class="sm-item__inner">
											<a href="">
												<figure class="sm-item__img"><img src="./img/sub-menu-img02-1.png" alt="診療内容"></figure>
												<div class="sm-item__ttl u-flex">診療内容</div>
											</a>
										</div>
										<div class="sm-item__inner">
											<a href="">
												<figure class="sm-item__img"><img src="./img/sub-menu-img02-2.png" alt="各種検査" class=""></figure>
												<div class="sm-item__ttl u-flex">各種検査</div>
											</a>
										</div>
										<div class="sm-item__inner">
											<a href="">
												<figure class="sm-item__img"><img src="./img/sub-menu-img02-3.png" alt="各種予防接種" class=""></figure>
												<div class="sm-item__ttl u-flex">各種予防接種</div>
											</a>
										</div>
									</li>
								</ul>
							</li>

							<li class="nav-main__item"><a href="">ご予約</a></li>
							<li class="nav-main__item"><a href="">アクセス</a></li>
							<li class="nav-main__item"><a href="">院長日記</a></li>
							<li class="nav-main__item"><a href="">お問い合わせ</a></li>
						</ul>
					</nav>
				</div>
				
			</header>
		</div>
script.js 
// $(function() {
//   $('.nav-list').mouseover(function() {
// 		$thisTargetSubmenu = "sub-" + $(this).attr("id");
// 		// $('#' + $thisTargetSubmenu).addClass('is-active');
// 		$('#' + $thisTargetSubmenu).fadeIn();
// 	});
// 	$('.l-header__nav').mouseout(function() {
// 		// $('#' + $thisTargetSubmenu).removeClass('is-active');
// 		$('#' + $thisTargetSubmenu).fadeOut();
// 	});
// });
scripts 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
style.scss 
@charset "UTF-8";

$color-main: #168893;
$color-deep: #01293f;
$color-light: #efefef;

$breakpoints: (
	sp: "",
	pc: "",
);

body {
	color: $color-deep;
	font-family: "Noto Sans JP", "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", Meiryo, sans-serif;
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@mixin link-color($normal, $visited, $hover, $active) {
	color: $normal;
		&:visited { color: $visited; }
		&:hover { color: $hover; }
		&:active { color: $active; }
}
a {
	text-decoration: none;
		&:link { color: $color-main; }
		&:hover { color: $color-main; }
		&:visited { color: $color-main; }
}
.nav-main__item a, .nav_info a, .nav-main__sm-item a {
  @include link-color(
    $color-deep, /* noarmal */
    $color-deep, /* visited */
    $color-main, /* hover */ 
    $color-main  /* active*/
  );
}

/************ function ************/
$baseFontSize: 16;
html { font-size: $baseFontSize + px; }
@function rem($pixels, $context: $baseFontSize) {
	@return $pixels / $context * 1rem; 
}


.u-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}
.u-flex.--js-flex-end {
	justify-content: flex-end;
}
.u-flex.--js-flex-start {
	justify-content: flex-start;
}
.u-flex.--ai-flex-start {
	align-items: flex-start;
}

.l-header {
	z-index: 1000;
	position: relative;
	width: 100%;
	height: 115px;
	background: rgba(#000, .5);
}
.l-nav {
	position: absolute;
	bottom: 0;
	width: 100%;
}
.nav-main { /* navigation level 1 */
	font-size: rem(15);
	font-weight: 700;
	margin-right: 1.5em;
		&__item > a {
			display: inline-block;
			padding: 1rem 20px;
			transition: .2s;
		}
}
.nav-main { /* navigation level 2 */
		&__sm-item-wrap { /* sub menu */
			position: absolute;
			left: 0;
			font-size: rem(15);
			font-weight: 700;
			width: 100%;
		}
		&__sm-item { /* sub menu item */
			position: relative;
			overflow: hidden;
			height: 0;
			transition: .2s;
			background: rgba( #fff, 0.5 );
			&.u-flex {
				align-items: flex-start;
			}
		}
		&__item:hover .nav-main__sm-item {
			overflow: visible;
			height: 172px;
		}
}
.sm-item__inner {
	// width: 150px;
	min-width: 120px;
	padding-top: 25px;
	margin-left: 20px;
	margin-right: 20px;
}
.sm-item__img { /* sub menu */
	text-align: center;
	height: 82px;
	// margin-top: 30px;
	margin-bottom: 8px;
	.sm-item__inner:hover & {
		transition: .2s;
		opacity: .7;
	}
}
.sm-item__ttl { /* sub menu item title */
	height: 35px;
	vertical-align: center;
}

scss 来自TaroUI的Mixins

absolute-center 
/**
 * 元素居中定位
 */
@mixin absolute-center($pos: absolute) {
  position: $pos;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
active 
/**
 * 点击态
 */
@mixin active {
  transition: background-color 0.3s;

  &:active {
    background-color: $color-grey-5;
  }
}
alignhack 
// 修复小元素文本垂直居中
@mixin alignhack($position: before, $margintop: 1px) {
  &::#{$position} {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    margin-top: $margintop;
  }
}
border 
/**
 * 默认主题下 $color-border-light
 */

@mixin border-thin(
  $color: $color-border-light,
  $style: solid,
  $directions: top bottom right left,
  $width: 1px
) {
  @each $value in $directions {
    border-#{$value}: $width $color $style;
  }
}

@mixin border-thin-top(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  @include border-thin($color, $style, top, $width);
}

@mixin border-thin-left(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  @include border-thin($color, $style, left, $width);
}

@mixin border-thin-right(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  @include border-thin($color, $style, right, $width);
}

@mixin border-thin-bottom(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  @include border-thin($color, $style, bottom, $width);
}
clearfix 
/**
 * @example scss
 *
 * .element {
 *   @include clearfix;
 * }
 *
 * // CSS Output
 * .element::after {
 *   clear: both;
 *   content: '';
 *   display: block;
 * }
 */
@mixin clearfix {
  &::after {
    clear: both;
    content: '';
    display: block;
  }
}
disabled 
/**
 * 禁止态
 */
@mixin disabled {
  color: #bbb;
}
flex 
@mixin display-flex {
  display: flex;
}

@mixin flex-wrap($value: nowrap) {
  flex-wrap: $value;
}

@mixin align-items($value: stretch) {
  align-items: $value;
  @if $value == flex-start {
    -webkit-box-align: start;
  } @else if $value == flex-end {
    -webkit-box-align: end;
  } @else {
    -webkit-box-align: $value;
  }
}

@mixin align-content($value: flex-start) {
  align-content: $value;
}

@mixin justify-content($value: flex-start) {
  justify-content: $value;
  @if $value == flex-start {
    -webkit-box-pack: start;
  } @else if $value == flex-end {
    -webkit-box-pack: end;
  } @else if $value == space-between {
    -webkit-box-pack: justify;
  } @else {
    -webkit-box-pack: $value;
  }
}

/* Flex Item */
@mixin flex($fg: 1, $fs: null, $fb: null) {
  flex: $fg $fs $fb;
  -webkit-box-flex: $fg;
}

@mixin flex-order($n) {
  order: $n;
  -webkit-box-ordinal-group: $n;
}

@mixin align-self($value: auto) {
  align-self: $value;
}
hairline 
/**
 * 默认主题下 $color-border-light
 */

@mixin hairline-common() {
  content: '';
  position: absolute;
  transform-origin: center;
  box-sizing: border-box;
  pointer-events: none;
}

@mixin hairline-base(
  $color: $color-border-light,
  $style: solid
) {
  @include hairline-common();

  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  border: 0 $style $color;
  transform: scale(0.5);
}

@mixin hairline-surround(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-width: $width;
  }
}

@mixin hairline-top(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-top-width: $width;
  }
}

@mixin hairline-bottom(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-bottom-width: $width;
  }
}

@mixin hairline-left(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-left-width: $width;
  }
}

@mixin hairline-right(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-right-width: $width;
  }
}

@mixin hairline-top-bottom(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-top-width: $width;
    border-bottom-width: $width;
  }
}

@mixin hairline-bottom-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX,
  $left: 0
) {
  position: relative;

  &::after {
    @include hairline-common();

    top: auto;
    left: $left;
    right: 0;
    bottom: 0;
    transform: scaleY(0.5);
    border-bottom: $width $style $color;
  }
}

@mixin hairline-top-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX,
  $left: 0
) {
  position: relative;

  &::before {
    @include hairline-common();

    top: 0;
    left: $left;
    right: 0;
    bottom: auto;
    transform: scaleY(0.5);
    border-top: $width $style $color;
  }
}

@mixin hairline-left-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX,
  $top: 0
) {
  position: relative;

  &::after {
    @include hairline-common();

    top: $top;
    left: 0;
    right: auto;
    bottom: 0;
    transform: scaleX(0.5);
    border-left: $width $style $color;
  }
}

@mixin hairline-right-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1PX,
  $top: 0
) {
  position: relative;

  &::after {
    @include hairline-common();

    top: $top;
    left: auto;
    right: 0;
    bottom: 0;
    transform: scaleX(0.5);
    border-right: $width $style $color;
  }
}
line 
@mixin line($num: 1) {
  overflow: hidden;
  text-overflow: ellipsis;

  @if ($num == 1) {
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $num;

    /* autoprefixer: off */
    -webkit-box-orient: vertical;
  }
}
overline 
/**
 * 通用的遮罩
 */
@mixin overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba($color: #000, $alpha: 0.3);
}
placeholder 
/**
 * 设置placeholder 颜色
 */
@mixin placeholder($color: $color-grey-3) {
  @at-root .placeholder {
    color: $color;
  }

  &::placeholder {
    color: $color;
  }
}
shade 
/**
 * Mixes a color with black. It's different from darken()
 *
 * @param {color} $color
 * @param {number (percentage)} $percent [The amount of black to be mixed in]
 * @return {color}
 *
 * @example
 *   .element {
 *     background-color: shade(#ffbb52, 60%);
 *   }
 *
 *   // CSS Output
 *   .element {
 *     background-color: #664a20;
 *   }
 */
@function shade(
  $color,
  $percent
) {
  @return mix(#000, $color, $percent);
}
tint 
/**
 * Mixes a color with white. It's different from lighten()
 *
 * @param {color} $color
 * @param {number (percentage)} $percent [The amout of white to be mixed in]
 * @return {color}
 *
 * @example
 *   .element {
 *     background-color: tint(#6ecaa6 , 40%);
 *   }
 *
 *   // CSS Output
 *   .element {
 *     background-color: #a8dfc9;
 *   }
 */
@function tint(
  $color,
  $percent
) {
  @return mix(#FFF, $color, $percent);
}

scss 来自TaroUI的常见主题变量

theme-theme 
@function tint(
  $color,
  $percent
) {
  @return mix(#FFF, $color, $percent);
}


$hd: 2 !default; // 基本单位

/* The Color of O2Team Brand */
$color-brand: #6190E8 !default;
$color-brand-light: #78A4F4 !default;
$color-brand-dark: #346FC2 !default;

/* Color */
$color-success: #13CE66 !default;
$color-error: #FF4949 !default;
$color-warning: #FFC82C !default;
$color-info: #78A4FA !default;

/* Color Palette */
$color-black-0: #000 !default;
$color-black-1: #333 !default;
$color-black-2: #7F7F7F !default;
$color-black-3: #B2B2B2 !default;

$color-grey-0: #333 !default;
$color-grey-1: #666 !default;
$color-grey-2: #999 !default;
$color-grey-3: #CCC !default;
$color-grey-4: #E5E5E5 !default;
$color-grey-5: #F0F0F0 !default;
$color-grey-6: #F7F7F7 !default;

$color-white: #FFF !default;

/* Text Color */
$color-text-base: #333 !default; // 文字的基本色
$color-text-base-inverse: #FFF !default; // 反色
$color-text-secondary: #36D57D !default; // 辅助色
$color-text-placeholder: #C9C9C9 !default;
$color-text-disabled: #CCC !default;
$color-text-title: #2C405A !default; // 文章标题
$color-text-paragraph: #3F536E !default; // 文章段落

/* Link */
$color-link: #6190E8 !default;
$color-link-hover: #79A1EB !default;
$color-link-active: #4F7DE2 !default;
$color-link-disabled: #BFBFBF !default;

/* 背景色 */
$color-bg: #FFF !default;
$color-bg-base: #FAFBFC !default;
$color-bg-light: #ECF5FD !default;
$color-bg-lighter: tint($color-bg-light, 50%) !default;
$color-bg-grey: #F7F7F7 !default;

/* 边框颜色 */
$color-border-base: #C5D9E8 !default;
$color-border-split: tint($color-border-base, 20%) !default; // 分割线
$color-border-light: tint($color-border-base, 30%) !default;
$color-border-lighter: tint($color-border-base, 50%) !default;
$color-border-lightest: tint($color-border-base, 80%) !default;
$color-border-grey: #CCC !default;

/* 图标颜色 */
$color-icon-base: #CCC !default;

/* Border Radius */
$border-radius-sm: 2px * $hd !default;
$border-radius-md: 4px * $hd !default;
$border-radius-lg: 6px * $hd !default;
$border-radius-circle: 50% !default;

/* 透明度 */
$opacity-active: 0.6 !default; // Button 等组件点击态额透明度
$opacity-disabled: 0.3 !default; // Button 等组件禁用态的透明度

/* Font */
$font-size-xs: 10px * $hd !default; // 非常用字号，用于标签
$font-size-sm: 12px * $hd !default; // 用于辅助信息
$font-size-base: 14px * $hd !default; // 常用字号
$font-size-lg: 16px * $hd !default; // 常规标题
$font-size-xl: 18px * $hd !default; // 大标题
$font-size-xxl: 20px * $hd !default; // 用于大号的数字

/* Line Height */
$line-height-base: 1 !default; // 单行
$line-height-en: 1.3 !default; // 英文多行
$line-height-zh: 1.5 !default; // 中文多行

/* 水平间距 */
$spacing-h-sm: 5px * $hd !default;
$spacing-h-md: 8px * $hd !default;
$spacing-h-lg: 12px * $hd !default;
$spacing-h-xl: 16px * $hd !default;

/* 垂直间距 */
$spacing-v-xs: 3px * $hd !default;
$spacing-v-sm: 6px * $hd !default;
$spacing-v-md: 9px * $hd !default;
$spacing-v-lg: 12px * $hd !default;
$spacing-v-xl: 15px * $hd !default;

/* 图标尺寸 */
$icon-size-sm: 18px * $hd !default;
$icon-size-md: 22px * $hd !default;
$icon-size-lg: 36px * $hd !default;

/* z-index */
$zindex-divider: 100 !default;
$zindex-steps: 500 !default;
$zindex-tab: 600 !default;
$zindex-form: 700 !default;
$zindex-nav: 800 !default;
$zindex-search-bar: 800 !default;
$zindex-indexes: 805 !default;
$zindex-flot-layout: 810 !default;
$zindex-drawer: 900 !default;
$zindex-modal: 1000 !default;
$zindex-action-sheet: 1010 !default;
$zindex-picker: 1010 !default;
$zindex-curtain: 1080 !default;
$zindex-message: 1090 !default;
$zindex-toast: 1090 !default;

/* timing function */
$timing-func: cubic-bezier(0.36, 0.66, 0.04, 1) !default;

/**
* CSS cubic-bezier timing functions
* http://bourbon.io/docs/#timing-functions
*/
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530) !default;
$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) !default;
$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220) !default;
$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060) !default;
$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;
$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035) !default;
$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335) !default;
$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045) !default;

$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;
$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) !default;
$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000) !default;
$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000) !default;
$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000) !default;
$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000) !default;
$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000) !default;
$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275) !default;

$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) !default;
$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000) !default;
$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000) !default;
$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950) !default;
$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000) !default;
$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860) !default;
$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550) !default;