Sass นิยาม

অপশনাল কোর্স

কোর্স সুপারিশ:

  • আপনাকে জানা উচিত
  • এগুলি অবশ্যই জানতে হবে:

HTML CSS আপনি এই বিষয়গুলি পূর্বে শিখতে চান, তবে আমাদের

হোমপেজ

  • এখানে এই শিক্ষাদীক্ষাকে দেখুন。 wesomeSass কি? yntacticallyA wesomeStyles
  • heet (যা গঠনশৈলীগতভাবে অত্যন্ত সুবাদী শৈলীসূচী)
  • Sass একটি CSS এক্সটেনশন
  • Sass একটি CSS প্রিপ্রসেসর
  • Sass সমস্ত CSS সংস্করণকে পূর্ণাঙ্গভাবে সমর্থন করে
  • Sass CSS-এর পুনরাবৃত্তি হ্রাস করে, যা সময় সাশ্রয় করে
  • Sass-কে হ্যাম্পটন ক্যাটলিন দ্বারা ডিজাইন করা এবং ২০০৬ সালে ন্যাটালী হাইজেনবাউম দ্বারা উন্নয়ন করা

Sass মুক্তভাবে ডাউনলোড এবং ব্যবহার করা যায়

কেন Sass ব্যবহার করা যেতে পারে?

শৈলীসূচী দিন দিন বাড়ছে, জটিলতা বৃদ্ধি পাচ্ছে এবং তা তাকে আরও কঠিন করছে তা রক্ষা করা। এখানেই CSS প্রিপ্রসেসর সাহায্য করতে পারে。

Sass-এর কিভাবে ব্যবহার করা যায়, এটা নিজেই একটি CSS-এ বিহতৃত সম্পদ

Sass-এর একটি মূল্যবান সহজ উদাহরণ

আমরা একটি তিনটি মূল রং সম্পন্ন ওয়েবসাইট আছে:
#a2b9bc
#b2ad7f

#878f99

তাহলে, আপনাকে এইসব HEX মানকে কতবার লিখতে হবে? অনেকবার। যদি একই রং পরিবর্তিত হয়, তবে?

Sass ตัวอย่าง

/* মূল রংকে ভেক্টর নির্দিষ্ট করা */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* ใช้ตัวแปร */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

তাই, Sass ব্যবহার করার সময়, যদি মূল রং পরিবর্তিত হয়, তবে আপনাকে শুধুমাত্র একটি জায়গায় তা পরিবর্তন করতে হবে。

Sass ทำงานอย่างไร?

เบราวเซอร์ไม่เข้าใจรหัส Sass ดังนั้นคุณจำเป็นต้องใช้ประมาณายฝึก Sass ในการแปลงรหัส Sass ให้เป็น CSS มาตรฐาน

กระบวนการนี้เรียกว่า transpiling หรือ การแปลงเป็นภาษาอื่น ดังนั้นคุณต้องให้รหัส Sass ให้กับตัวแปลงภาษา (โปรแกรม) และทำให้รหัส CSS กลับมา

คำแนะนำ:การแปลงเป็นภาษาอื่น คือเฉพาะชื่อที่ใช้เพื่อการแปลง/แปลงภาษาของโค้ดที่เขียนด้วยภาษาหนึ่งเป็นภาษาอื่น

ประเภทแฟ้ม Sass

นามสกุลแฟ้มของแฟ้ม Sass คือ ".scss"。

Sass หมายเหตุ

Sass สนับสนุนหมายเหตุมาตรฐาน CSS /* comment */นอกจากนี้ยังสนับสนุนหมายเหตุที่ฝั่งขวาของแถว // comment:

Sass ตัวอย่าง

/* การกำหนดสีหลัก */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* ใช้ตัวแปร */
.main-header {
  background-color: $primary_1; // คุณสามารถเพิ่มหมายเหตุในช่องเว้นไว้ที่นี่
}