Skip to content

Instantly share code, notes, and snippets.

@myakura
Last active August 29, 2015 13:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save myakura/9427632 to your computer and use it in GitHub Desktop.
Save myakura/9427632 to your computer and use it in GitHub Desktop.
lg-keyword(): Sass 3.2 vs. Sass 3.3
@mixin lg-keyword($keyword, $colorstops...) {
$prefixes: '-webkit-';
// 標準のキーワード
$standard_keywords:
to bottom, to left, to top, to right,
to top left, to top right, to bottom right, to bottom left,
to left top, to right top, to right bottom, to left bottom;
// 接頭辞版のキーワード
$legacy_keywords:
top, right, bottom, left,
bottom right, bottom left, top left, top right,
right bottom, left bottom, left top, right top;
// キーワードのインデックスを取得
$idx: index($standard_keywords, $keyword);
// キーワードが不正な場合は何も出さない
@if $idx {
// マッチする接頭辞版のキーワードを取得
$legacy_keyword: nth($legacy_keywords, $idx);
@each $prefix in $prefixes {
background-image: #{$prefix}linear-gradient($legacy_keyword, $colorstops);
}
background-image: linear-gradient($keyword, $colorstops);
}
}
@mixin lg-keyword($keyword, $colorstops...) {
$prefixes: '-webkit-';
$keywords_map: (
to bottom: top,
to left: right,
to top: bottom,
to right: left,
to top left: bottom right,
to top right: bottom left,
to bottom right: top left,
to bottom left: top right,
to left top: right bottom,
to right top: left bottom,
to right bottom: left top,
to left bottom: right top
);
// キーワードが不正な場合は何も出さない
@if map-has-key($keywords_map, $keyword) {
@each $prefix in $prefixes {
background-image: #{$prefix}linear-gradient(map-get($keywords_map, $keyword), $colorstops);
}
background-image: linear-gradient($keyword, $colorstops);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment