sass , less چی هستن و به چه دردی میخورن

[Golsha]

سلام ، میشه یکی در مورد اینا توضیح بده ، بگه اینا چین و به چه دردی میخون

[omidabedi]

یجورایی میشه گفت زبان های برنامه نویسی css و html هستن که به طراح کمک میکنن با کد نویسی کمتری کارای بیشتری رو انجام بده
میتونه متغییر تعریف کنه مثلا شما بیشتر از رنگ سفید استفاده میکنید
در ضمن با زبان رابی نوشته شده
sass مدل پیشرفته ی scss هست که syntax راحت تری داره یعنی از قوائد نوشتاریش کاسته شده مثلا اخر خط رو لازم نیست با ; ببندی یا پایان هر کلاس اکولاد رو ببندی یا اول کلاس اکولاد باز کنی


برای مثال نمونه ی scss:


امکان استفاده ی تو در تو بجای select عادی

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}


li { display: inline-block; }


a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
قابلیت include فایل های css جداگانه در یک فایل css دیگر


قابلیت mixin که به طراح این اجازه رو میده که کلاسی رو تعیین کنه و بصورت یک شی همراه خودش داشته باشه هرجا خواست ازش استفاده کنه
برای جاهایی مناسب هست مثل border-radius که باید مثلا برای موزیلا و وب کیت ها و اپرا و... هر کدوم یک خط بنویسی تا cross browser بشه
و خودش حجم زیادی رو میگیری
خب لاید میگید که شاید نخوایم همه ی border-radius هامونو مثل هم بدیم باید بهتون بگم که میتونید به حالت فانکشن php تعریفش کنیم که ورودی داشته باشه
ورودی چیه؟ مقدار radiusمون
مثال:





@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
نحوه ی استفاده به این صورت:
.box { @include border-radius(10px); }
یکی از قابلیت های دیگه ی این زبان استایل نویسی قابلیت ارث بری هست
فرض کنید 3 تا استایل مینویسید که توی همه ی موارد بجز رنگ border مشترک هستن با sass میشه یکبار نوشت کل خصوصیاتشو و چندجا استفاده کرد و فقط قسمتی که مد نظرمون هستو تغییر بدیم
اینجوری:

.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}


.success {
@extend .message;
border-color: green;
}


.error {
@extend .message;
border-color: red;
}


.warning {
@extend .message;
border-color: yellow;
}
یکی دیگه از قابلیت ها امکان استفاده از عملگرهای ریاضی هست
اینجوری:

.container { width: 100%; }


article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}


aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}


نکته:
نمونه ها scss هستن برای خوانایی بیشتر و درک تفاوتها
sass همونطور که گفتم اکولاد و ; نداره


less هم یه همچین چیزی هست برای کد های html