Last active
August 29, 2015 13:57
-
-
Save myakura/9427632 to your computer and use it in GitHub Desktop.
lg-keyword(): Sass 3.2 vs. Sass 3.3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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