সাসে চিত্রের পথে কোনও পরিবর্তনশীল আছে?

Question

আমি একটি ভেরিয়েবল রাখতে চাই যাতে আমার সিএসএস ফাইলে আমার সমস্ত চিত্রের মূল পাথ থাকে। খাঁটি সাসে এটি সম্ভব কিনা তা আমি পুরোপুরি বুঝতে পারি না (আসল ওয়েব প্রকল্পটি আরআর নয়, সুতরাং সম্পদ_পাইপলাইন বা সেই অভিনব জ্যাজগুলির কোনওটিই ব্যবহার করতে পারবেন না)।

এখানে আমার উদাহরণটি কার্যকর হয় না। সংকলন করার সময় এটি ব্যাকগ্রাউন্ডের ইউআরএল বৈশিষ্ট্য ( "Invalid CSS after "..site/background": expected ")") বলে ভেরিয়েবলের প্রথম নজরে আসে bal

পথ ফিরে ফাংশন সংজ্ঞায়িত:

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

কোন সাহায্য প্রশংসা করা হবে।

Answer 1

আপনি কি ইন্টারপোলেশন সিনট্যাক্স চেষ্টা করেছেন ?

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

Comments

এটি আমার পক্ষে কাজ করে না কারণ সিএসএস ভারিবেলস প্রসেসর সিএসডিটাউটিপ্রিপ্রসেসরের আগে প্রিপ্রসেসর হিসাবে সেট করা হলেও ভেরিয়েবলগুলি প্রক্রিয়া করে না

— আলেক্সি

উদ্ধৃত পাথগুলিতে যেমন কাজ করে কম্পাস ফন্ট-ফেস মিক্সিনেও works '#{$fontName}.ext', ..

— ফ্লুভ

হ্যাঁ, উদ্ধৃত পথে ব্যবহার করা ভাল। অন্যান্য বুদ্ধিমান এটি নেটবিন আইডিইতে ত্রুটি দেখায়। ইউআরএল ("# {-সম্পদগুলিতে আসুন} / সাইট / ব্যাকগ্রাউন্ড.jpg")

— প্যানস

Answer 2

কোনও ক্রিয়াকলাপের প্রয়োজন নেই:

$assetPath : "/assets/images";

...

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

বিশদ জন্য ইন্টারপোলেশন ডক্স দেখুন ।

Comments

— স্পষ্টতাকে

Answer 3

একই প্রশ্নের উত্তরের জন্য সন্ধান করছিল, তবে মনে করি আমি এর থেকে আরও ভাল সমাধান পেয়েছি: http://blog.grayghostvisual.com/compass/image-url/

মূলত, আপনি কনফিগার.আরবিতে আপনার চিত্রের পথটি সেট করতে পারেন এবং আপনি চিত্র-ইউআরএল () সহায়ক ব্যবহার করেন

Answer 4

উপরের সঠিক উত্তরগুলিতে কিছু যুক্ত করা। আমি নেটবিন আইডিই ব্যবহার করছি এবং url(#{$assetPath}/site/background.jpg)এই পদ্ধতিটি ব্যবহার করার সময় এটি ত্রুটি দেখায় । এটি কেবল নেটবিন ত্রুটি ছিল এবং স্যাস সংকলনে কোনও ত্রুটি ছিল না। তবে এই ত্রুটিটি নেটবিয়ান এবং কোডগুলিতে কোড ফর্ম্যাটিং বিরক্ত হয়ে যায়। কিন্তু যখন আমি নীচের মতো কোটসের ভিতরে এটি ব্যবহার করি, তখন এটি আশ্চর্য হয়ে যায়!

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

Answer 5

আমরা পরম পাথের পরিবর্তে আপেক্ষিক পথটি ব্যবহার করতে পারি:

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

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