یادگیری Sass در ۱۵ دقیقه

یادگیری Sass در ۱۵ دقیقه

امروز در این آموزش قصد داریم تا شما را با فایل Sassآشنا کنیم.اگر شما با کدهای CSS کار کرده باشید،میدانید که استفاده از پیش پردازنده ها(pre-processor)وقت شما را تا مقدار قابل توجهی ذخیره می کنند.از جمله این پیش پردازنده ها میتوان  SassLessStylus یا PostCSS  را نام برد.برای آشنایی بیشتر با عملکرد این فایل ها در ادامه همراه ما باشید.
استفاده از این فایل ها کار نوشتن و درک کردن استایل ها را برای ما آسان می کند که خود این باعث کاهش اشتباه توسط توسعه دهنده ها میشود.خوب حالا کار رو شروع می کنیم.

شروع کار با Sass

فایل های Sass توسط مرورگرها قابل درک نیستند و باید آنها بصورت استانداردCSS قبل از نمایشدر وبسایت ترجمه بشوند.به این منظور شما نیاز به تعدادی ابزار کمکی برای تبدیل فایل های scss. به css. دارید.در ادامه به تعدادی از این ابزارها اشاره می کنیم:

  1. ساده ترین و آسان ترین راه برای تبدیل فایل های مذکور استفاده از سایت  SassMeister است که فایل های sass را در یک سمت مینویسید و آن در سمت دیگر تبدیل شده آن را برایتان نمایش می دهد.
  2. روش بعدی استفاده از نرم افزار تحت دسکتاب است که میتوانید از اینجا آن را دریافت نمایید.
  3. اگر شما فرد حرفه ای هستید و میخواهید بصورت دستی این تبدیل را انجام بدهید میتوانید Sass را بر روی سیتم خود نصب نمایید و سپس کار تبدیل را انجام بدهید.

همچنین شما میتوانید با استفاده از خط دستور(command line)نیز از Sass استفاده نمایید و کار تبدیل را انجام بدهیم.برای اینکار کافیست از  Node.js port استفاده نمایید.البته راه های بسیار زیادی برای اینکار وجود دارد ولی ما استفاده از Node.js را ترجیح می دهیم.

در دستور زیر ما کار ترجمه فایل های scss را انجام می دهیم:

node-sass input.scss output.css

توجه داشته باشید که فایل های Sass دارای دو نوع متمایز با پسوند های Sass و SCSS هستند که البته هر دو در واقع یک چیز هستند ولی چون SCSS نسخه جدیدتری است ما از آن استفاده کردیم.شما میتوانید در صورت تمایل برای آشنایی بیشتر با تفاوت های این دو به اینجا مراجعه فرمایید.

متغییرها

متغییرها در Sass مانند متغییرهای سایر زبان های برنامه نویسی عمل می کنند و در داخل خود یک مقدار مشخصی را نگه میدارند. هنگامی که ما در Sass یک متغییر تعریف می کنیم در واقع ما در داخل آن یک مقدار مشخص ذخیره می کنیم مانند هنگامی که در کد کدهای CSS مقادیری مانند رنگ متن،فونت و ….در دزیر شما یک مثال ساده را مشاهده می کنید که ما ابتدا کد Sass آن و سپس کد CSS آن را برایتان قرار داده ایم.

//SCSS 
$title-font: normal 24px/1.5 'Open Sans', sans-serif;
$cool-red: #F44336;
$box-shadow-bottom-only: 0 2px 1px 0 rgba(0, 0, 0, 0.2);

h1.title {
  font: $title-font;
  color: $cool-red;
}

div.container {
  color: $cool-red;
  background: #fff;
  width: 100%;
  box-shadow: $box-shadow-bottom-only;
}
//CSS
h1.title {
  font: normal 24px/1.5 "Open Sans", sans-serif;
  color: #F44336; 
}

div.container {
  color: #F44336;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
}

دلیل اصلی استفاده از این روش این است که ما بتوانیم از یک مقدار در هر کجا که خواستیم سریع تر استفاده نماییم یا اگر لازم به ایجاد تغییری داشتیم،آن مقدار جدید را فقط در یک قسمت تعریفنماییم و تغییرات بصورت خود کار در تمام بخش هایی که از آن متغییر استفاده کرده اند اعمال بشوند.

Mixinها

شما میتوانید اینطور فکر کنید که Mixinها به عنوان یک نسخه ساده شده از کلاس های سازنده(constructor classes) در زبان های برنامه نویسی هستند.شما میتوانید مجموعه ای از کدهای CSS را در یک قالب جمع آوری نمایید و هر کجا که خواستید از آن استفاده نمایید.

Mixinها حتی میتوانند آرگومان نیز دریافت نمایند تا مقادیر پیش فرض را در آنها ذخیره نمایند.در مثال زیر ما یک Mixin با نام square تعریف کرده ایم و از آن برای ایجاد مربع در هر اندازه و رنگی استفاده خواهیم کرد:

//SCSS
@mixin square($size, $color) {
  width: $size;
  height: $size;
  background-color: $color;
}

