Câu hỏi Sass Background Hình ảnh mixin


Tôi là người mới với Sass, nhưng tôi đang cố gắng tạo ra một quy trình làm việc cho bản thân mình. Tôi tạo ra "gói màu" cho thiết kế chủ đề của tôi và cần phải xác định các biến sau cho mixin của tôi. Có cách nào tốt hơn để làm điều này?:

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

Tôi đang chèn như vậy:

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

sản lượng này:

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

Tôi muốn sử dụng viết tắt CSS khi có thể, nhưng tôi đã gặp lỗi với đầu ra. Tôi đánh giá cao bất kỳ lời khuyên của chuyên gia nếu đây không phải là cách tốt nhất để làm điều đó.


14
2018-03-27 08:24


gốc




Các câu trả lời:


tùy thuộc vào cách gói của bạn được cấu trúc / áp dụng, bạn có thể sử dụng vòng lặp để tạo ra một loạt các kiểu chung. Xem tài liệu ở đây: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35

Bạn có thực sự cần 3 thành phần riêng biệt để có được url hình ảnh của bạn? sẽ không: $img và sau đó đặt nó thành /folder/img.ext dễ dàng hơn nhiều?

Ngoài ra, bạn không cần #{} để lặp lại bằng cách này.

Tôi hy vọng đây là những gì bạn đang sau ... câu hỏi không phải là rất cụ thể về những gì bạn cần kết quả để thực sự được.

Chúc mừng, Jannis

Cập nhật:

Ok, tôi thấy bạn đã cập nhật câu hỏi của bạn (cảm ơn vì điều đó). Tôi tin rằng điều này có thể tốt hơn một chút để sử dụng chung:

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

Điều này sẽ xuất ra:

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

Hoặc bạn có thể sử dụng phiên bản viết tắt:

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

Mà sẽ tạo ra:

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

Cuối cùng nếu bạn muốn chỉ định đường dẫn cơ sở của mình vào thư mục hình ảnh riêng bạn có thể làm như sau:

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

Điều này sau đó sẽ tạo ra:

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

Đây có phải là thứ bạn cần không?

Nếu không cảm thấy tự do cập nhật câu hỏi hoặc trả lời / nhận xét.


28
2018-03-27 08:36



nó không có ý nghĩa rằng mã SASS của bạn dài hơn những gì nó sẽ được nếu nó được viết chỉ với CSS ... điều duy nhất bạn cần một mixin cho là phần URL có lẽ, không phải phần còn lại. làm cho tên mixin của bạn ngắn hơn. - vsync


một số mẫu khác:

đường dẫn đến hình ảnh:

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

màu

$black: #000000;

tạo 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 ;
} 

sử dụng trộn:

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

kết quả:

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

2
2018-06-15 09:03



này, mọi nhận xét về cách vị trí nền như "trung tâm bên phải" sẽ hoạt động / được sử dụng. - Sp0T


lấy một $ var và nó sẽ giúp bạn dễ dàng hơn.

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

1
2018-02-02 05:29