कम में समाप्‍त तार

Question

मुझे लगता है कि यह संभव नहीं है, लेकिन मुझे लगा कि अगर कोई रास्ता है तो मैं पूछूंगा। यह विचार है कि मेरे पास वेब संसाधन फ़ोल्डर के लिए एक चर है:

@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"); }

क्या कम में एक साथ तारों को समतल करना संभव है?

Answer 1

परिवर्तनीय प्रक्षेप का उपयोग करें :

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

पूर्ण कोड:

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

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

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

Comments

जवाब के लिए धन्यवाद! यह पूर्ण है। अब मैं यह सुनिश्चित कर सकता हूं कि यदि संदर्भ पथ बदल जाता है, तो भी एक बुरा सपना नहीं होगा।

— जुमिनोज़

धन्यवाद, मैं बस एक ही समस्या भर में आया और याद किया कि डॉक्स में।

— डेविड

धन्यवाद @Paulpro! मैं वी.एस. वेब कम्पाइलर ऐड-ऑन के साथ एक मुद्दा बना रहा था, जहां यह मेरी पृष्ठभूमि-छवि url को बदल रहा था, और मुझे यह भी निश्चित नहीं था कि मैं कैसे

— सम्‍मिलित करूं

बस उन लोगों के लिए एक नोट जो इस उत्तर पर उतर सकते हैं, लेकिन इसका उपयोग करने की कोशिश कर रहे हैं जैसे कि एक स्ट्रिंग के साथ एक संख्यात्मक चर को संयोजित करने के लिए जैसे : pxया %आप इसे एक टिल्ड के साथ पूर्व-लंबित द्वारा स्ट्रिंग को अन-कोट कर सकते हैं ~, जैसे:width: ~"@{w}px";

— AsGoodAsItets

Answer 2

जैसा कि आप दस्तावेज में देख सकते हैं , आप स्ट्रिंग इंटरपोलेशन का उपयोग चर और सादे तार के साथ भी कर सकते हैं:

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

Answer 3

मैं छवियों को संभालने के लिए उसी चाल की तलाश कर रहा था। मैंने इसका उत्तर देने के लिए एक मिश्रण का उपयोग किया:

.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");
}

Comments

नमस्ते और आपका स्वागत है! आपको क्यों लगता है कि स्वीकृत उत्तर अब मान्य नहीं है? क्या यह पुराना है? क्या कोई प्रौद्योगिकी सुधार हुआ है? यह गलत है? तुम्हारा क्यों बेहतर है?

— STT LCU

Answer 4

उन स्ट्रिंग की तरह इकाई की तरह मूल्यों के लिए 45degमें transform: 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);

Comments

तकनीकी रूप से प्रश्न का उत्तर नहीं देता है, लेकिन फिर भी एक उपयोगी चाल है।

— ट्राइसिस जूल

Answer 5

अगर आप कम.जेएस या कम एफपी (जैसे वर्डप्रेस के लिए WP- कम प्लगइन) का उपयोग कर रहे हैं, तो यह न जानें कि कम वर्ड के साथ आप इसके साथ "unquote" तार कर सकते हैं ~: http://leafo.net/lessphp/docs/#string_unototing

Comments

यह नियमित LESS के साथ-साथ काम करता है। मुझे नहीं पता कि यह 2012 में किया गया था जब यह जवाब लिखा गया था।

— कोशिश

Answer 6

Drupal 7 का उपयोग करना। मैंने एक सामान्य प्लस चिह्न का उपयोग किया है और यह काम कर रहा है:

@images_path+'bg.png'

Comments

जब तक वह स्वेच्छा से ड्रुपल को सीखने के लिए नहीं करता है, तब तक वह इसे LESS / CSS में उपयोग करने के लिए कहता है, मुझे लगता है कि आपका सुझाव बेकार है। कोई अपराध नहीं, मैं सिर्फ कह रहा हूं।

— ozanmuyes