.small-blue-square {
  @include square(20px, rgb(0,0,255));
}

.big-red-square {
  @include square(300px, rgb(255,0,0));
}
//CSS
.small-blue-square {
  width: 20px;
  height: 20px;
  background-color: blue; 

}

.big-red-square {
  width: 300px;
  height: 300px;
  background-color: red;
}

راه رایج دیگر برای استفاده از Mixinها زمانی است که یک متغییر برای کار کردن روی مرورگر به پیشوند(prefixes) ها نیاز دارند.

//SCSS
@mixin transform-tilt() {
  $tilt: rotate(15deg);

  -webkit-transform: $tilt; /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
      -ms-transform: $tilt; /* IE 9 */
          transform: $tilt; /* IE 10, Fx 16+, Op 12.1+ */
}

.frame:hover { 
  @include transform-tilt; 
}
//CSS

.frame:hover {
  -webkit-transform: rotate(15deg);  /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
  -ms-transform: rotate(15deg);  /* IE 9 */
  transform: rotate(15deg);  /* IE 10, Fx 16+, Op 12.1+ */ 
}

توسعه دادن(Extend)

ویژگی بعدی که به آن می پردازیم ویژگی توسعه دادن است که شما با استفاده از این ویژگی میتوانید ویژگی های یک انتخابگر(selector ) را از یکی دیگر به ارث ببرید.این ویژگی شبیه Mixinها کار می کنند اما ما ترجیحا برای ایجاد یک ارتباط منطقی بین عناصر موجود در صفحه از این ویژگی استفاده خواهیم کرد.

ما از ویژگی Extend زمانی استفاده خواهیم کرد که به عناصر مشابهی نیاز داریم که تنها در جزئیات کمی با هم متفاوت هستند.در ادامه با یک مثال مسئله را برایتان بیشتر ملموس خواهیم کرد.ما دو دکمه ایجاد خواهیم کرد،یکی برای قبول کردن و یکی برای رد کردن :

//SCSS
.dialog-button {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer;
}

.confirm {
  @extend .dialog-button;
  background-color: #87bae1;
  float: left;
}

.cancel {
  @extend .dialog-button;
  background-color: #e4749e;
  float: right;
}
//CSS
.dialog-button, .confirm, .cancel {
  box-sizing: border-box;
  color: #ffffff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  padding: 12px 40px;
  cursor: pointer; 
}

.confirm {
  background-color: #87bae1;
  float: left; 
}

.cancel {
  background-color: #e4749e;
  float: right; 
}

شما اگر به کد CSS توجه کرده باشین،ما در بخش Sass با ترکیب انتخابگر ،ویژگی های مورد نظر را در هر بخش تکرار کرده ایم بدون اینکه در هر بخش کدها را دوباره بنویسیم.اینکار باعث کاهش حجم کاری سیستم و در نتیجه افزایش سرعت بارگذاری خواهد شد.

تودرتو(Nesting)

شما با استفاده از این ویژگی میتوانید کدهای مربوط به استایل مورد نظر خود را بصورت تودرتو بنویسید که اینکار باعث میشود تا امکان تداخل کدهایتان تا مقدار قابل توجهی کاهش یابد.به مثال زیر توجه فرمایید:

//SCSS
ul {
  list-style: none;

  li {
    padding: 15px;
    display: inline-block;

    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }

  }

}
//CSS
ul {
  list-style: none; 
}

ul li {
  padding: 15px;
  display: inline-block; 
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444; 
}

عملیات محاسباتی(operations)

با استفاده از sass شما میتوانید عملیات اصلی ریاضی را بر روی استایل های خود اعمال نمایید و به آسانی از نماد های ریاضی استفاده نمایید.در مثال زیر نحوه استفاده را برایتان توضیح داده ایم:

//SCSS
$width: 800px;

.container { 
  width: $width;
}

.column-half {
  width: $width / 2;
}

.column-fifth {
  width: $width / 5;
}
//CSS
.container {
  width: 800px; 
}

.column-half {
  width: 400px; 
}

.column-fifth {
  width: 160px; 
}

اگر چه این قابلیت در Css با استفاده از ()calc در دسترس است اما با استفاده از sass نوشتن آن سریع و آسان بوده ومیتواند به طیف گسترده ای بسط داده شود.(مانند رشته ها و رنگ ها و…)

توابع

sass شامل لیست بلند بالایی از توابع میباشد که تعدادی از انها برای اعمال تغییرات بر روی رشته ها،عملیات مربوط به رنگ ها و تعدادی برای اعمال تغییرات ریاضی  مانند ()random و()round.

برای روشن شدن موضوع به مثال زیر توجه فرمایید

//SCSS
$awesome-blue: #2196F3;

a {
  padding: 10px 15px;
  background-color: $awesome-blue;
}

a:hover {
  background-color: darken($awesome-blue,10%);
}
//CSS
a {
  padding: 10px 15px;
  background-color: #2196F3; 
}

a:hover {
  background-color: #0c7cd5; 
}

برای مشاهده لیست توابع موجود در sass میتوانید به اینجا مراجعه فرمایید.

 


0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


هفت − = 1

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>