.less ফাইল এ। CSS ফাইল আমদানি করুন


228

আপনি কি .css ফাইলগুলিকে .বিহীন ফাইলগুলিতে আমদানি করতে পারবেন ...?

আমি কমের সাথে বেশ পরিচিত এবং এটি আমার সমস্ত বিকাশের জন্য ব্যবহার করি। আমি নিয়মিতভাবে একটি কাঠামো ব্যবহার করি:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

সমস্ত আমদানি অন্যান্য .বিহীন ফাইল এবং এটি যেমন কাজ করে তেমন কাজ করে।

আমার বর্তমান সমস্যাটি হ'ল: আমি .css ফাইলকে .ssss এ আমদানি করতে চাই that

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

.type.Css ফাইলটিতে একটি শ্রেণি বলা হয় তবে আমি যখন ফাইলবিহীন ফাইলটি সংকলন করার চেষ্টা করি তখন ত্রুটি পাইNameError: .type is undefined

.বিহীন ফাইলটি .css ফাইলগুলি আমদানি করবে না, কেবল অন্য .বিহীন ফাইলগুলি ...? নাকি আমি এটাকে ভুল উল্লেখ করছি ... !?


5
কম সিএসএসে ফিরে আসে, সুতরাং আপনার কেবল স্টাইল.এসএসের নাম পরিবর্তন করে স্টাইল.লেস করতে সক্ষম হওয়া উচিত, তবে যথারীতি এটি আমদানি করুন ... যদি না হয়
স্টাইল। CSS এর

3
হ্যাঁ, দুর্ভাগ্যক্রমে .css ফাইলটির নামকরণ করা সত্যিই সম্ভব নয়।
মিঃ জনি উড

1
একই সমস্যা আছে। দয়া করে github.com/cloudhead/less.js/issues/303
ইয়ারোস্লাভ

5
যদি আপনাকে বাহ্যিকভাবে .css উল্লেখ করার প্রয়োজন না হয় এবং একই সময়ে আপনাকে .css ফাইলটি পরিবর্তন (পুনঃনামকরণ) করতে হবে না, আপনি এটির একটি প্রতীকী লিঙ্ক তৈরি করতে পারেন যার .lessএক্সটেনশন রয়েছে। তারপরে এটি .lessফাইল হিসাবে উল্লেখ করুন। একটি প্রতীকী লিঙ্ক হওয়ায় এটি আপনার সমন্বয়সাধনের জন্য বোঝা সরিয়ে দেয় কারণ আপনার .css পরিবর্তনগুলি তত্ক্ষণাত্ .বিহীন ফাইলকে আমদানি করা প্রভাবিত করে। অপূর্ণতা হ'ল পরবর্তী পরিবর্তনগুলির পরে আপনার চূড়ান্ত CSS পুনরায় সংকলন করা উচিত। উইন্ডোজে প্রতীকী লিঙ্ক তৈরি সম্পর্কিত তথ্যের জন্য, MKLINK /?একটি কমান্ড উইন্ডোতে টাইপ করুন
আইভায়লো স্লাভভ

@ জ্যাকওয়ান্ডার্স, নতুন নামকরণের প্রয়োজন নেই, যেহেতু কম কমপক্ষে সিএসএসে পড়ে (যেমন আপনি সঠিকভাবে উল্লেখ করেছেন)। আপনি আমদানি করতে পারেন.css ইনলাইন (less)নির্দেশিকাটি ব্যবহার ফাইলটি এবং .cssসিনট্যাক্সটি একটি বৈধ .lessবাক্য গঠন রয়েছে এমন
ira

উত্তর:


316

আপনি কোনও বিকল্পকে নির্দিষ্ট করে কোনও ফাইলকে নির্দিষ্ট ধরণের হিসাবে ব্যাখ্যা করতে বাধ্য করতে পারেন, যেমন:

@import (css) "lib";

আউটপুট হবে

@import "lib";

এবং

@import (less) "lib.css";

lib.cssফাইলটি আমদানি করবে এবং এটিকে কম হিসাবে বিবেচনা করবে। আপনি যদি কোনও ফাইল কম নির্দিষ্ট করেন এবং কোনও এক্সটেনশন অন্তর্ভুক্ত না করেন তবে কোনওটিই যুক্ত করা হবে না।


