دسته بندی:آموزش برنامه نویسی

تاریخ انتشار:یکشنبه 28 اسفند 1401

نویسنده:مرتضی رستمیان

تعریف متغیر در 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 ، از کد نویسی تکراری و سنگین تر شدن فایل Css خود جلوگیری میکنید و همچنین در افزایش سرعت برنامه نویسی شما تاثیر به سزایی خواهد داشت. پس حتما از این قابلیت جذاب Sass استفاده کنید.