آموزش mixin در sass

هدف وبلاگ

در این وبلاگ دوره آموزشی sass از شرکت برنامه نویسی وارنا میخواهیم در رابطه با یکی از ویژگی های مهم در sass با صحبت کنیم در این جلسه آموزشی از دوره آموزش sass میخواهیم در رابطه با mixin و ویژگی هایی که دارد صحبت کنیم همچنین در مثالی عملی برای شما در رابطه با خصوصیاتی که دارد صحبت میکنیم با ما همراه باشید.

مطالعه کنید : آموزش نصب sass

مطالعه کنید : متغیر ها در sass

mixin چیست؟

به زبان ساده اگر شما بخواهید به بخشی از برنامه نویسی خود در قسمت font-end یک ui واحد بدید که تمامی آن بخش هایی که تعیریف میکنید آن ویژگی را داشته باشند مثلا تمام جداولی که شما در سایت خود قرار میدهید همگی دارای ویژگی های واحدی باشند آنگاه شما میتوانید از ویژگی MIXIN در SASS استفاده کنید. فرض کنید کد زیرا برای پروژه برنامه نویسی خود نوشته اید :

      
        body>
         ul class="ul" >
          li> itemA  /li>
          li> itemB  /li>
          li> itemC  /li>
         /ul>
        /body>
      
    

کد بالا در اصل یک جدول را در html میسازد حال اگر شما بخواهید برای تمامی جداولی که در فایل برنامه نویسی خود تعریف میکنید یک استایل واحد در نظر بگیرید ، میتوانید با استاده از ویژگی mixin در sass در فایل استایل دهی خود در sass به نام style.scss یک ویژگی های منحصر به فرد تعریف کنید و آن ها را به جداول خود نسبت بدهید . کد زیر را بررسی کنید :

      
        @mixin ul_default_style {
         padding: 0px;
         margin: 0px;
         list-style: none;
        }

        @mixin li_style($color, $background) {
          color: $color;
          background-color: $background;
        }
        ul {
          @include ul_default_style();
          li {
            @include li_style(red , yellow);
          }
        }
      
    

در این بخش ما با استفاده از ویژگی mixin در sass یک استایل واحد برای ul های خود تعریف کرده ایم و هر جا که بخواهیم میتوانیم آن را برای خود استفاده کنیم . ما یک استایل پایه داریم که برای بخش ul تعریف کرده ایم اما برای بخش li ها نیز ویژگی های ظاهری منحصر به فردی نیز تعریف کرده ایم و برای هر یک از آن ها طبق خاصیتی که دارند نامی انتخاب کرده ایم و بعد از مرحله دوم کافیست طبق مواردی که تعریف کرده ایم استایل مورد نظر خود را بدهیم همانطور که مشاهده میکنید در قسمت کد نویسی خود به ul استایل خاصی نداده ایم و بخش آن خالی است و برای بخش li ما هم رنگ انتخاب کرده ایم و هم رنگ پس زمینه و به همین سادگی میتوانیم به هر بخشی که میخواهیم کد های خود را بدهیم و تمامی آن بخش ها آن کد واحد و پیش فرض را دریافت میکنند مثلا میتوانیم برای تمامی پاراگراف ها سر تیتر ها عکس ها و اسلایدر ها یک استایل پیشفرض قرار بدهیم و با استفاده از mixin آن را به همه بدهیم.

مطالعه کنید : استایل دادن درختی در sass یا nesting در sass

شرکت برنامه نویسی وارنا در دوره آموزشی sass صفر تا صد مطالب کاربردی را برای شما هنرجویان گرامی به صورت پروژه محور و کاملا دقیق بیان خواهد کرد شما میتوانید با استنفاده ازدوره آموزش sass به صورت کامل با این پیش پردازشگر css آشنا خواهید شد و میتوانید حجم کد نویسی خود را به شدت کاهش بدهید با ما همراه باشید .

مطالعه کنید : sass چیست ؟ کاربرد های sass