এসসিএসএস এবং সাসের মধ্যে পার্থক্য কী?

Question

আমি যা পড়ছি তা থেকে, সাস হ'ল এমন একটি ভাষা যা সিএসএসকে ভেরিয়েবল এবং গণিত সমর্থন দিয়ে আরও শক্তিশালী করে তোলে।

এসসিএসএসের সাথে পার্থক্য কী? এটি কি একই ভাষা হওয়ার কথা? অনুরূপ? ভিন্ন?

Answer 1

সাস সিন্ট্যাক্স অগ্রগতি সহ একটি সিএসএস প্রি-প্রসেসর। উন্নত বাক্য গঠনের স্টাইল শিটগুলি প্রোগ্রাম দ্বারা প্রক্রিয়া করা হয় এবং নিয়মিত সিএসএস স্টাইল শীটে রূপান্তরিত হয়। যাইহোক, তারা সিএসএস মান নিজেই প্রসারিত করে না ।

সিএসএস ভেরিয়েবলগুলি সমর্থিত এবং প্রি-প্রসেসরের ভেরিয়েবলগুলি পাশাপাশি ব্যবহার করা যায়।

এসসিএসএস এবং সাসের মধ্যে পার্থক্যের জন্য, সাস ডকুমেন্টেশন পৃষ্ঠায় এই পাঠ্যের প্রশ্নের উত্তর দেওয়া উচিত:

সাসের জন্য দুটি সিনট্যাক্স উপলব্ধ। প্রথম, এসসিএসএস (স্যাসি সিএসএস) নামে পরিচিত এবং এই রেফারেন্স জুড়ে ব্যবহৃত, এটি সিএসএসের বাক্য গঠনটির একটি বর্ধিতাংশ। এর অর্থ হ'ল প্রতিটি বৈধ সিএসএস স্টাইলশিট একই অর্থ সহ একটি বৈধ এসএসএসএস ফাইল। এই সিনট্যাক্সটি নীচে বর্ণিত সাস বৈশিষ্ট্যগুলির সাথে বাড়ানো হয়েছে। এই সিনট্যাক্সটি ব্যবহার করে ফাইলগুলিতে .scss এক্সটেনশন রয়েছে।

দ্বিতীয় এবং পুরানো সিনট্যাক্স , যা ইনডেন্টড সিনট্যাক্স হিসাবে পরিচিত (বা কখনও কখনও কেবল "সাস"), সিএসএস লেখার আরও সংক্ষিপ্ত পথ সরবরাহ করে। এটি নির্বাচকদের বাসা বাঁধার জন্য ব্র্যাকেটগুলির পরিবর্তে ইন্ডেন্টেশন এবং সেমিকোলনগুলির পরিবর্তে পৃথক বৈশিষ্ট্যের পরিবর্তে নিউলাইনগুলি ব্যবহার করে। এই সিনট্যাক্স ব্যবহার করে ফাইলগুলিতে .াসাস এক্সটেনশন রয়েছে।

তবে, এই সবগুলি কেবল সাস প্রি-সংকলক দিয়ে কাজ করে যা শেষ পর্যন্ত সিএসএস তৈরি করে। এটি নিজে সিএসএস স্ট্যান্ডার্ডের কোনও এক্সটেনশন নয়।

Comments

বাক্যবিন্যাসটি নির্বাচন করার সময়, মনে রাখবেন যে কেবল এসএসএসই স্ট্যাকওভারফ্লো এবং ব্রাউজারগুলির বিকাশ সরঞ্জামগুলি থেকে সিএসএস অনুলিপি এবং আটকানোর অনুমতি দেয়, তবে সাসে আপনাকে সর্বদা সিনট্যাক্স সামঞ্জস্য করতে হয়

— ফিশবোন

সিএসএস 3 এর ভেরিয়েবল রয়েছে: ডেভেলপার.মোজিলা.আর.ইন

— ইউএস

আরেকটি গোছা: 2019-05-10 হিসাবে, SASS এখনও মাল্টি-লাইন এক্সপ্রেশন সমর্থন করে না, তাই বড় তালিকা / মানচিত্রগুলি হয় এক-লাইনার, প্রচুর ফাংশন কল ব্যবহার করে সংজ্ঞায়িত করা বা এসসিএসএস ফাইলগুলিতে সংজ্ঞায়িত হতে হয়। এটি এখনও একটি পরিকল্পিত বৈশিষ্ট্য বলে মনে হচ্ছে তবে বাস্তবে বাস্তবায়নের বিষয়ে কোনও আন্দোলন আছে কিনা তা এখনও নিশ্চিত নই।