1
এটা সঠিক উত্তর. তৃতীয়টি সিএসএস কোডটি কম কোড হিসাবে সংকলন করবে এবং নির্দেশ অক্ষত রাখবে না leave
সিএমসিডিগ্রাগনকাই

1
আমি মনে করি @Import (অন্তর্ভুক্ত) "lib.css" ব্যবহার করা উচিত। সংকলকের কাছে মিথ্যা কথা বলতে বলতে আমার অর্থ পছন্দ হয় না। অবশ্যই যখন আপনি জানেন যে ফাইলে কোনও কম কম কোড নেই।

16
এটি foo.css এর জন্য একটি অতিরিক্ত http-অনুরোধ তৈরি করবে, সুতরাং (inline)নির্দেশিকা (দেখুন stackoverflow.com/a/22594082/160968 ) এখন পছন্দনীয়
উরস

1
(inline)কাজ করবে না কারণ এটি ফন্ট বা অন্যান্য @import'এডিএসএস ফাইলগুলিতে বাহ্যিক উল্লেখগুলি রূপান্তর করে না doesn't আপনি কেবলমাত্র একটি বৃহত্তর সিএসএস ফাইল দিয়ে শেষ করেছেন যার ফলে প্রচুর 404 এইচটিটিপি অনুরোধ আসে ....
ব্যবহারকার 3338098

সর্বশেষতম সম্পাদনাটি রোলিং করা হচ্ছে যেহেতু এটি কেবল ভুল ছিল এবং প্রশ্নটির উত্তর দেয়নি
সাত-পর্যায়-সর্বাধিক

246

যদি আপনি চান যে আপনার সিএসএস প্রক্রিয়া না করে আউটপুটে অনুলিপি করা হয়, আপনি (inline)নির্দেশটি ব্যবহার করতে পারেন । যেমন,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

7
পারফেক্ট। আপনি যখন কিছু সিএসএস ফাইল (উদাহরণস্বরূপ ie7.less এ) একত্রীকরণ করতে চান তখন এটি ভাল কাজ করে তবে অগত্যা তাদের প্রক্রিয়া করবেন না (উদাহরণস্বরূপ বুটস্ট্র্যাপ- ie7 এক্সপ্রেশন ব্যবহার করে, যা কম ভাল পরিচালনা করে না)।
জো

4
খুব উপকারী. @import (css) "styles.css";আমার জন্য কাজ করেনি।
ivkremer

10
তারা উভয়ই বিভিন্ন ব্যবহারের ক্ষেত্রে সম্বোধন করে। এর সাথে (css), @importনির্দেশটি যেমন রয়েছে তেমন থাকবে এবং ফলস্বরূপ সিএসএস ফাইল রানটাইমের সময় ব্রাউজার দ্বারা লোড হবে; এর সাথে (inline)সিএসএস ফাইলের বিষয়বস্তুগুলি আসলে সংকলিত স্টাইলশিটে আমদানি করা হয়, উদাহরণস্বরূপ যদি সেই ফাইলটি আপনার ওয়েবের মূল থেকে দূরে থাকে তবে আপনি যা চান তা চাই। লক্ষ্য করুন ডিফল্ট আচরণ যখন @importএকটি ing .cssফাইলের সাথে হিসাবে একই (css)পতাকা - দস্তাবেজ পড়া আরও তথ্যের জন্য :)
neemzy

সুতরাং আপনার সিএসএস ফাইলে যদি @import"প্রক্রিয়াজাতকরণ" প্রয়োজন হয় এমন নির্দেশনা থাকে তবে এটি অবশ্যই কাজ করবে না ।
ব্যবহারকারী 3338098

'ইনলাইন' এর অর্থ কী এর সমস্ত আমদানিও ইনলাইন হবে? পুনরাবৃত্তভাবে ইনলাইন করার কোনও উপায় আছে কি?
রাস্তার আলো 18

29

আমি নিম্নলিখিত সংস্করণ 1.7.4 ব্যবহার করতে হবে

@import (less) "foo.css"

আমি জানি গৃহীত উত্তরটি @import (css) "foo.css"কিন্তু এটি কার্যকর হয়নি। আপনি যদি নতুন নতুন ফাইলে আপনার সিএসএস ক্লাসটি পুনরায় ব্যবহার করতে চান তবে আপনাকে ব্যবহার করা উচিত (less)এবং নাও দরকার (css)

