node vue 合并项目_vue 整合雪碧图功能(示例代码)

//随机数字

@function parse-random($value) {

@return round(random()*$value);

}

$randomId: parse-random(1000000);

$spriteSrc:"{{{spritesheet.image}}}";

$spriteWidth: {{{spritesheet.width}}}px;

$spriteHeight: {{{spritesheet.height}}}px;

{{#items}}

${{name}}: {{px.offset_x}} {{px.offset_y}} {{px.width}} {{px.height}};

{{/items}}

@function px2rem ($px) {

@if (type-of($px) == "number") {

@return $px/ 75px *1rem;

}

@if (type-of($px) == "list") {

@if (nth($px,1) == 0 and nth($px, 2) != 0) {

@return0 nth($px, 2) / 75px *1rem;

} @elseif (nth($px, 1) == 0 and nth($px, 2) == 0) {

@return0 0;

} @elseif (nth($px, 1) != 0 and nth($px, 2) == 0) {

@return nth($px,1) / 75px * 1rem 0;

} @else {

@return nth($px,1) / 75px *1rem nth($px, 2) / 75px *1rem;

}

}

}

@function strip-units($number){

@return $number/ ($number * 0 + 1);

}

@function format-zero($number){

@if $number== 0{

@return1;

}@else{

@return $number;

}

}

@mixin sprite-width($sprite, $precision) {

@if $precision {

width: px2rem(nth($sprite,3));

}@else{

width: px2rem(nth($sprite,3) +2px);

}

}

@mixin sprite-height($sprite, $precision) {

@if $precision {

height: px2rem(nth($sprite,4));

}@else{

height: px2rem(nth($sprite,4) +2px);

}

}

@mixin sprite-position($sprite, $precision) {

@if $precision {

background-position: strip-units(nth($sprite, 1)) / strip-units(nth($sprite, 3) - $spriteWidth) * 100% strip-units(nth($sprite, 2)) / format-zero(strip-units(nth($sprite, 4) - $spriteHeight)) * 100%;

}@else{

background-position: strip-units(nth($sprite, 1)) / strip-units(nth($sprite, 3) + 1 - $spriteWidth) * 100% strip-units(nth($sprite, 2)) / format-zero(strip-units(nth($sprite, 4) + 1 - $spriteHeight)) * 100%;

}

}

@mixin sprite($sprite, $precision) {

@include sprite-position($sprite, $precision);

@include sprite-width($sprite, $precision);

@include sprite-height($sprite, $precision);

background-image: url(‘#{$spriteSrc}‘);

background-repeat: no-repeat;

background-size: px2rem(($spriteWidth, $spriteHeight));

display: inline-block;

}

{{#sprite}}

{{class}} {

background-repeat: no-repeat;

overflow: hidden;

border: none;

background: url(‘#{$spriteSrc}‘);

@include inline-block();

vertical-align: middle;

font-style: normal;

color:$icon-font-color;

}

{{/sprite}}

{{#items}}

@mixin mix-{{name}}() {

@include sprite(${{name}}, $precision:false);

}

{{/items}}