— জোসেফ সিকোরস্কি

@ মধ্যে 0x1ad2 পছন্দ scssএবং sassমাত্র ব্যক্তিগত পছন্দ বেশী এই দিন। scssআরো অনেক কিছু প্রচলিত - মত সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক ব্যবহার করা Bootstrap, Foundation, Materializeইত্যাদি প্রধান UI 'তে অবকাঠামো পক্ষপাতী scssউপর sassকৌণিক, প্রতিক্রিয়া দেখায়, Vue - ডিফল্ট দ্বারা। কোন টিউটোরিয়াল বা গণদেবতা সাধারণত ব্যবহার করা হবে scssযেমন create-react-app facebook.github.io/create-react-app/docs/...

— Drenai

@ ফিশবোন পুরোপুরি সত্য নয়, আপনি যদি কোনও শালীন কোড এডিটর ব্যবহার করেন তবে এটি ব্রাউজারগুলি থেকে অনুলিপি করা শৈলীগুলি পরিচালনা করতে পারে এবং নিজেই

— ইনডেন্টে পুনরায় লিখতে

Answer 2

আমি বিকাশকারীদের একজন যারা সাস তৈরি করতে সহায়তা করেছিল।

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

আপনার পছন্দ মতো সিনট্যাক্সটি ব্যবহার করুন, উভয়ই সম্পূর্ণরূপে সমর্থিত এবং আপনি যদি নিজের মতামত পরিবর্তন করেন তবে পরে তাদের মধ্যে পরিবর্তন করতে পারেন।

Comments

মাফ করবেন? আমি কি ঠিক পড়েছি? সাস আসলে কি কম ফাইলগুলি সঠিকভাবে আমদানি করতে পারে? মিক্সিন / ভেরিয়েবলের মধ্যে কোনও মিল রয়েছে?

— পিলাউ

স্ট্যান্ডার্ড সিএসএসের সাথে সাদৃশ্যটি গ্রুপের পরিবেশে আরও গুরুত্বপূর্ণ হতে পারে যেখানে এমন লোক রয়েছে যাদের আপনার কোডটি পড়তে হবে, তবে কেবল মাঝে মাঝে, এবং পুরো নতুন সিনট্যাক্স শেখার জন্য তাদের কাছে সময় / আগ্রহ নেই।

— সি রোলে

"ইউআই" এর অর্থ কি "ভাষা"?

— djechlin

@ ডিজেচলিন - হ্যাঁ, এখানে আমার "ইউআই" এর ব্যাখ্যাটি ফাইলটির প্রোগ্রামার-মুখী সিনট্যাক্স হবে। যেমন সেমিকোলন বা না, ইত্যাদি

— ওরিয়ান এলিজিল

@ অরিওনিলেজিলের পরামর্শ অনুসারে উত্তরে "ইউআই" আরও সাধারণভাবে বোঝার শব্দ দিয়ে প্রতিস্থাপন করা উচিত?

— মাইকেল ফ্রেইজিম

Answer 3

সাস .sassফাইলটি .scssফাইলের থেকে দৃশ্যত পৃথক , যেমন

উদাহরণ.সাসস - স্যাস হ'ল পুরানো বাক্য গঠন

$color: red

=my-border($color)
  border: 1px solid $color

body
  background: $color
  +my-border(green)

উদাহরণ.এসএসএস - স্যাসি সিএসএস হ'ল সাস 3 এর মতো নতুন সিনট্যাক্স

$color: red;

@mixin my-border($color) {
  border: 1px solid $color;
}

body {
  background: $color;
  @include my-border(green);
}

কোন যথাযথ CSS সমর্থন করে ডকুমেন্ট কেবল থেকে এক্সটেনশন পরিবর্তন করে Sassy সিএসএস (SCSS) এর পরিবর্তিত করা যায় .cssকরতে .scss।

Comments

@ নভোচেন +1, আমি সম্মত সি ++ প্রোগ্রামার হিসাবে আমি বন্ধনী এবং অর্ধিকোলন পছন্দ করি। BTW, আমার একটা প্রশ্ন আছে, থেকে রূপান্তর করে .scssকরতে .cssহিসাবে একই .cssথেকে .scss?

