Imagen de fondo de Sass mixin

Question

Soy algo nuevo en Sass, pero estoy intentando crear un flujo de trabajo para mí. Genero "paquetes de colores" para mis diseños de tema y necesito especificar las siguientes variables para mi mixin. ¿Hay una mejor manera de hacer esto ?:

// folder,filename,extension,repeat,x-pos,y-pos 
@mixin background ($folder:style1, $img:file, $type:png, $repeat:no-repeat, $x:0, $y:0) { 
    background-image: url(./images/#{$folder}/#{$img}.#{$type}); 
    background-repeat: #{$repeat}; 
    background-position: #{$x}px #{$y}px; 
} 

estoy insertando de este modo:

#nav { 
    @include background(style2,myimage,png,repeat-x,10,10); 
} 

que produce esto:

#nav { 
    background-image: url(./images/style2/myimage.png); 
    background-repeat: repeat-x; 
    background-position: 10px 10px; 
} 

preferiría utilizar CSS en forma abreviada cuando sea posible, pero encontré errores con la salida. Agradecería cualquier consejo experto si esta no es la mejor manera de hacerlo.

Answer 1

dependiendo de cómo estén estructurados/aplicados sus paquetes, es posible que pueda usar un bucle para generar un grupo de estilos genéricos. Consulte la documentación aquí: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

¿Realmente necesita 3 componentes separados para obtener su url de imagen? no sería: $img y luego establecer que a /folder/img.ext ser mucho más fácil?

Además, no necesita el #{} para repetir por cierto.

Espero que esto es lo que está buscando ... la pregunta no es muy específica en términos de lo que realmente necesita el resultado.

Saludos, Jannis

Actualización:

bien, veo que haya actualizado su pregunta (gracias por eso). Creo que esto podría ser un poco mejor para el uso general:

@mixin background($imgpath,$position:0 0,$repeat: no-repeat) { 
    background: { 
     image: url($imgpath); 
     position: $position; 
     repeat: $repeat; 
    } 
} 
.testing { 
    @include background('/my/img/path.png'); 
} 

Este será entonces de salida:

.testing { 
    background-image: url("/my/img/path.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 

O puede utilizar la versión abreviada:

@mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) { 
    background: transparent url(#{$imgpath}) $repeat $position; 
} 
.testing2 { 
    @include backgroundShorthand('/my/img/path.png'); 
} 

que generará:

.testing2 { 
    background: transparent url(/my/img/path.png) no-repeat 0 0; 
} 

Por último si desea especificar su ruta base a su directorio de imagen por separado puede hacer lo siguiente:

$imagedir:'/static/images/'; // define the base path before the mixin 

@mixin backgroundShorthandWithExternalVar($filename,$position:0 0,$repeat: no-repeat) { 
    background: transparent url(#{$imagedir}#{$filename}) $repeat $position; 
} 
.testing3 { 
    @include backgroundShorthandWithExternalVar('filename.png'); 
} 

Esto generará entonces:

.testing3 { 
    background: transparent url(/static/images/filename.png) no-repeat 0 0; 
} 

¿Es esto lo que necesitaba?

Si no puede actualizar la pregunta o responder/comentar.

Answer 2

tome uno $ var y lo hará más fácil para usted.

$list: pranav shah 

=author-images 
    @each $author in $list 
.photo-#{$author} 
    background: image-url("avatars/#{$author}.png") no-repeat 

    .author-bio 
+author-images 

css

.author-bio .photo-adam { 
background: url('/images/avatars/adam.png') no-repeat; 
} 
.author-bio .photo-john { 
background: url('/images/avatars/john.png') no-repeat; 
} 
.author-bio .photo-wynn { 
background: url('/images/avatars/wynn.png') no-repeat; 
} 
.author-bio .photo-mason { 
background: url('/images/avatars/mason.png') no-repeat; 
} 
.author-bio .photo-kuroir { 
background: url('/images/avatars/kuroir.png') no-repeat; 
} 

Answer 3

alguna otra muestra:

ruta a la imagen:

$path--rel  : "../images"; 

de color

$black: #000000; 

crear el mixin:

@mixin background-image($img, $background-position, $background-color) { 
    background-image: url('#{$path--rel}/#{$img}'); 
    background-repeat: no-repeat; 
    background-position: $background-position; 
    background-color: $background-color ; 
} 

usando la mezcla:

.navbar-inverse { 
    @include background-image("header.png", right, $black); 
} 

resultado:

.navbar-inverse { 
    background-image: url("../images/header.png"); 
    background-repeat: no-repeat; 
    background-position: right; 
    background-color: #000000; 
}