css - sintaxis - sass variable font family

Sass imagen de fondo mixin

Question

Soy un poco nuevo en Sass, pero estoy intentando crear un flujo de trabajo para mí. Genero "paquetes de colores" para mis diseños de temas y necesito especificar las siguientes variables para mi mezcla. ¿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;
}

Me estoy insertando como tal:

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

que rinde esto:

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

Preferiría usar la abreviatura de CSS cuando sea posible, pero me encontré con errores en la salida. Apreciaría cualquier consejo experto si esta no es la mejor manera de hacerlo.

Answer 1

Dependiendo de cómo estén estructurados / aplicados tus paquetes, podrías usar un bucle para generar un montón de estilos genéricos. Consulte la documentación aquí: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

¿Realmente necesitas 3 componentes separados para obtener tu url de imagen? ¿no sería: $img y luego configurarlo en /folder/img.ext sería mucho más fácil?

Además, no necesitas el #{} para que se repita, por cierto.

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

Saludos, Jannis

Actualizar:

Bien, veo que has actualizado tu pregunta (gracias por eso). Creo que esto podría ser un poco mejor para 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'');
}

Esto luego dará salida:

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

O puedes usar 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 imágenes 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 necesitabas?

Si no, siéntase libre de actualizar la pregunta o responder / comentar.

Answer 2

alguna otra muestra:

camino a la imagen:

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

color

$black: #000000;

creando 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 ;
} 

utilizando 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;
}

Answer 3

toma un $ var y te lo hará más fácil.

$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;
}