— JW.ZG

এই আমি উপরের উত্তরগুলির সাথে তুলনা করার বিষয়ে বেশি যত্নশীল ... পড়তে খুব অলসতা ;-)

— LYu

@ জেডাব্লু.জেডজি, এটি কোনও রূপান্তর নয়, নেটিভটি .cssবৈধ হতে পারে .scss। আপনি এসএসএস নির্দিষ্ট কোড যুক্ত করার সাথে সাথেই ফাইলের নাম ফিরে পরিবর্তন করা অবৈধ সিএসএস ফাইল হিসাবে শেষ হবে। cssএকটি বর্গক্ষেত্র, এবং scssএকটি আয়তক্ষেত্র হয়। সমস্ত স্কোয়ার আয়তক্ষেত্রাকার তবে সমস্ত আয়তক্ষেত্রগুলি বর্গক্ষেত্র নয়।

— অনুদান

Answer 4

সাস ( সিনট্যাকটিক্যালি অসাধারণ স্টাইলশিট ) এর দুটি সিনট্যাক্স রয়েছে:

• নতুন: এসসিএসএস ( স্যাসি সিএসএস )
• এবং একটি পুরানো, মূল: ইনডেন্ট সিনট্যাক্স, যা আসল সাস এবং এটিকে স্যাসও বলা হয় ।

সুতরাং তারা দুটি ভিন্ন সম্ভাব্য বাক্য গঠন সহ সাস প্রিপ্রোসেসরের অংশ।

এসসিএসএস এবং মূল সাসের মধ্যে সর্বাধিক গুরুত্বপূর্ণ পার্থক্য :

এসসিএসএস :

• সিনট্যাক্স CSS এর অনুরূপ (এত বেশি যে প্রতিটি নিয়মিত বৈধ CSS3 বৈধ এসএসএসএসও হয় , তবে অন্য দিকের সম্পর্ক স্পষ্টতই ঘটে না)

• ধনুর্বন্ধনী ব্যবহার করে {}

• আধা-কলোন ব্যবহার করে ;
• অ্যাসাইনমেন্ট সাইন :
• একটি মিশ্রণ তৈরি করতে এটি @mixinনির্দেশ ব্যবহার করে
• মিক্সিন ব্যবহার করতে এটি @includeনির্দেশের আগে এটির আগে
• ফাইলগুলিতে .scss এক্সটেনশন রয়েছে।

আসল সাস :

• সিনট্যাক্স রুবির অনুরূপ
• কোন ধনুর্বন্ধনী
• কোনও কঠোর ইন্ডেন্টেশন নেই
• কোনও আধা-কলোন নেই
• =পরিবর্তে অ্যাসাইনমেন্ট সাইন:
• একটি মিশ্রণ তৈরি করতে এটি =সাইন ব্যবহার করে
• মিক্সিন ব্যবহার করতে এটি এর আগে +সাইন দিয়ে থাকে
• ফাইলগুলির .sass এক্সটেনশন রয়েছে।

কেউ কেউ সাসকে পছন্দ করেন , মূল বাক্য গঠন - অন্যরা এসসিএসএসকে পছন্দ করেন । যে কোনও উপায়ে, তবে এটি লক্ষণীয় যে সাসের ইনডেন্টড সিনট্যাক্সটি কখনও হয়নি এবং কখনও হ্রাস পাবে না ।

সাস- রূপান্তর সহ রূপান্তরসমূহ :

# Convert Sass to SCSS
$ sass-convert style.sass style.scss

# Convert SCSS to Sass
$ sass-convert style.scss style.sass

সাস এবং এসসিএসএস ডকুমেন্টেশন

Comments

আশ্চর্যের বিষয় যে এ জাতীয় স্পষ্ট এবং সংক্ষিপ্ত উত্তরের মত অন্যদের চেয়ে কম ভোট রয়েছে। সাস এবং স্ক্যাসের মধ্যে পার্থক্যগুলি কী তা বুঝতে আমি উত্সের স্তূপের মধ্য দিয়ে যাচ্ছি এবং অবশেষে এটি খুঁজে পেয়েছি যা তাত্ক্ষণিকভাবে আমাকে আলোকিত করে। কয়েকটি বানান / ব্যাকরণ ত্রুটি বাদে ভাল কাজ।

— tnkh

