Last active
October 7, 2015 14:47
-
-
Save yoshihitofujiwara/3181146 to your computer and use it in GitHub Desktop.
Sass @mixin backgrounds-v2.1
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
// | |
// Sass mixin backgrounds v2.1 | |
// sass version 2.x | |
// | |
// Copyright 2012, Yoshihito Fujiwara | |
// MIT License. | |
// | |
// Date: 2012-07-25 | |
// Author: Yoshihito Fujiwara | |
// | |
// | |
// Capable Browser | |
// chrome 19 | |
// Firefox 12 | |
// Opera12 | |
// safari5 | |
// Android Browser 2.3 later | |
// iOS safari4.1 later | |
// | |
// | |
// How To Use | |
// | |
// $backgrounds-prefixes | |
// Target browser settings. ie not supported. | |
// -webkit-, -moz-, -o-, ''; | |
// | |
// $backgrounds-old-webkit | |
// Response to the gradient of the old webkit | |
// | |
// backgrounds($backgrounds-images, $backgrounds-colors, $backgrounds-position) | |
// | |
// $backgrounds-images | |
// Specify image. Multiple can be installed. No argument, no image. | |
// value: background-image value | |
// | |
// $backgrounds-colors | |
// Specify the color. If you specify more than one of the gradient | |
// value: color code, false, transparent, | |
// | |
// $backgrounds-position | |
// Direction of the gradient. Switching point of the gradient. Angle can not be specified. | |
// value: top, left, number[0-100] | |
// | |
// .example { | |
// @include backgrounds(#{url(../img1.png) no-repeat 100% 50%, url(../img2.png) no-repeat 100% 50%}, #fff #ccc #999, top 80 100); | |
// } | |
// | |
// ******************************************************************** initial value | |
// Not implemented | |
// Not support a gradient up to "ie9" | |
// If true, return the intermediate value of specified color | |
// If false, or if there is no color specified, does not return a value. | |
// $backgrounds-ms : true; | |
$backgrounds-prefixes : -webkit-, -moz-, -o-, '' !default; | |
$backgrounds-old-webkit: true !default; | |
$backgrounds-images : false !default; | |
$backgrounds-colors : false !default; | |
$backgrounds-position : top !default; | |
// ******************************************************************** @function | |
// Not implemented | |
// @function backgrounds-ms | |
// Returns an intermediate value of specified color (roughly) | |
@function backgrounds-ms($fn-backgrounds-images, $fn-backgrounds-colors){ | |
$value: ''; | |
$colors: nth($fn-backgrounds-colors, 1) / length($fn-backgrounds-colors); | |
@for $i from 2 through length($fn-backgrounds-colors) { | |
$colors: $colors + nth($fn-backgrounds-colors, $i) / length($fn-backgrounds-colors); | |
} | |
@if $fn-backgrounds-images and $fn-backgrounds-images != "" { | |
$value: $colors $fn-backgrounds-images; | |
} @else { | |
$value: $colors; | |
} | |
@return $value; | |
} | |
// @function backgrounds-old-webkit | |
// Returns the value of the background for old webkit style | |
@function backgrounds-old-webkit($fn-backgrounds-images, $fn-backgrounds-colors, $fn-backgrounds-position){ | |
$value: ''; | |
@if $fn-backgrounds-images and $fn-backgrounds-images != "" { | |
$value: $fn-backgrounds-images, -webkit-gradient(linear, gradient-direction-old-webkit($fn-backgrounds-position), gradient-old-webkit($fn-backgrounds-colors, $fn-backgrounds-position)); | |
} @else { | |
$value: -webkit-gradient(linear, gradient-direction-old-webkit($fn-backgrounds-position), gradient-old-webkit($fn-backgrounds-colors, $fn-backgrounds-position)); | |
} | |
@return $value; | |
} | |
// @function gradient-direction-old-webkit | |
// Returns the direction of the gradient for old webkit style | |
@function gradient-direction-old-webkit($fn-gradient-position){ | |
@if nth($fn-gradient-position, 1) == left { | |
@return left top, right top; | |
} | |
@return left top, left bottom; | |
} | |
// @function gradient-old-webkit | |
// Returns the value of the gradient for old webkit style | |
@function gradient-old-webkit($fn-gradient-colors, $fn-gradient-position){ | |
$i: 0; | |
$count: 1; | |
$length: length($fn-gradient-colors) - 1; | |
$position: 100 / $length; // old-webkit | |
$value: from(#{nth($fn-gradient-colors, 1)}) + ', '; | |
@if length($fn-gradient-colors) == length($fn-gradient-position){ | |
@for $i from 2 through $length { | |
$value: $value + color-stop(nth($fn-gradient-position, $i) * 0.01, #{nth($fn-gradient-colors, $i)}) + ', '; | |
} | |
} @else { | |
@for $i from 2 through $length { | |
$value: $value + color-stop($position * $count * 0.01, #{nth($fn-gradient-colors, $i)}) + ', '; | |
$count: $count + 1; | |
} | |
} | |
@return $value + to(nth($fn-gradient-colors, $length + 1)); | |
} | |
// @function backgrounds | |
// Returns the value of the background | |
@function backgrounds($fn-backgrounds-images, $fn-backgrounds-colors, $fn-backgrounds-position, $fn-prefix){ | |
$value: ''; | |
$direction : top; | |
@if nth($fn-backgrounds-position, 1) == left { | |
$direction: left; | |
} | |
@if $fn-backgrounds-images and $fn-backgrounds-images != "" { | |
$value: $fn-backgrounds-images, #{$fn-prefix}linear-gradient($direction, gradient($fn-backgrounds-colors, $fn-backgrounds-position)); | |
} @else { | |
$value: #{$fn-prefix}linear-gradient($direction, gradient($fn-backgrounds-colors, $fn-backgrounds-position)); | |
} | |
@return $value; | |
} | |
// @function gradient | |
// Returns the value of the gradient | |
@function gradient($fn-gradient-colors, $fn-gradient-position){ | |
$i: 0; | |
$count: 1; | |
$length: length($fn-gradient-colors) - 1; | |
$value: nth($fn-gradient-colors, 1) + ', '; | |
@if length($fn-gradient-colors) == length($fn-gradient-position){ | |
@for $i from 2 through $length { | |
$value: $value + nth($fn-gradient-colors, $i) + ' ' + percentage(nth($fn-gradient-position, $i) / 100) + ', '; | |
} | |
} @else { | |
@for $i from 2 through $length { | |
$value: $value + nth($fn-gradient-colors, $i) + ', '; | |
} | |
} | |
@return #{$value + nth($fn-gradient-colors, $length + 1)}; | |
} | |
// ******************************************************************** @mixin | |
@mixin backgrounds($backgrounds-images, $backgrounds-colors, $backgrounds-position) { | |
// Initialization of argument | |
@if type-of(nth($backgrounds-images, 1)) == color { | |
@if type-of(nth($backgrounds-colors, 1)) != color { | |
$backgrounds-position: $backgrounds-colors; | |
} | |
$backgrounds-colors: $backgrounds-images; | |
$backgrounds-images: ''; | |
} | |
@if length($backgrounds-colors) > 1 { | |
@each $prefix in $backgrounds-prefixes { | |
// for old webkit | |
@if $backgrounds-old-webkit and $prefix == -webkit- { | |
background: backgrounds-old-webkit($backgrounds-images, $backgrounds-colors, $backgrounds-position); | |
} | |
background: backgrounds($backgrounds-images, $backgrounds-colors, $backgrounds-position, $prefix); | |
// Not implemented | |
// @if $backgrounds-ms and $prefix == -ms- { | |
// background: backgrounds-ms($backgrounds-images, $backgrounds-colors); | |
// } @else if $prefix != -ms- { | |
// background: backgrounds($backgrounds-images, $backgrounds-colors, $backgrounds-position, $prefix); | |
// } | |
} | |
} @else { | |
@if $backgrounds-colors and $backgrounds-colors != "" { | |
background: $backgrounds-colors #{$backgrounds-images}; | |
} @else { | |
background: #{$backgrounds-images}; | |
} | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
報告ありがとうございます。
sass 2系で開発された古いバージョンで3系にあわせたアップデートは行っておりませんでした。
申し訳ありませんが、このバージョンでアップデートを打ち切りました。
現在、私はbourbonを使用してコーディングを行っております。
参考までに。
http://bourbon.io/