Чи є змінна в шляху зображення в Sass?

123

Я хочу мати одну змінну, яка містить кореневий шлях до всіх моїх зображень у моєму CSS-файлі. Я не можу точно зрозуміти, чи можливо це в чистому Sass (власне веб-проект не є RoR, тому не можу використовувати активу-піпеліну чи будь-який із цього фантазійного джазу).

Ось мій приклад, який не працює. При компіляції він базує на першому екземплярі змінної у фоновому режимі url say ( "Invalid CSS after "..site/background": expected ")").

Визначення функції повернення шляху:

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

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

Використання функції:

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

Будь-яка допомога буде вдячна.

css sass

— програма247365
джерело

207

Ви спробували синтаксис Інтерполяції ?

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

— Веслі Мурч
джерело

1

Це не працює для мене, тому що CssVariablesProcessor не обробляє змінні, навіть якщо його встановлено як препроцесор перед CssDataUriPreProcessor

— Олексій

1

Також працює у котируемих контурах, наприклад, у комбінації шрифтів для обличчя компаса. '#{$fontName}.ext', ..

— Фльов

Так, краще використовувати в процитованому шляху. Інші мудрі це показує помилку в IDE netbeans. url ("# {$ get-path-to-imov} /site/background.jpg")

— Pons Purushothaman

94

Не потрібно функції:

$assetPath : "/assets/images";

...

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

Докладніше див. Документи про інтерполяцію .

— steveax
джерело

7

Однозначно віддайте перевагу стислість із вказівкою безпосередньо на змінну

— skia.heliou

6

Шукав відповідь на те саме питання, але думаю, що я знайшов краще рішення: http://blog.grayghostvisuals.com/compass/image-url/

В основному, ви можете встановити шлях свого зображення в config.rb і використовувати помічник image-url ()

— NerdCowboy
джерело

1

Додавши щось до вищезазначених правильних відповідей. Я використовую IDE Netbeans, і він показує помилку під час використання url(#{$assetPath}/site/background.jpg)цього методу. Це була просто помилка netbeans і без помилок у складанні sass. Але це форматування коду помилки на розрив у netbeans та коді стають некрасивими. Але коли я використовую його всередині цитат, як нижче, це показує диво!

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

— Понс Пурушотхаман
джерело

0

Ми можемо використовувати відносний шлях замість абсолютного шляху:

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

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

— Арджи Джордж
джерело