@ টনিএনজি আপনাকে ধন্যবাদ আমি আপনাকে সাহায্য করতে পারে খুশি। বিষয়গুলি সম্পর্কে, এটি এতটাই নিশ্চিত যে আমি খুব দেরিতে উত্তর দিয়েছি - প্রশ্ন জিজ্ঞাসার প্রায় 6 বছর পরে। আমাকে সংশোধন করতে দ্বিধা বোধ করুন, যেখানে আমি বানান বা ব্যাকরণগত ত্রুটি করেছি।

— সিংহমাইলিকো

বিভিন্ন বাক্য গঠন দেখানোর জন্য একটি সাধারণ উদাহরণ যুক্ত করুন এবং এই উত্তরটি নিখুঁত হবে।

— হোগান

পরিষ্কার উত্তর, চিত্তাকর্ষক

— হিদিত রহমান

দুর্দান্ত উত্তর এই!

— মোহাম্মদ আফরাশতেহ

Answer 5

এর বাক্য গঠনটি ভিন্ন, এবং এটিই প্রধান সমর্থক (বা আপনার দৃষ্টিভঙ্গির উপর নির্ভর করে কন)।

আমি অন্যরা যা বলেছিল তার অনেকগুলি পুনরাবৃত্তি না করার চেষ্টা করব, আপনি সহজেই এটি গুগল করতে পারেন তবে পরিবর্তে, আমি উভয় ব্যবহার করে আমার অভিজ্ঞতা থেকে বেশ কয়েকটি জিনিস বলতে চাই, এমনকি কখনও কখনও একই প্রকল্পেও।

SASS প্রো

• ক্লিনার - আপনি যদি পাইথন, রুবি থেকে আগত হন (আপনি এমনকি প্রতীকের মতো সিনট্যাক্স সহ প্রপস লিখতে পারেন) বা কফিস্ক্রিপ্ট বিশ্বও আপনার কাছে খুব স্বাভাবিক হবে - মিক্সিনস, ফাংশন এবং সাধারণত যে কোনও পুনরায় ব্যবহারযোগ্য জিনিসগুলি রচনা .sassকরা অনেক সহজ ' 'এবং .scss( পাঠযোগ্য ) এর চেয়ে পঠনযোগ্য ।

SASS কনস

• হোয়াইটস্পেস সেনসিটিভ (সাবজেক্টিভ), অন্য ভাষায় আমি এতে কিছু মনে করি না তবে এখানে সিএসএসে এটি আমাকে বিরক্ত করে (সমস্যাগুলি: অনুলিপি করা, ট্যাব বনাম মহাকাশ যুদ্ধ ইত্যাদি) etc
• কোনও ইনলাইন বিধি নেই (এটি আমার জন্য খেলা বিরতি ছিল), আপনি body color: redএসএসএস-এর মতো করতে পারবেন নাbody {color: red}
• অন্যান্য বিক্রেতার স্টাফ আমদানি করা, ভ্যানিলা সিএসএস স্নিপেটগুলি অনুলিপি করা - অসম্ভব নয় তবে কিছু সময়ের পরে খুব বিরক্তিকর। সমাধানটি হ'ল হয় আপনার প্রকল্পে .scssফাইল রয়েছে ( .sassফাইলগুলির সাথে) বা সেগুলিতে রূপান্তর করা .sass।

এগুলি বাদে - তারা একই কাজ করে।

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

ইদানীং, আমি স্টাইলাসকে একটি সুযোগ দেওয়ার বিষয়টি বিবেচনা করছি (পুরো সময়ের সিএসএস প্রিপ্রোসেসরের জন্য) কারণ এটি আপনাকে একটি ফাইলে দুটি সিনট্যাক্স যুক্ত করতে দেয় (কিছু অন্যান্য বৈশিষ্ট্যগুলির মধ্যে)। এটি কোনও দলের পক্ষে নেওয়া ভাল দিকনির্দেশ নাও হতে পারে তবে আপনি যখন এটি একা বজায় রাখছেন - ঠিক আছে। সিনট্যাক্স প্রশ্নে থাকলে স্টাইলাসটি আসলে সবচেয়ে নমনীয়।

.scssবনাম .sassসিনট্যাক্স তুলনার জন্য ফাইনাল মিক্সিন :

// SCSS
@mixin cover {
  $color: red;
  @for $i from 1 through 5 {
    &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
  }
}
.wrapper { @include cover }


