作为更大的SCSS代码套件的一部分，我有一个用于创建各种背景的库mixin。我把它们分成了一个单独的SCSS文件，其中包含mixin和在页面底部使用它的目标类：
// Background handling mixin
// @version: 1.0.0
// @author: Simon Buerger (simon.buerger@heathwallace.com)
//
// Purpose: Primarily for the creation of gradients (linear, radial, repeating) - outputting all the required vendor prefixed versions of the property from the unprefixed syntax. Complete with error correction for the quirks of the 3 different syntaxes
// Supports: multiple backgrounds, any number of arguments per background (for gradients you must use the unprefixed syntax)
// Output: either background-image or background (automatically decides which is appropriate)
//
// Usage: @include background([Anything that either background or background-image accept as values - unprefixed]);
// Eg: @include background(
// linear-gradient(to bottom right, red, green 20%, black),
// radial-gradient(farthest-side circle at 100% 30%, black, blue 10%, white),
// url(/assets/main-site/images/test.png),
// url(/assets/main-site/images/test2.png) no-repeat left center
// );
$parsegradients:true;
$gradientvendors: (webkitlegacy,webkit,moz,o);
$usevendors: null;
@mixin background($args...) {
$usevendors: $gradientvendors !default;
$backgrounds: false;
$current-vendor: false;
$vendored: false;
$gradvendors: append($usevendors, none, comma);
@debug "=============== Background mixin ===================";
@each $vendor in $gradvendors {
$backgrounds: false;
$current-vendor: $vendor;
$bgprops:false;
$propsdef:false;
@each $arg in $args {
@if nth($arg,1) == linear-grad or nth($arg,1) == rep-linear-grad or nth($arg,1) == radial-grad or nth($arg,1) == rep-radial-grad{
$parsedbg:false;
$vendored:true;
@if nth($arg,1) == linear-grad or nth($arg,1) == rep-linear-grad {
@debug "calling linear";
$parsedbg:parselinear($arg);
@debug "Got linear output: " + $parsedbg;
}
@else {
@debug "calling radial";
$parsedbg:parseradial($arg);
@debug "Got radial output: " + $parsedbg;
}
@if $parsedbg {
@if $backgrounds {
$backgrounds: append($backgrounds,#{$parsedbg},comma);
}
@else {
$backgrounds: #{$parsedbg};
}
@debug "Length: " + length($backgrounds);
}
}
}
@if $vendored {
@if $backgrounds and $propsdef {
background:#{$backgrounds};
}
@else if $backgrounds {
background-image:#{$backgrounds};
}
}
@else if $current-vendor == none {
@if $backgrounds and $propsdef {
background:#{$backgrounds};
}
@else if $backgrounds {
background-image:#{$backgrounds};
}
}
}
$usevendors: $gradientvendors;
}
$current-vendor: false;
@function parseradial($args...) {
$bg-vars:false;
$color-stops:false;
$shapedef:false;
$position: false;
$size: false;
$shape: false;
$bg-string:false;
$repeating: false;
$mozexplicit:false;
@each $arg in $args {
$noshape:false;
@each $var in $arg {
@if $var != radial-grad and $var != rep-radial-grad {
@if $bg-vars {
$bg-vars: append($bg-vars,$var,comma);
}
@else {
@if type-of($var) == list and type-of(nth($var,1)) == color or type-of($var) == list and nth($var,1) == transparent {
$bg-vars: #{$var};
$noshape:true;
}
@else {
$bg-vars: $var;
}
}
}
@if $var == rep-radial-grad {
$repeating:repeating-;
}
}
@each $bg-var in $bg-vars {
@if type-of($bg-var) == list and type-of(nth($bg-var,1)) == color or type-of($bg-var) == list and nth($bg-var,1) == transparent or type-of($bg-var) == color or $bg-var == transparent {
@if $color-stops {
$color-stops: append($color-stops,#{$bg-var},comma);
}
@else {
$color-stops: #{$bg-var};
}
}
@else {
@if $noshape {
$color-stops: #{$bg-var};
}
@else if $shapedef {
$shapedef: append($shapedef,$bg-var,space);
}
@else {
$shapedef: #{$bg-var};
}
}
}
@if $shapedef {
@if index($shapedef, at) {
@each $sub-var in $shapedef {
@if index($shapedef,$sub-var) > index($shapedef, at) {
@if $position {
$position: append($position,$sub-var,space);
}
@else {
$position: $sub-var;
}
}
@else if index($shapedef,$sub-var) < index($shapedef, at) {
@if $sub-var == circle or $sub-var == ellipsis {
$shape: $sub-var;
}
@else {
@if $size {
$size: append($size,$sub-var,space)
}
@else {
$size: $sub-var;
}
}
}
}
}
@else {
@each $sub-var in $shapedef {
@if $sub-var == circle or $sub-var == ellipsis {
$shape: $sub-var;
}
@else {
@if $size {
$size: append($size,$sub-var,space)
}
@else {
$size: $sub-var;
}
}
}
}
}
@if $position {
$bg-string:#{$position};
}
@if $shape and $size {
@if $size == closest-side or $size == farthest-side or $size == closest-corner or $size == farthest-corner {
@if $bg-string {
$bg-string:append($bg-string, #{$shape} #{$size}, comma);
}
@else {
$bg-string:#{$shape} #{$size};
}
}
@else if type-of($size) == string {
$mozexplicit:true;
@if $bg-string {
$bg-string:append($bg-string, #{$size} #{$size}, comma);
}
@else {
$bg-string:#{$size} #{$size};
}
}
@else {
@if $bg-string {
$bg-string:append($bg-string, #{$shape} #{$size}, comma);
}
@else {
$bg-string:#{$shape} #{$size};
}
}
}
@else {
@if $size {
@if $size == closest-side or $size == farthest-side or $size == closest-corner or $size == farthest-corner {
@if $bg-string {
$bg-string:append($bg-string, #{$size}, comma);
}
@else {
$bg-string:#{$size};
}
}
@else if type-of($size) == string {
$mozexplicit:true;
@if $bg-string {
$bg-string:append($bg-string, #{$size} #{$size}, comma);
}
@else {
$bg-string:#{$size} #{$size};
}
}
@else {
@if $bg-string {
$bg-string:append($bg-string, #{$size}, comma);
}
@else {
$bg-string:#{$size};
}
}
}
@if $shape {
@if $bg-string {
$bg-string:append($bg-string, #{$shape}, comma);
}
@else {
$bg-string:#{$shape};
}
}
}
@if $bg-string {
$bg-string: append($bg-string, #{$color-stops}, comma);
}
@else {
$bg-string: #{$color-stops};
}
@debug"vendor: " + $current-vendor;
@if $current-vendor == none {
@if $shapedef {
$bg-string:append(#{$shapedef}, #{$color-stops}, comma)
}
@else {
$bg-string:#{$color-stops};
}
@return #{if($repeating,$repeating,unquote(''))}#{radial-gradient}unquote('(')#{$bg-string}unquote(')')
}
@if $current-vendor == moz and $mozexplicit {
@warn "prefixed mozilla syntax doesn't support explicitly defined sizes for radial gradients, -moz- syntax excluded";
@return false
}
@if $current-vendor == webkit or $current-vendor == moz or $current-vendor == o {
@return -#{$current-vendor}-#{if($repeating,$repeating,unquote(''))}#{radial-gradient}unquote('(')#{$bg-string}unquote(')')
}
@if $current-vendor == webkitlegacy {
@warn "no output for webkit-legacy";
@return false
}
}
}
@function parselinear_old($args...) {
@return "hoskins";
}
@function parselinear($args...) {
$bg-vars:false;
$bg-string:false;
$started: false;
$percentagestops: true;
$repeating: false;
$startindex: false;
$startpercent: false;
$color-join: false;
$nextpercent: false;
$nextindex: false;
@each $arg in $args {
@debug "Arg:" + $arg;
@each $var in $arg {
@if $var != linear-grad and $var != rep-linear-grad {
@if $bg-vars {
$bg-vars: append($bg-vars,$var,comma);
}
@else {
@if type-of($var) == number or type-of($var) == color or $var == transparent {
$bg-vars: $var;
@if $current-vendor == webkitlegacy and type-of($var) != number {
$bg-vars: append(#{to bottom},$var,comma);
}
}
@else {
@if type-of(nth($var,1)) == color or nth($var,1) == transparent {
$bg-vars: #{$var};
@if $current-vendor == webkitlegacy {
$bg-vars: append(#{to bottom},$var,comma);
}
}
@else {
$bg-vars: #{$var};
}
}
}
}
@if $var == rep-linear-grad {
$repeating:repeating-;
}
}
$stopIndex:1;
@each $bg-var in $bg-vars {
@if $current-vendor == webkitlegacy {
@if $bg-string and $percentagestops {
$color-stop:false;
$color:false;
@if type-of($bg-var) == list {
@each $sub-arg in $bg-var {
@if type-of($sub-arg) == number {
$color-stop: $sub-arg;
$startpercent: $sub-arg;
@if $started == false {
$started: true;
$startindex:index($bg-vars, $bg-var);
$startpercent: $sub-arg;
}
}
@else {
$color:$sub-arg;
}
}
}
@else {
@if type-of($bg-var) == color or $bg-var == transparent {
$color: $bg-var;
@if $started == false {
$color-stop:0%;
$started: true;
$startindex:$stopIndex;
$startpercent:$color-stop;
}
@else if $stopIndex == length($bg-vars) {
$color-stop:100%;
}
@else if $startindex and $startpercent {
$i: length($bg-vars);
@while $i > $stopIndex {
@if type-of(nth($bg-vars, $i)) == list {
$nextindex: $i;
$nextpercent: nth(nth($bg-vars, $i), 2);
}
@else if $i == length($bg-vars) {
$nextindex: $i;
$nextpercent: 100%;
}
$i: $i - 1;
}
$j: $startindex;
@while $j < $stopIndex {
@if type-of(nth($bg-vars, $j)) == list {
$startindex: $j;
$startpercent: nth(nth($bg-vars, $j), 2);
}
$j: $j + 1;
}
$color-stop: ($nextpercent - $startpercent)/($nextindex - $startindex) + $startpercent;
$startpercent: $color-stop;
$startindex:$stopIndex;
}
}
}
@if $color-stop and $color {
$color-join: join($color-stop,$color,comma);
}
@if $color-stop {
@if unit($color-stop) != "%" {
$percentagestops:false;
}
}
@if $color-join {
$bg-string: append($bg-string,#{color-stop}unquote('(')#{$color-join}unquote(')'),comma);
}
}
@else {
@if type-of($bg-var) == number {
$angle: $bg-var;
$matchedset: false;
$small: 360;
@if $angle < 0deg {
$angle: $angle + 360;
}
@each $adjustedangle in $legacywebkit-offdeg-matrix {
$match: $adjustedangle - $angle;
@if $match < 0deg {
$match: $angle - $adjustedangle;
}
@if $matchedset {
$matchedset: append($matchedset,$match/1deg,comma);
}
@else {
$matchedset: $match/1deg;
}
}
@each $val in $matchedset {
@if $val < $small {
$small: $val;
}
}
$closest: index($matchedset,$small);
$closestmatch: nth($legacywebkit-offdeg-matrix,$closest);
$direction: quote(#{$closestmatch});
@each $translation in $legacywebkit-linear-gradient-translation-matrix {
@if nth($translation,1) == $direction {
$bg-string: unquote(#{nth($translation,2)});
}
}
}
@else if type-of($bg-var) == list and type-of(nth($bg-var,2)) == number and unit(nth($bg-var,2)) != "%" {
$percentagestops:false;
}
@else {
$direction: quote(#{$bg-var});
@each $translation in $legacywebkit-linear-gradient-translation-matrix {
@if nth($translation,1) == $direction {
$bg-string: unquote(#{nth($translation,2)});
}
}
}
}
}
@else {
@if $bg-string {
$bg-string: append($bg-string,#{$bg-var},comma);
}
@else {
@if $current-vendor == none {
$bg-string: #{$bg-var};
}
@else {
$direction: quote(#{$bg-var});
$bg-string: unquote($direction);
@if type-of($bg-var) == number {
$bg-string:90 - $bg-var;
}
@else {
@each $translation in $linear-gradient-translation-matrix {
@if nth($translation,1) == $direction {
$bg-string: unquote(#{nth($translation,2)});
}
}
}
}
}
}
$stopIndex:$stopIndex + 1;
}
@if $current-vendor == none {
@return #{if($repeating,$repeating,unquote(''))}#{linear-gradient}unquote('(')#{$bg-string}unquote(')')
}
@if $current-vendor == webkit or $current-vendor == moz or $current-vendor == o {
@return -#{$current-vendor}-#{if($repeating,$repeating,unquote(''))}#{linear-gradient}unquote('(')#{$bg-string}unquote(')')
}
@if $current-vendor == webkitlegacy and $percentagestops and $repeating == false {
@return #{-webkit-gradient}unquote('(linear,')#{$bg-string}unquote(')')
}
@if $percentagestops == false and $repeating == false {
@warn "legacy webkit gradient syntax only supports % values for color stops, this gradient will not be included in the output";
@return false
}
@if $repeating {
@return false
}
}
}
$linear-gradient-translation-matrix: (
('to bottom','top')
('to top','bottom')
('to left','right')
('to right','left')
('to bottom right','top left')
('to right bottom','top left')
('to bottom left','top right')
('to left bottom','top right')
('to top left','bottom right')
('to left top','bottom right')
('to top right','bottom left')
('to right top','bottom left')
);
$legacywebkit-linear-gradient-translation-matrix: (
('to bottom',' 0 0, 0 100%')
('180deg',' 0 0, 0 100%')
('-180deg',' 0 0, 0 100%')
('to top',' 0 100%, 0 0')
('0deg',' 0 100%, 0 0')
('360deg',' 0 100%, 0 0')
('to left',' 100% 0, 0 0')
('-90deg',' 100% 0, 0 0')
('270deg',' 100% 0, 0 0')
('to right',' 0 0, 100% 0')
('90deg',' 0 0, 100% 0')
('-270deg',' 0 0, 100% 0')
('to bottom right',' 0 0, 100% 100%')
('to right bottom',' 0 0, 100% 100%')
('135deg',' 0 0, 100% 100%')
('-225deg',' 0 0, 100% 100%')
('to bottom left',' 100% 0, 0 100%')
('to left bottom',' 100% 0, 0 100%')
('-135deg',' 100% 0, 0 100%')
('225deg',' 100% 0, 0 100%')
('to top left',' 100% 100%, 0 0')
('to left top',' 100% 100%, 0 0')
('-45deg',' 100% 100%, 0 0')
('315deg',' 100% 100%, 0 0')
('to top right',' 0 100%, 100% 0')
('to right top',' 0 100%, 100% 0')
('45deg',' 0 100%, 100% 0')
('-315deg',' 0 100%, 100% 0')
);
$legacywebkit-offdeg-matrix: (360deg,315deg,270deg,225deg,180deg,135deg,90deg,45deg,0deg);
@function linear-gradient($args...) {
@if $parsegradients {
@if length($args) > 1 {
$outputs: linear-grad;
@each $arg in $args {
@if $outputs {
$outputs: append($outputs,$arg, comma);
}
}
@return $outputs
}
@else {
@warn "linear gradients require at least 2 arguments, the expression linear-gradient(#{$args}) was not parsed";
@return unquote("")
}
}
@else {
@return #{linear-gradient}unquote('(')#{$args}unquote(')')
}
}
@function repeating-linear-gradient($args...) {
@if $parsegradients {
@if length($args) > 1 {
$outputs: rep-linear-grad;
@each $arg in $args {
@if $outputs {
$outputs: append($outputs,$arg, comma);
}
}
@return $outputs
}
@else {
@warn "repeating linear gradients require at least 2 arguments, the expression repeating linear-gradient(#{$args}) was not parsed";
@return unquote("")
}
}
@else {
@return #{repeating-linear-gradient}unquote('(')#{$args}unquote(')')
}
}
@function radial-gradient($args...) {
@if $parsegradients {
@if length($args) > 1 {
$outputs: radial-grad;
@each $arg in $args {
@if $outputs {
$outputs: append($outputs,$arg, comma);
}
}
@return $outputs
}
@else {
@warn "radial gradients require at least 2 arguments, the expression radial-gradient(#{$args}) was not parsed";
@return unquote("")
}
}
@else {
@return #{radial-gradient}unquote('(')#{$args}unquote(')')
}
}
@function repeating-radial-gradient($args...) {
@if $parsegradients {
@if length($args) > 1 {
$outputs: rep-radial-grad;
@each $arg in $args {
@if $outputs {
$outputs: append($outputs,$arg, comma);
}
}
@return $outputs
}
@else {
@warn "radial gradients require at least 2 arguments, the expression repeating-radial-gradient(#{$args}) was not parsed";
@return unquote("")
}
}
@else {
@return #{radial-gradient}unquote('(')#{$args}unquote(')')
}
}
.bannerStyle01 {
@include background( linear-gradient(to right,#e14504,#ff9016) );
background-color: mix(#e14504,#ff9016);
border: 1px solid black;
}
/*.bannerStyle02 {
@include background( radial-gradient(to right,#e14504,#ff9016) );
background-color: mix(#e14504,#ff9016);
border: 1px solid black;
}*/
当我尝试在VS2013中使用Web Essentials进行编译时，我收到一条消息“函数parselinear没有@return完成”。
我已经安装了Scout并使用它来填充代码并调试以尝试跟踪函数可能在没有@return语句的情况下完成的原因，但我无法做到。
我知道该消息应该非常清楚，甚至指向具有问题的正确函数，如果我用简单的@return "bob"替换该函数的同名函数，那么就没有问题。麻烦是2天的调查没有解释为什么我仍然收到此消息，尽管我的所有调试似乎表明没有传递返回值的功能完成该功能。
任何帮助重新审视这一点都将非常感激 - 希望我将它隔离到一个可以用来创建一个简单的scss文件的块的事实将帮助其他人尝试在他们的命令行上运行它/ IDE。
非常感谢，
艾伦