ডকুমেন্টেশন চেক করুন ।


2
গৃহীত উত্তরটি সঠিক বিকল্প প্রাথমিকভাবে ছিল (হ্যাঁ, (less)হয় শুধুমাত্র বিকল্প আপনি একটি CSS ফাইলের কিছু শৈলী পুনরায় ব্যবহার করতে চান) কিন্তু কিছু কারণে @Fractalf তার সাম্প্রতিক সম্পাদনার সঙ্গে সঠিক অংশ সরানো হয়েছে।
সাত-পর্যায়-সর্বাধিক

1
আপনি "রেফারেন্স" এবং "কম" একত্রিত করতে পারেন:@import (less, reference) "foo.css"
স্কারলোট

28

আপনার সিএসএস ফাইলের ফাইল এক্সটেনশনে এতে পরিবর্তন করুন .less। এতে আপনাকে কোনও কম লেখার দরকার নেই; সমস্ত সিএসএস বৈধ কম (আপনার এমএসএসের স্টাফ ব্যতীত আপনাকে পালাতে হবে তবে এটি অন্য একটি সমস্যা))

ফ্র্যাক্টালফের উত্তর প্রতি v1.4.0 এ স্থির করা হয়েছে


4
প্রযুক্তিগতভাবে, এটি কোনও সিএসএস ফাইল আমদানি করে না।
নীলস্কেপ

@ নিলস্কেপ আপনি ঠিক আছেন; তবে আপনি যদি অন্য কোনও ফাইলে ক্লাস ব্যবহার করতে চান তবে আপনার সিএসএস নয়, একটি কম ফাইলের প্রয়োজন।
ম্যাথলেটিক্স

1
@ নিলস্কপি আপনি কি বলছেন যে ফাইলটি কম হিসাবে পার্স করার জন্য এক্সটেনশন পরিবর্তন করা খুব বেশি জিজ্ঞাসা করছে?
ম্যাথলেটিক্স

23
হ্যা, অবশ্যই। কিছু ছোট হোম প্রকল্পের বাইরে চিন্তা করার চেষ্টা করুন যেখানে আপনার সমস্ত ফাইল রয়েছে। আরও বৃহত্তর, বহু লোকের প্রকল্পগুলি চিন্তা করুন, যেখানে সকলেই কম ব্যবহার করছেন না। এমন অনেকগুলি ব্যবহারের মামলা রয়েছে যেখানে ফাইলের নাম পরিবর্তন করা অক্ষম।
নীলস্কে

1
আপনার সিএসএসে এমন কিছু রয়েছে কিনা আপনার যত্ন নেওয়া উচিত: ক্যালক (100% - 45px); এবং আপনি এটি ব্রাউজারে চান। যদি ফাইলটিকে কম হিসাবে প্রক্রিয়া করা হয় তবে চূড়ান্ত আউটপুটটি হবে: গণনা (55%); কারণ কম হিসাব করে
ক্রিস্টোফ আেন্ডারেল

8

থেকে কম ওয়েবসাইট :

আপনি যদি কোনও সিএসএস ফাইল আমদানি করতে চান এবং এটি কম প্রক্রিয়াকরণ করতে না চান তবে কেবল .এসএসএস এক্সটেনশনটি ব্যবহার করুন:

@ ইমপোর্ট "lib.css"; নির্দেশটি ঠিক যেমনটি রেখে যাবে এবং সিএসএস আউটপুটটিতে শেষ হবে।

যেমনটি জিটবিট নীচের মন্তব্যে উল্লেখ করেছে, এটি কেবলমাত্র উন্নয়নের লক্ষ্যে কার্যকর, কারণ আপনার অযথা @importব্যয়বহুল ব্যান্ডউইথ গ্রহণ করতে চাইবেন না ।


14
এটি ফাইলটি আমদানি করবে না, এটি @ গুরুত্বপূর্ণ নির্দেশনা অক্ষত রেখে দেবে। এটি এখনও কাজ করবে, তবে আপনার সিএসএস-আমদানি এড়ানো উচিত - এই বিকাশকারীগুলিকে
অ্যালেক্স

