Sass'ta görüntü yolunda bir değişken mi var?

123

CSS dosyamdaki tüm resimlerimin kök yolunu içeren bir değişkene sahip olmak istiyorum. Bunun saf Sass'ta mümkün olup olmadığını tam olarak anlayamıyorum (asıl web projesi RoR değil, bu yüzden asset_pipeline veya o süslü cazlardan herhangi birini kullanamam).

İşte işe yaramayan örneğim. Derlemede arka planda url özelliğindeki değişkenin ilk örneğinde ( "Invalid CSS after "..site/background": expected ")") diyerek durur .

Yolu döndürmek için işlevi tanımlama:

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

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

İşlevi kullanma:

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

Herhangi bir yardım memnuniyetle karşılanacaktır.

css sass

— program247365
kaynak

207

Interpolation sözdizimini denediniz mi?

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

— Wesley Murch
kaynak

1

Benim için çalışmıyor çünkü CssVariablesProcessor, CssDataUriPreProcessor'dan önce önişlemci olarak ayarlanmış olsa bile değişkenleri işlemiyor

— Alexey

1

Ayrıca alıntılanmış yollarda da çalışır, örneğin pusula yazı tipi-yüz karışımında. '#{$fontName}.ext', ..

— Fleuv

Evet, alıntılanan yolda kullanmak daha iyidir. Aksi takdirde, netbeans IDE'de hata gösterir. url ("# {$ get-path-to-assets} /site/background.jpg")

— Pons Purushothaman

94

Bir işleve gerek yok:

$assetPath : "/assets/images";

...

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

Ayrıntılar için enterpolasyon belgelerine bakın.

— steveax
kaynak

7

Doğrudan değişkene işaret ederek kısalığı kesinlikle tercih edin

— skia.heliou

6

Aynı soruya bir yanıt arıyordum, ancak daha iyi bir çözüm bulduğumu düşünüyorum: http://blog.grayghostvisuals.com/compass/image-url/

Temel olarak, resim yolunuzu config.rb içinde ayarlayabilir ve image-url () yardımcısını kullanabilirsiniz.

— NerdCowboy
kaynak

1

Yukarıdaki doğru cevaplara bir şeyler eklemek. Netbeans IDE kullanıyorum ve url(#{$assetPath}/site/background.jpg)bu yöntemi kullanırken hata gösteriyor . Bu sadece netbeans hatasıydı ve sass derlemesinde hata yoktu. Ancak bu hata netbeans ve koddaki kod biçimlendirmesini bozar ve çirkinleşir. Ama onu aşağıdaki gibi alıntıların içinde kullandığımda, şaşkınlık gösteriyor!

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

— Pons Purushothaman
kaynak

0

Mutlak yol yerine göreli yol kullanabiliriz:

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

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

— Aarji George
kaynak