আমি সিএসএস খুব ভাল জানি, তবে সাস সম্পর্কে বিভ্রান্ত। এসএসএসএস কীভাবে সিএসএসের থেকে আলাদা এবং আমি যদি সিএসএসের পরিবর্তে এসসিএসএস ব্যবহার করি তবে এটি কি একই রকম কাজ করবে?
উত্তর:
ইদ্রিসের উত্তর ছাড়াও :
সিএসএসে আমরা পূর্ণ দৈর্ঘ্যে চিত্রিত বেলো হিসাবে কোড লিখি।
body{
width: 800px;
color: #ffffff;
}
body content{
width:750px;
background:#ffffff;
}
SCSS আমরা এই কোড একটি ব্যবহার খাটো করতে পারেন @mixin, যাতে আমরা লিখতে হবে না colorএবং widthবৈশিষ্ট্যাবলী আবার এবং আবার। আমরা পিএইচপি বা অন্যান্য ভাষার মতো একইভাবে কোনও ফাংশনের মাধ্যমে এটি সংজ্ঞায়িত করতে পারি।
$color: #ffffff;
$width: 800px;
@mixin body{
width: $width;
color: $color;
content{
width: $width;
background:$color;
}
}
এসএএসএসে তবে পুরো কাঠামোটি এসএসএসএসের চেয়ে চাক্ষুষভাবে দ্রুত এবং ক্লিনার er
দেখে মনে হচ্ছে এটি বর্তমানে ইনলাইন সিএসএস সমর্থন করে না।
$color: #ffffff
$width: 800px
$stack: Helvetica, sans-serif
body
width: $width
color: $color
font: 100% $stack
content
width: $width
background:$color
সিএসএস হ'ল স্টাইলিং ভাষা যা কোনও ব্রাউজার স্টাইল ওয়েবপৃষ্ঠাগুলিতে বোঝে।
এসসিএসএস হ'ল একটি বিশেষ ধরণের ফাইল SASSযা রুবিতে লিখিত একটি প্রোগ্রাম যা CSSব্রাউজারের জন্য স্টাইল শীটগুলি একত্রিত করে এবং তথ্যের জন্য, ভেরিয়েবল, বাসা বাঁধে এবং আরও SASSঅনেক কিছু আরও কার্যকর কার্যকারিতা যুক্ত করে CSSযা লেখাকে CSSসহজ এবং দ্রুততর করে তোলে।
এসসিএসএস ফাইলগুলিCSS আপনার ব্রাউজারটি বুঝতে পারে এমন একটি traditionalতিহ্যবাহী আউটপুট দিতে একটি ওয়েব অ্যাপ্লিকেশন চালিয়ে সার্ভার দ্বারা প্রক্রিয়া করা হয় ।
এবং এটি কম
@primarycolor: #ffffff;
@width: 800px;
body{
width: @width;
color: @primarycolor;
.content{
width: @width;
background:@primarycolor;
}
}
পরিবর্তনীয় সংজ্ঞা সঠিক:
$ => SCSS, SASS
-- => CSS
@ => LESS
সমস্ত উত্তর ভাল তবে উত্তরগুলির চেয়ে কিছুটা আলাদা প্রশ্ন
"। Sass সম্পর্কে সিএসএস থেকে SCSS বিভিন্ন কেমন" : SCSS ভাল গঠিত সিএসএস 3 সিনট্যাক্স। এটি তৈরি করতে সাস প্রিপ্রসেসর ব্যবহার করে।
এবং আমি যদি সিএসএসের পরিবর্তে এসসিএসএস ব্যবহার করি তবে এটি কি একই রকম কাজ করবে? হ্যাঁ. যদি আপনার আদর্শ সাস প্রিপ্রসেসর সমর্থন করে। তুলনায় এটি একই কাজ করবে।
সাসের দুটি সিনট্যাক্স রয়েছে। সর্বাধিক ব্যবহৃত সিনট্যাক্সটি "এসসিএসএস" হিসাবে পরিচিত ("স্যাসি সিএসএস" এর জন্য), এবং CSS3 এর সিনট্যাক্সের একটি সুপারসেট supers এর অর্থ হ'ল প্রতিটি বৈধ CSS3 স্টাইলশিট বৈধ এসএসএসএসও। এসসিএসএস ফাইলগুলি এক্সটেনশন .scss ব্যবহার করে।
দ্বিতীয়টি, পুরানো বাক্য গঠনটি ইনডেন্টড সিনট্যাক্স (বা কেবল ".সাসস") হিসাবে পরিচিত। হামলের তীক্ষ্ণতা দ্বারা অনুপ্রাণিত, এটি সিএসএসের সাথে মিলের চেয়ে সংক্ষিপ্ততা পছন্দ করে এমন লোকদের উদ্দেশ্যে। বন্ধনী এবং সেমিকোলনের পরিবর্তে, এটি ব্লকগুলি নির্দিষ্ট করতে লাইনগুলির ইন্ডেন্টেশন ব্যবহার করে। ইন্টেন্টেড সিনট্যাক্সের ফাইলগুলি এক্সটেনশন .sass ব্যবহার করে।
সিএসএস প্রিপ্রসেসর কী?
সিএসএস নিজেই জটিল যুক্তি এবং কার্যকারিতা থেকে বঞ্চিত যা পুনরায় ব্যবহারযোগ্য এবং সংগঠিত কোড লেখার জন্য প্রয়োজন। ফলস্বরূপ, একজন বিকাশকারী সীমাবদ্ধতার দ্বারা আবদ্ধ এবং কোড রক্ষণাবেক্ষণ এবং স্কেলিবিলিটিতে চূড়ান্ত অসুবিধার মুখোমুখি হন, বিশেষত যখন বিস্তৃত কোড এবং একাধিক সিএসএস স্টাইলশিট যুক্ত বড় প্রকল্পগুলিতে কাজ করে। এখানেই সিএসএস প্রিপ্রসেসরগুলি উদ্ধার করতে আসে।
সিএসএস প্রিপ্রসেসর এমন একটি সরঞ্জাম যা ডিফল্ট ভ্যানিলা সিএসএসের নিজস্ব স্ক্রিপ্টিং ভাষার মাধ্যমে বুনিয়াদ করতে ব্যবহৃত হয়। এটি আমাদের জটিল লজিক্যাল বাক্য গঠন যেমন যেমন ভেরিয়েবল, ফাংশন, মিক্সিংস, কোড নেস্টিং এবং উত্তরাধিকার হিসাবে কয়েকটি ভ্যানিলা সিএসএস সুপারচার্জ করে কিছু ব্যবহার করতে সহায়তা করে। সিএসএস প্রিপ্রসেসরগুলি ব্যবহার করে, আপনি নির্বিঘ্নে মেনিয়াল কাজগুলি স্বয়ংক্রিয় করতে পারেন, পুনরায় ব্যবহারযোগ্য কোড স্নিপেটগুলি তৈরি করতে পারেন, কোড পুনরাবৃত্তি এবং ব্লিটিং এড়াতে পারবেন এবং নেস্টেড কোড ব্লকগুলি লিখতে পারেন যা সুসংহত এবং সহজেই পড়তে সহজ easy তবে, ব্রাউজারগুলি কেবল দেশীয় ভ্যানিলা সিএসএস কোড বুঝতে পারে এবং সিএসএস প্রিপ্রসেসর সিনট্যাক্স ব্যাখ্যা করতে অক্ষম হবে। অতএব, জটিল এবং উন্নত প্রিপ্রসেসর সিন্ট্যাক্সকে প্রথমে স্থানীয় সিএসএস সিনট্যাক্সে সংকলন করা দরকার যা ক্রস ব্রাউজারের সামঞ্জস্যতা সমস্যাগুলি এড়াতে ব্রাউজারগুলির দ্বারা ব্যাখ্যা করা যায়।
নিবন্ধে এগিয়ে যাওয়ার জন্য, আমরা বর্তমানে বিশ্বের সর্বাধিক জনপ্রিয় সিএসএস প্রিপ্রোসেসরগুলি যা সারা বিশ্বের বিকাশকারীরা যেমন সাস, এলইএসইএস এবং স্টাইলাস দ্বারা ব্যবহৃত হচ্ছে তা একবার দেখে নিই। সাস বনাম এলইএসসি বনাম স্টাইলাসের মধ্যে বিজয়ী সিদ্ধান্ত নেওয়ার আগে, প্রথমে তাদের বিস্তারিতভাবে জেনে নেওয়া যাক।
Sass - সিনট্যাকটিক্যালি অসাধারণ স্টাইল শীট
সাস হ'ল "সিন্ট্যাকটিক্যালি অসাধারণ স্টাইল শীট" এর সংক্ষিপ্ত রূপ। স্যাস কেবলমাত্র বিশ্বের সর্বাধিক জনপ্রিয় সিএসএস প্রিপ্রেসেসর নয়, এটি হ্যাম্পটন ক্যাটলিন দ্বারা 2006 সালে চালু করা এবং পরে নাটালি ওয়েইজেনবাউম দ্বারা বিকাশ করা প্রাচীনতমদের মধ্যে অন্যতম। যদিও সাস রুবি ভাষায় রচিত, একটি প্রাকম্পাইলার লিবাসাস সাসকে অন্য ভাষায় পার্স করতে এবং এটি রুবি থেকে ডিকুয়াল করার অনুমতি দেয়। সাসের প্রচুর সক্রিয় সম্প্রদায় এবং প্রাথমিক শিক্ষার জন্য নেটে নতুন শিক্ষার সংস্থান রয়েছে ners এর পরিপক্কতা, স্থিতিশীলতা এবং শক্তিশালী যৌক্তিক দক্ষতার জন্য ধন্যবাদ, সাস তার প্রতিদ্বন্দ্বী সহকর্মীদের চেয়ে সিএসএস প্রিপ্রসেসরের সামনে নিজেকে প্রতিষ্ঠিত করেছেন।
সাসকে এসসিএসএস ব্যবহার করে 2 টি সিন্টেক্সে স্যাস লেখা যেতে পারে। এই দুটির মধ্যে পার্থক্য কী? খুঁজে বের কর.
সিনট্যাক্স ঘোষণা: সাস বনাম এসসিএসএস
সংকলিত সিএসএস কোড সহ সাস বনাম এসসিএসএস সিনট্যাক্স সহ নীচের উদাহরণটি বিবেচনা করুন।
Sass SYNTAX
$font-color: #fff
$bg-color: #00f
#box
color: $font-color
background: $bg-color
SCSS SYNTAX
$font-color: #fff;
$bg-color: #00f;
#box{
color: $font-color;
background: $bg-color;
}
উভয় ক্ষেত্রেই এটি সাস বা এসসিএসএস হোক, সংকলিত সিএসএস কোড একই হবে -
#box {
color: #fff;
background: #00f;
সাস এর ব্যবহার
তাত্ক্ষণিকভাবে সর্বাধিক জনপ্রিয় ফ্রন্ট এন্ড ফ্রেমওয়ার্ক বুটস্ট্র্যাপ লিখিত হয়েছে। সংস্করণ 3 অবধি বুটস্ট্র্যাপটি কম লেখা হয়েছিল তবে বুটস্ট্র্যাপ 4 সাসকে গৃহীত করেছিল এবং এর জনপ্রিয়তা বাড়িয়ে তোলে। সাস ব্যবহার করে বেশ কয়েকটি বড় সংস্থার নাম হ'ল - জাপিয়ার, উবার, এয়ারবিএনবি এবং কিকস্টার্টার।
কম - লেনার স্টাইল শীট
LESS হ'ল "লেনার স্টাইলশিট" এর সংক্ষিপ্ত রূপ। ২০০৯ সালে স্যাসের প্রাথমিক প্রবর্তনের ৩ বছর পরে এটি ২০০৯ সালে অ্যালেক্সিস সেলির প্রকাশ করেছিলেন। সাস রুবিতে লেখা হলেও, কম লেখায় জাভাস্ক্রিপ্ট লেখা হয়েছে। আসলে, LESS একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা মিক্সিন, ভেরিয়েবল, নেস্টিং এবং নিয়ম সেট লুপের সাহায্যে নেটিভ ভ্যানিলা সিএসএসের কার্যকারিতা বাড়িয়ে তোলে। সাস বনাম এলইএসইএস একটি উত্তপ্ত বিতর্ক হয়েছে। এতে অবাক হওয়ার কিছু নেই যে এলএসইএস সাসের সবচেয়ে শক্তিশালী প্রতিযোগী এবং দ্বিতীয় বৃহত্তম ব্যবহারকারী বেস রয়েছে। যাইহোক, বুটস্ট্র্যাপ 4 টি প্রবর্তনের সাথে সাথে সাসের পক্ষে কম ডাম্প ফেলে দিলে, জনপ্রিয়তা কমে যায়। সাসের চেয়ে কম ব্যবহারের কয়েকটি অসুবিধার মধ্যে একটি হ'ল এটি ফাংশন সমর্থন করে না। সাসের বিপরীতে, কম ব্যবহার করে ভেরিয়েবলগুলি ঘোষণা করতে @ @ ব্যবহার করে যা @ মিডিয়া এবং @ কিফ্রেমগুলির সাথে বিভ্রান্তি সৃষ্টি করতে পারে। যাহোক, সাস এবং স্টাইলাস বা অন্য কোনও প্রিপ্রোসেসরগুলির চেয়ে কমের একটি মূল সুবিধা হ'ল এটি আপনার প্রকল্পে যুক্ত করা সহজ। আপনি হয় এনপিএম ব্যবহার করে বা লেটার.জেএস ফাইল যুক্ত করে এটি করতে পারেন। সিনট্যাক্স ঘোষণা: কম ব্যবহার করে .বিহীন এক্সটেনশন ব্যবহার করে। LESS এর সিনট্যাক্সটি এসসিএসএসের সাথে ব্যতিক্রমযুক্ত যে ব্যতিক্রমগুলি ঘোষণার জন্য, vari চিহ্নের পরিবর্তে, LESS @ ব্যবহার করে ESS
@font-color: #fff;
@bg-color: #00f
#box{
color: @font-color;
background: @bg-color;
}
COMPILED CSS
#box {
color: #fff;
background: #00f;
}
কম ব্যবহারের সংস্করণ 4 চালু হওয়ার আগ পর্যন্ত জনপ্রিয় বুটস্ট্র্যাপ ফ্রেমওয়ার্কটি কম লেখা হয়েছিল। যাইহোক, SEMANTIC UI নামে আর একটি জনপ্রিয় কাঠামো এখনও কম লেখা আছে। সাস ব্যবহারকারী বড় সংস্থাগুলির মধ্যে হ'ল - ইন্ডিগোগো, প্যাট্রিয়ন এবং ওয়েচ্যাট
লেখনী
স্টাইলাসটি ২০১০ সালে প্রাক্তন নোড জেএস বিকাশকারী টি জে হোলোওয়াইচুক সাসের মুক্তির প্রায় ৪ বছর পরে এবং এলইএসএস প্রকাশের এক বছর পরে প্রবর্তন করেছিলেন। স্টাইলাসটি নোড জেএস লেখা এবং জেএস স্ট্যাকের সাথে পুরোপুরি ফিট করে। স্টাইলাসটি সাসের যৌক্তিক দক্ষতা এবং খুব কমের সরলতার দ্বারা প্রভাবিত হয়েছিল। যদিও স্টাইলাস নোড জেএস বিকাশকারীদের কাছে এখনও জনপ্রিয়, এটি নিজের জন্য একটি বড় আকারের ভাগ তৈরি করতে পারেনি। স্টাইলাস ওভার স্যাস বা এলএসইএসের একটি সুবিধা হ'ল এটি অত্যন্ত শক্তিশালী অন্তর্নির্মিত ফাংশনগুলিতে সজ্জিত এবং ভারী কম্পিউটিং পরিচালনা করতে সক্ষম।
সিনট্যাক্স ঘোষণা: স্টাইলাস ইউটিস্টাইল এক্সটেনশন। স্টাইলাস সিনট্যাক্স লেখার ক্ষেত্রে প্রচুর নমনীয়তা সরবরাহ করে, নেটিভ সিএসএস সমর্থন করে পাশাপাশি বন্ধনী কোলন এবং সেমিকোলন বাদ দিতে দেয়। এছাড়াও, নোট করুন যে স্টাইলাস ভেরিয়েবলগুলি সংজ্ঞায়িত করার জন্য @ বা $ চিহ্ন ব্যবহার করে না। পরিবর্তে, স্টাইলাস একটি চলক ঘোষণার ইঙ্গিত করতে অ্যাসাইনমেন্ট অপারেটরগুলি ব্যবহার করে।
স্টাইলাস সিনট্যাক্স লিখেছেন নেটিভ সিএসএস
font-color = #fff;
bg-color = #00f;
#box {
color: font-color;
background: bg-color;
}
অথবা
সিউরি ব্র্যাকস ছাড়াই স্টাইলাস সিনট্যাক্স
font-color = #fff;
bg-color = #00f;
#box
color: font-color;
background: bg-color;
অথবা
কলোন এবং অর্ধেকগুলি ব্যতীত স্টাইলাস সিনট্যাক্স
font-color = #fff
bg-color = #00f
#box
color font-color
background bg-color