// SASS
=cover
  $color: red
  @for $i from 1 through 5
    &.bg-cover#{$i}
      background-color: adjust-hue($color, 15deg * $i)
.wrapper
  +cover

Comments

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

— কোবলার

Answer 6

ভাষার হোমপেজ থেকে

সাসের দুটি সিনট্যাক্স রয়েছে। নতুন মূল সিনট্যাক্স (সাস 3 হিসাবে) "এসসিএসএস" ("স্যাসি সিএসএস" এর জন্য) নামে পরিচিত , এবং এটি CSS3 এর সিনট্যাক্সের একটি সুপারসেট। এর অর্থ হ'ল প্রতিটি বৈধ CSS3 স্টাইলশিট বৈধ এসএসএসএসও। এসসিএসএস ফাইলগুলি এক্সটেনশন .scss ব্যবহার করে।

দ্বিতীয়টি, পুরানো বাক্য গঠনটি ইনডেন্টড সিনট্যাক্স (বা কেবল "স্যাস") হিসাবে পরিচিত। হামলের তীক্ষ্ণতা দ্বারা অনুপ্রাণিত, এটি সিএসএসের সাথে মিলের চেয়ে সংক্ষিপ্ততা পছন্দ করে এমন লোকদের উদ্দেশ্যে। বন্ধনী এবং সেমিকোলনের পরিবর্তে, এটি ব্লকগুলি নির্দিষ্ট করতে লাইনগুলির ইন্ডেন্টেশন ব্যবহার করে। যদিও এখন আর প্রাথমিক সিনট্যাক্স নেই, ইন্টেন্টেড সিনট্যাক্স সমর্থন করা অবিরত থাকবে। ইন্টেন্টেড সিনট্যাক্সের ফাইলগুলি এক্সটেনশন .sass ব্যবহার করে।

এসএএসএস একটি ব্যাখ্যাযুক্ত ভাষা যা সিএসএসকে আলাদা করে দেয়। সাসের গঠনটি সিএসএসের মতো দেখতে (দূরবর্তীভাবে), তবে আমার কাছে মনে হচ্ছে বর্ণনাটি কিছুটা বিভ্রান্তিকর; এটা না CSS এর জন্য একটি প্রতিস্থাপন, অথবা একটি এক্সটেনশন। এটি এমন একটি দোভাষী যা শেষ পর্যন্ত সিএসএসকে আলাদা করে দেয়, সুতরাং সাসের এখনও সাধারণ সিএসএসের সীমাবদ্ধতা রয়েছে তবে এটি তাদের সহজ কোড সহ মুখোশ করে।

Answer 7

মূল পার্থক্যটি সিনট্যাক্স। এসএএসএস-এর সাদা স্থান এবং কোনও সেমিকোলন নেই এমন একটি শিথিল বাক্য গঠন রয়েছে, এসসিএসএস-এর CSS এর সাথে সাদৃশ্য রয়েছে।

Answer 8

SASS এর অর্থ সিন্ট্যাকটিক্যালি অসাধারণ স্টাইলশিট। এটি সিএসএসের একটি এক্সটেনশন যা মূল ভাষায় শক্তি এবং কমনীয়তা যুক্ত করে। এসএএসএস-কে নতুন কিছু নাম দিয়ে এসসিএসএস হিসাবে নতুন নাম দেওয়া হয়েছে তবে পুরানো এসএএসএসও সেখানে রয়েছে। আপনি এসসিএসএস বা এসএএসএস ব্যবহার করার আগে নীচের পার্থক্যটি দেখুন।

কিছু এসসিএসএস এবং এসএএসএস সিনট্যাক্সের উদাহরণ:

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

//Mixins
@mixin transform($property) {
  -webkit-transform: $property;
      -ms-transform: $property;
          transform: $property;
}

.box { @include transform(rotate(30deg)); }

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

//Mixins
=transform($property)
  -webkit-transform: $property
  -ms-transform:     $property
  transform:         $property

.box
  +transform(rotate(30deg))

সংকলনের পরে আউটপুট সিএসএস (উভয়ের ক্ষেত্রে একই)

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
//Mixins
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

আরও গাইডের জন্য আপনি অফিসিয়াল ওয়েবসাইট দেখতে পারেন ।

Answer 9

সাস প্রথম ছিলেন এবং বাক্য গঠনটি কিছুটা আলাদা। উদাহরণস্বরূপ, একটি মিশিন সহ:

