Có một biến trong đường dẫn hình ảnh trong Sass?

123

Tôi muốn có một biến chứa đường dẫn gốc tới tất cả các hình ảnh của mình trong tệp CSS. Tôi hoàn toàn không thể biết liệu điều này có thể xảy ra trong Sass thuần túy hay không (dự án web thực tế không phải là RoR, vì vậy không thể sử dụng property_pipeline hoặc bất kỳ nhạc jazz ưa thích nào).

Đây là ví dụ của tôi không hoạt động. Khi biên dịch, nó chùn bước ở trường hợp đầu tiên của biến trong thuộc tính url nền nói ( "Invalid CSS after "..site/background": expected ")").

Xác định hàm để trả về đường dẫn:

//Vars
$assetPath : "/assets/images";

//Functions
@function get-path-to-assets($assetPath){
  @return $assetPath;
}

Sử dụng chức năng:

body {
  margin: 0 auto;
  background: url($get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

Bất kỳ trợ giúp sẽ được đánh giá cao.

css sass

— chương trình247365
nguồn

207

Bạn đã thử cú pháp Nội suy chưa?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;

— Wesley Murch
nguồn

1

Nó không hoạt động với tôi vì CssVariabledProcessor không xử lý các biến ngay cả khi nó được đặt làm tiền xử lý trước CssDataUriPreProcessor

— Alexey

1

Cũng hoạt động trong các đường dẫn được trích dẫn, ví dụ như trong mixin mặt la bàn. '#{$fontName}.ext', ..

— Fleuv

Có, tốt hơn là sử dụng trong đường dẫn được trích dẫn. Khôn ngoan khác, nó cho thấy lỗi trong netbeans IDE. url ("# {$ get-path-to-property} /site/background.jpg")

— Pons Purushothaman

94

Không cần một chức năng:

$assetPath : "/assets/images";

...

body {
  margin: 0 auto;
  background: url(#{$assetPath}/site/background.jpg) repeat-x fixed 0 0;
  width: 100%; }

Xem tài liệu nội suy để biết chi tiết.

— steveax
nguồn

7

Chắc chắn thích sự ngắn gọn khi chỉ trực tiếp vào biến

— skia.heliou

6

Đã tìm kiếm một câu trả lời cho cùng một câu hỏi, nhưng nghĩ rằng tôi đã tìm thấy một giải pháp tốt hơn: http://blog.grayghostvisuals.com/compass/image-url/

Về cơ bản, bạn có thể đặt đường dẫn hình ảnh của mình trong config.rb và bạn sử dụng trình trợ giúp hình ảnh-url ()

— NerdCowboy
nguồn

1

Thêm một cái gì đó vào các câu trả lời đúng ở trên. Tôi đang sử dụng IDE netbeans và nó hiển thị lỗi trong khi sử dụng url(#{$assetPath}/site/background.jpg)phương pháp này. Đó chỉ là lỗi netbeans và không có lỗi trong quá trình biên dịch sass. Nhưng lỗi này phá vỡ định dạng mã trong netbeans và mã trở nên xấu. Nhưng khi tôi sử dụng nó trong trích dẫn như dưới đây, nó cho thấy sự ngạc nhiên!

url("#{$assetPath}/site/background.jpg")

— Pons Purushothaman
nguồn

0

Chúng ta có thể sử dụng đường dẫn tương đối thay vì đường dẫn tuyệt đối:

$assetPath: '~src/assets/images/';
$logo-img: '#{$assetPath}logo.png';
@mixin logo {
  background-image: url(#{$logo-img});
}

.logo {
    max-width: 65px;
    @include logo;
 }

— Aarji George
nguồn