آموزش Sass

آموزش طراحی وب سایت با استفاده از Sass

به کمک متغیر میتوان اطلاعات را ذخیره و استفاده کرد.

با استفاده از sass، شما میتوانید اطلاعات را بصورت زیر ذخیره کنید:

  • strings
  • numbers
  • colors
  • booleans
  • lists
  • nulls

در sass، برای تعریف متغیر از نماد $ به همراه اسم، استفاده میشود.

$variablename: value;

در مثال زیر چهار متغییر با نام های myFont، myColor، myFontSize، و myWidth تعریف شده است. بعد از تعریف متغیر شما میتوانید در هر جایی از آنها استفاده کنید:

 
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
 
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
#container {
  width: $myWidth;
}
 

بعد از کامپایل شدن sass، مقادیر متغیرها جاگذاری میشوند و CSS شما بصورت زیر میشود:

 
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}
#container {
  width: 180px;
}
 

محدوده متغیر

متغیرهای sass تنها در سطحی که تعریف میشوند دیده میشوند.

 
$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor
}
 

رنگ متن سلکتورp قرمز خواهد بود، زیرا متغیر $myColor: green درون محدوده سلکتورh1> تعریف شده است و تنها در همان محدوده دیده میشود. بنابراین محدوده سلکتورp آن متغیر را نمیبیند.

در نتیجه خروجی بدین شکل میباشد:

 
h1 {
  color: green;
}
p {
  color: red;
}
 

استفاده از !global در sass

رفتار پیش فرض متغیرها را که در بالا به آن اشاره شد با استفاده از دستور !global میتوان تغییر داد.

دستور !global نشان میدهد که متغیر جهانی است. به عبارت دیگر آن متغیر در هر سطحی قابل دسترس است.

به مثال بالا دستور !global را اضافه کردیم:

 
$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor
}
 

با اینکار رنگ سلکتورp سبز میشود.

در نتیجه خروجی بدین شکل میباشد:

 
h1 {
  color: green;
}
p {
  color: green;
}
 
نوشتن دیدگاه

جستجو در سایت

  • مقدمه +

    sass یک پیش پردازنده برای CSS است که از تکرار کدهای CSS جلوگیری میکند.

    Read More

  • نصب Sass +

    sass پیش پردازنده CSS است که میتوان استایل شیت را شخصی سازی و مدیریت کند و میتواند بر روی تمامی

    Read More

  • Sass - متغیرها +

    به کمک متغیر میتوان اطلاعات را ذخیره و استفاده کرد.

    Read More

  • Sass - قوانین تو در تو - Nested Rules +

    sass به شما این امکان را میدهد تا از ویژگی های یک کلاس در یک کلاس دیگر استفاده کنید.

    Read More

  • Sass - Importe - Partials +

    با کمک sass میتوان کدهای CSS را طوری بنویسید که بتوان آنها را در پروژه های بعدی نیز استفاده کنید.

    Read More

  • Sass - Mixins - Include +

    شما با دیرکتیو @mixin میتوانید کدهای CSS خود را در هرجای وب سایت استفاده کنید. شما با دیرکتیو @include میتوانید

    Read More

  • Sass - extend +

    با استفاده از دیرکتیو @extend میتوان پراپرتی های CSS را با دیگر سلکتورها به اشتراک گذاشت.

    Read More

  • 1

افراد آنلاین

ما 512 مهمان و بدون عضو آنلاین داریم