Sass: +mixinname()
Scss: @include mixinname()

সাস কোঁকড়া বন্ধনী এবং সেমিকোলন উপেক্ষা করে বাসা বাঁধে, যা আমি আরও দরকারী বলে মনে করি।

Answer 10

SASS এবং এসসিএসএস নিবন্ধের মধ্যে পার্থক্য বিশদগুলির পার্থক্যটি ব্যাখ্যা করে। এসএএসএস এবং এসসিএসএস বিকল্পগুলির দ্বারা বিভ্রান্ত হবেন না, যদিও আমিও প্রাথমিকভাবে ছিলাম।

যদি তা বোঝা না যায় তবে আপনি নীচের কোডের মধ্যে পার্থক্য দেখতে পাবেন।

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

উপরের কোডে আমরা ব্যবহার করি; ঘোষণা পৃথক। আমি এমনকি এই বিন্দুটি আরও চিত্রিত করার জন্য। সীমান্তের জন্য সমস্ত ঘোষণা যুক্ত করেছি। বিপরীতে, নীচের SASS কোড অবশ্যই ইনডেন্টেশন সহ বিভিন্ন লাইনে থাকতে হবে এবং এর কোনও ব্যবহার নেই।

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

আপনি নীচের সিএসএস থেকে দেখতে পাচ্ছেন যে এসএসএসএস স্টাইলটি পুরানো এসএএসএস পদ্ধতির চেয়ে নিয়মিত সিএসএসের সাথে অনেক বেশি অনুরূপ।

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

আমি মনে করি আজকাল বেশিরভাগ সময় যদি কেউ উল্লেখ করে যে তারা সাসের সাথে কাজ করছে তারা theতিহ্যবাহী .সাসাসের পরিবর্তে .scss লেখার কথা উল্লেখ করছেন।

Answer 11

মূল sassহ'ল রুবি সিনড্যাক্সের মতো, রুবি, জেড ইত্যাদির মতো ...

এই বাক্য গঠনগুলিতে, আমরা ব্যবহার করি না {}, পরিবর্তে আমরা সাদা স্পেস নিয়ে যাই, এছাড়াও এর ব্যবহারও করি না ;...

ইন scsssyntaxes আরো ভালো হয় CSS, কিন্তু মত আরও বিকল্প পেয়ে সঙ্গে পাখির, প্রকাশক, ইত্যাদি অনুরূপ lessএবং অন্যান্য প্রাক প্রক্রিয়াকরণ CSS...

তারা মূলত একই জিনিস করে, কিন্তু আমি সিনট্যাক্স পার্থক্য, তাকান দেখতে প্রতিটি লাইনের কয়েক করা {}, ;এবং spaces:

Sass:

$width: 100px
$color: green

div
  width: $width
  background-color: $color

SCSS:

$width: 100px;
$color: green;

div {
  width: $width;
  background-color: $color;
}

Answer 12

কমপ্যাক্ট উত্তর:

এসসিএসএস সাস সিএসএস প্রি-প্রসেসর দ্বারা সমর্থিত মূল সিনট্যাক্সকে বোঝায় ।

• শেষ হওয়া ফাইলগুলি .scssসাস দ্বারা সমর্থিত স্ট্যান্ডার্ড সিনট্যাক্সের প্রতিনিধিত্ব করে। এসসিএসএস হ'ল সিএসএসের সুপারস্টার et
• শেষ হওয়া ফাইলগুলি .sassরুবি বিশ্বে উত্পন্ন সাস দ্বারা সমর্থিত "পুরানো" সিনট্যাক্সকে উপস্থাপন করে।

Answer 13

এসএএসএস সিন্ট্যাকটিক্যালি অসাধারণ স্টাইল শিট এবং এটি সিএসএসের একটি বর্ধন যা নেস্টেড বিধি, উত্তরাধিকার, মিক্সিনের বৈশিষ্ট্য সরবরাহ করে যেখানে এসসিএসএস হ'ল স্যাসি ক্যাসকেড স্টাইল শীট যা সিএসএসের অনুরূপ এবং সিএসএস এবং এসএএসএসের মধ্যে ফাঁক এবং অসম্পূর্ণতা পূরণ করে। এটি এমআইটির লাইসেন্সের আওতায় লাইসেন্স ছিল। এই নিবন্ধটি পার্থক্য সম্পর্কে আরও রয়েছে: https://www.educba.com/sass-vs-scss/