5
@ জিবিট তথ্যের জন্য ধন্যবাদ। ব্যক্তিগতভাবে, আমি @importবিকাশের সময় ব্যবহার করা আরও সহজ বলে মনে করি , তারপরে উত্পাদনে যাওয়ার সময় আমদানিকৃত ফাইলগুলি একক স্টাইলশীটে একত্রিত এবং মাইনাইফ করে।
ওয়েবদেবকিট

1
আপনি যদি প্রশ্নটি মনোযোগ সহকারে পড়েন (এবং কেবল শিরোনামের লাইনটিই নয়), আপনি দেখতে পাবেন যে ওপি সিএসএস ফাইলের একটি শ্রেণিকে একটি মিক্সিন হিসাবে উল্লেখ করতে চায়, এটি কেবল সহজ সিএসএস আমদানি হিসাবে পার্স করা সম্ভব না হলে এটি সম্ভব নয়।
ভয়

7

এটা চেষ্টা কর :

@import "lib.css";

অফিসিয়াল ডকুমেন্টেশন থেকে:

আপনি সিএসএস এবং কম ফাইল উভয়ই আমদানি করতে পারেন। কেবলমাত্র কম ফাইল আমদানির বিবরণী প্রক্রিয়া করা হয়, সিএসএস ফাইল আমদানির বিবরণী যেমন থাকে তেমন রাখা হয়। আপনি যদি কোনও সিএসএস ফাইল আমদানি করতে চান এবং এটি কম প্রক্রিয়াকরণ করতে না চান তবে কেবল .এসএসএস এক্সটেনশনটি ব্যবহার করুন:


সূত্র: http://lesscss.org/


2
আপনি যদি প্রশ্নটি মনোযোগ সহকারে পড়েন (এবং কেবল শিরোনামের লাইনটিই নয়), আপনি দেখতে পাবেন যে ওপি সিএসএস ফাইলের একটি শ্রেণিকে একটি মিশ্রিন হিসাবে উল্লেখ করতে চায়, যা কেবলমাত্র সহজ সিএসএস আমদানি হিসাবে পার্স করা সম্ভব না হলে এটি সম্ভব নয়।
ভয়

6

আপনি শুধুমাত্র একটি রেফারেন্স হিসেবে একটি CSS-ফাইলের আমদানি করতে চান (যেমন Mixins ক্লাস ব্যবহার করতে) কিন্তু না ফলাফলের আপনি ব্যবহার করতে পারেন পুরো সিএসএস ফাইলের অন্তর্ভুক্ত@import (less,reference) "reference.css"; :

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

* ফলাফল (my.css) এর সাথে lessc my.less out/my.css*

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

আমি ব্যাবহার করছি lessc 2.5.3


এটি আমার প্রয়োজন ছিল। যাইহোক, আমি সিনট্যাক্স প্রসারিত ব্যবহার করতে ছিল: &:extend(.reference-class all);। ক্লাসে সরাসরি উল্লেখ করার ফলে একটি সংকলন ত্রুটি হয়েছিল।
জেনস নিউবাউয়ার

4

আপনি যদি এমন কোনও সিএসএস ফাইল আমদানি করতে চান যা এই লাইনটি কম ব্যবহার করে ট্রেড করা উচিত:

.ie {
  @import (less) 'ie.css';
}

3

1.5.0 থেকে আপনি 'ইনলাইন' কীওয়ার্ডটি ব্যবহার করতে পারেন।

উদাহরণ: @ আইম্পোর্ট (ইনলাইন) "নন-কম-সামঞ্জস্যপূর্ণ। CSS";

আপনি এটি ব্যবহার করবেন যখন কোনও সিএসএস ফাইল কম সুসংগত নাও হতে পারে; এর কারণ যদিও লেস সর্বাধিক পরিচিত স্ট্যান্ডার্ড সিএসএসকে সমর্থন করে তবে এটি কিছু জায়গায় মন্তব্য সমর্থন করে না এবং সিএসএস পরিবর্তন না করে সমস্ত জানা সিএসএস হ্যাকগুলিকে সমর্থন করে না। সুতরাং আপনি এটি আউটপুটটিতে ফাইল অন্তর্ভুক্ত করতে ব্যবহার করতে পারেন যাতে সমস্ত সিএসএস একটি ফাইলে থাকবে।

(উত্স: http://lesscss.org/features/#import-directives-feature )

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.