কম মধ্যে সংঘবদ্ধ স্ট্রিং


129

আমি মনে করি এটি সম্ভব নয়, তবে আমি ভেবেছিলাম কোনও উপায় থাকলে আমি জিজ্ঞাসা করি। ধারণাটি হ'ল ওয়েব রিসোর্স ফোল্ডারে যাওয়ার পথে আমার একটি পরিবর্তনশীল রয়েছে:

@root: "../img/";
@file: "test.css";
@url: @root@file;

.px {
    background-image: url(@url);
}

আমি ফলাফল হিসাবে এটি পেতে:

.px { background-image: url("../img/" "test.css"); }

তবে, আমি চাই যে স্ট্রিংগুলি একটি স্ট্রিংয়ের সাথে একত্রিত হোক:

.px { background-image: url("../img/test.css"); }

কমগুলিতে একসাথে স্ট্রিংগুলি যুক্ত করা কি সম্ভব?

উত্তর:


225

চলক ইন্টারপোলেশন ব্যবহার করুন :

@url: "@{root}@{file}";

সম্পূর্ণ কোড:

@root: "../img/";
@file: "test.css";

@url: "@{root}@{file}";

.px{ background-image: url(@url); }

উত্তর করার জন্য ধন্যবাদ! এটি নিখুঁত। এখন আমি নিশ্চিত করতে পারি যে প্রসঙ্গের পথটি পরিবর্তিত হলেও, একটি রিফ্যাক্টরিং দুঃস্বপ্ন হবে না।
জুমিনোজ

ধন্যবাদ, আমি ঠিক একই সমস্যাটি পেরেছি এবং ডক্সে এটি মিস করেছি।
ডেভিড

ধন্যবাদ @ পলপ্রো! আমার ভিএস ওয়েব সংকলক অ্যাড-অনের সাথে একটি সমস্যা ছিল, যেখানে এটি আমার ব্যাকগ্রাউন্ড-চিত্রের ইউআরএল পরিবর্তন করছে, এবং আমি কীভাবে সংক্ষিপ্তকরণ করব তা নিশ্চিত ছিল না :)
হাটস্রুমন্ডকোড

6
শুধু যারা এই উত্তর অবতরণ পারে কিন্তু এটি ব্যবহার করতে যেমন মত একটি স্ট্রিং সঙ্গে একটি সাংখ্যিক পরিবর্তনশীল একত্রিত করার চেষ্টা করছেন জন্য একটা নোট pxবা %: আপনি দ্বারা স্ট্রিং আন-মূল্যউদ্ধৃতি পারেন একটি টিল্ড সঙ্গে এটি প্রাক মুলতুবী ~, যেমন:width: ~"@{w}px";
AsGoodAsItGets

29

আপনি ডকুমেন্টেশনে দেখতে পাচ্ছেন , আপনি এক সাথে ভেরিয়েবল এবং প্লেইন স্ট্রিংগুলির সাথে স্ট্রিং ইন্টারপোলেশন ব্যবহার করতে পারেন:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

12

আমি চিত্রগুলি পরিচালনা করার জন্য একই কৌশলটি খুঁজছিলাম। আমি এর উত্তর দিতে একটি মিশ্রণ ব্যবহার করেছি:

.bg-img(@img-name,@color:"black"){
    @base-path:~"./images/@{color}/";
    background-image: url("@{base-path}@{img-name}");
}

তারপরে আপনি ব্যবহার করতে পারেন:

.px{
    .bg-img("dot.png");
}

অথবা

.px{
    .bg-img("dot.png","red");
}

হ্যালো এবং স্বাগতম! আপনি কেন মনে করেন যে গৃহীত উত্তরটি আর বৈধ নয়? এটা কি পুরানো? প্রযুক্তি উন্নতি হয়েছে? এটা ভুল? তোমার ভাল কেন?
STT LCU

9

ঐ স্ট্রিং মত ইউনিট মত মানের জন্য 45degtransform: rotate(45deg)ব্যবহার unit(value, suffix)ফাংশন। উদাহরণ:

// Mixin
.rotate(@deg) {
  @rotation: unit(@deg, deg);
  -ms-transform: rotate(@rotation);
  transform: rotate(@rotation);
}

// Usage
.rotate(45);

// Output
-ms-transform: rotate(45deg);
transform: rotate(45deg);

1
প্রযুক্তিগতভাবে প্রশ্নের উত্তর দেয় না, তবে এখনও একটি দরকারী কৌশল।
ট্রাইসিস

7

আপনি কম.জেএস বা লেটারফপি ব্যবহার করছেন কিনা তা জানেন না (যেমন ওয়ার্ডপ্রেসের জন্য ডাব্লুপি- লেসার প্লাগইনে) তবে লেটফ্যাপের সাহায্যে আপনি স্ট্রিংগুলিকে "আনকোট" করতে পারেন ~: http://leafo.net/lessphp/docs/#string_unquoting


1
এটি নিয়মিত কম ব্যবহার করে। আমি জানি না যে 2012 সালে এই উত্তরটি কখন লেখা হয়েছিল did
ট্রাইসিস

-7

ড্রুপাল Using ব্যবহার করে I've. আমি একটি সাধারণ প্লাস চিহ্ন ব্যবহার করেছি এবং এটি কাজ করছে:

@images_path+'bg.png'

5
অল্প / সিএসএসে কেবল কনক্রিট স্ট্রিংয়ের জন্য তিনি স্বেচ্ছায় দ্রুপাল শিখতে না পারলে আমি মনে করি আপনার পরামর্শটি মূল্যহীন। কোন অপরাধ নেই, আমি শুধু বলছি।
ওজনমুয়েজ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.