![](https://api.sh-varna.ir/File/Show/531.png,)
تعریف متغیر در Sass
قبل از اینکه به مبحث تعریف متغیر در Sass بپردازیم ، بهتر است کمی با آن آشنایی پیدا کنیم Sass. یک پیش پردازنده (preprocessor) برای CSS میباشد. در واقع Sass نسخه ی پیشرفته تر از Css خام میباشد که به ما کمک میکند تا کد های Css را با سرعت و امکانات بیشتری استفاده کنیم. امروزه به ندرت دیده میشود که برنامه نویسان Front-End حرفه ای ، از Css خام برای طراحی UI سایت خود استفاده کنند و در این میان ، Sass به عنوان محبوب ترین و پرکاربرد ترین پیش پردازنده برای Css قد علم کرده است. در این مقاله از شرکت برنامه نویسی وارنا ، به آموزش تعریف متغیر در Sass میپردازیم.
متغیر چیست؟
متغیر ها راهی هستند برای ذخیره ی داده ها جهت استفاده ی مکرر در تمام قسمت های وبسایت. با استفاده از متغیر های Sass شما میتوانید نوع داده های زیر را ذخیره نمایید:
- مقادیر String
- اعداد
- کد رنگ ها
- مقادیر Boolean
- انواع لیست ها
- مقادیر null
دوره ی آموزش Sass و Tailwind وارنا
ما در گروه برنامه نویسی وارنا ، دوره ی اختصاصی آموزش Tailwind و Sass آماده کردیم که ازصفر تا صد اون و تموم فوت و فن های استفاده از کلاس هایش رو بهت آموزش میدیم .اگر میخوای تیلویند و Sassرو کامل یاد بگیری ، این دوره ی آموزشی رو از دست نده.
تعریف متغیر در Sass
برای تعریف یک متغیر در Sass کار بسیار ساده ای خواهیم داشت. کافیست از علامت $ قبل از اسم متغیر استفاده کرده و در مقابلش ، مقدار مورد نظرمون را وارد نماییم:
$variablename: value;
آموزش و استخدام در وارنا
آیا میدانستید که شما میتوانید این و Sass Tailwind جذاب و دوست داشتنی رو از صفر تا صد با دوره ی آموزشی که گروه برنامه نویسی وارنا تدارک دیده ، یاد بگیری ؟ خبر خوب همینجا به پایان نمیرسه. شما میتوانید پس از پایان دوره و کسب نمره ی قابل قبول ، با شرکت وارنا همکاری کنید و پروژه ی طراحی قالب UI دریافت کنی همین حالا ثبت نام کن . فرصت رو از دست نده !
مثال از تعریف متغیر در Sass
در مثال زیر 4 متغیر برای Font-family ، Color ، Font-size و Width تعریف کردیم:
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
که وقتی این فایل Sass به فایل Css تبدیل و کامپایل میشود ، خروجی زیر را در فایل Css نمایش خواهد داد:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}
و با توجه به فایل Html که به شکل زیر میباشد:
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css;?>">
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
<div id="container">This is some text inside a container.</div>
</body>
</html>
خروجی زیر را در نمایشگر خواهیم دید:
![متغیر در Sass](https://panel.sh-varna.ir/File/Show/530.png)
سخن پایانی
تعریف متغیر در Sass ، از کد نویسی تکراری و سنگین تر شدن فایل Css خود جلوگیری میکنید و همچنین در افزایش سرعت برنامه نویسی شما تاثیر به سزایی خواهد داشت. پس حتما از این قابلیت جذاب Sass استفاده کنید.