Sass Background Image mixin

Question

Я новичок в Sass, но я пытаюсь создать рабочий процесс для себя.Я создаю «пакеты цветов» для дизайна моей темы и мне нужно указать следующие переменные для моего миксина.Есть ли лучший способ сделать это?:

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

Я вставляю так:

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

, что приводит к этому:

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

I 'Я предпочел бы использовать сокращение CSS, когда это возможно, но я столкнулся с ошибками при выводе.Буду признателен за консультацию специалиста, если это не лучший способ сделать это.

Answer 1

в зависимости от того, как ваши пакеты структурированы / применены, вы можете использовать цикл для генерации набора общих стилей. См. Документацию здесь: http://sass -lang.com / docs / yardoc / file.SASS_REFERENCE.html # id35

Вам действительно нужно 3 отдельных компонента, чтобы получить URL-адрес изображения? не так: $img, а затем установить значение /folder/img.ext будет намного проще?

Кроме того, вам не нужно #{} для повторения, кстати.

Надеюсь, это то, что вы ищете ... вопрос не очень конкретный с точки зрения того, каким вам нужен результат на самом деле.

Ура, Jannis

Обновление:

Хорошо, я вижу, вы обновили свой вопрос (спасибо за это). Я считаю, что это может быть немного лучше для общего использования:

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

Затем будет выведено:

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

Или вы можете использовать сокращенную версию:

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

Который будет генерировать:

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

И, наконец, , если вы хотите указать свой базовый путь к каталогу изображений отдельно , вы можете сделать следующее:

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

Затем будет сгенерировано:

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

Это то, что вам нужно?

Если не стесняйтесь обновить вопрос или ответ / комментарий.

Answer 2

какой-то другой образец:

путь к изображению:

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

цвет

$black: #000000;

создание миксина:

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

с использованием микширования:

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

результат:

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

Answer 3

возьмите один $ var, и вам будет легче.

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