Punya variabel di jalur gambar di Sass?

123

Saya ingin memiliki satu variabel yang berisi jalur root ke semua gambar saya di file CSS saya. Saya tidak tahu apakah ini mungkin dalam Sass murni (proyek web sebenarnya bukan RoR, jadi tidak dapat menggunakan asset_pipeline atau jazz mewah lainnya).

Inilah contoh saya yang tidak berhasil. Saat dikompilasi, ia menolak instance pertama dari variabel di properti url latar belakang mengatakan ( "Invalid CSS after "..site/background": expected ")").

Mendefinisikan fungsi untuk mengembalikan jalur:

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

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

Menggunakan fungsi:

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

Bantuan apa pun akan dihargai.

css sass program247365
sumber

Jawaban:

207

Sudahkah Anda mencoba sintaks Interpolasi ?

background: url(#{$get-path-to-assets}/site/background.jpg) repeat-x fixed 0 0;
Wesley Murch
sumber
1
Itu tidak bekerja untuk saya karena CssVariablesProcessor tidak memproses variabel meskipun disetel sebagai preprocessor sebelum CssDataUriPreProcessor
Alexey
1
Juga berfungsi di jalur yang dikutip, misalnya di mixin font-face kompas. '#{$fontName}.ext', ..
Fleuv
Ya, lebih baik digunakan di jalur yang dikutip. Jika tidak, ini menunjukkan kesalahan dalam Netbeans IDE. url ("# {$ get-path-to-assets} /site/background.jpg")
Pons Purushothaman
94

Tidak perlu suatu fungsi:

$assetPath : "/assets/images";

...

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

Lihat dokumen interpolasi untuk detailnya.

steveax
sumber
7
Pasti lebih suka singkatnya dengan menunjuk langsung ke variabel
skia.heliou
6

Sedang mencari-cari jawaban untuk pertanyaan yang sama, tetapi saya pikir saya menemukan solusi yang lebih baik: http://blog.grayghostvisuals.com/compass/image-url/

Pada dasarnya, Anda dapat mengatur jalur gambar Anda di config.rb dan Anda menggunakan gambar-url () helper

NerdCowboy
sumber
1

Menambahkan sesuatu ke jawaban yang benar di atas. Saya menggunakan Netbeans IDE dan itu menunjukkan kesalahan saat menggunakan url(#{$assetPath}/site/background.jpg)metode ini. Itu hanya kesalahan netbeans dan tidak ada kesalahan dalam kompilasi sass. Tapi kesalahan ini memecah kode format di netbeans dan kode menjadi jelek. Tetapi ketika saya menggunakannya di dalam kutipan seperti di bawah ini, itu menunjukkan keajaiban!

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

Pons Purushothaman
sumber
0

Kita bisa menggunakan jalur relatif daripada jalur absolut:

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

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