یادگیری SASS در 15 دقیقه

بخش: توسعه وب 99 بار مشاهده شده چهارشنبه ۵ مهر ۹۶ 0 نظر ارسال شده
یادگیری SASS در 15 دقیقه

اگر مقدار زیادی از کد CSS را بنویسید، pre-processors (پیش پردازنده) می تواند سطوح استرس را تا حد زیادی کاهش داده و زمان زیادی را صرفه جویی می کنید. با استفاده از ابزارهایی مثل Sass، Less، Stylus یا PostCSS، استایل های بزرگ و پیچیده را برای درک بهتر و راحت تر به کار می برند. با تشکر از ویژگی هایی مانند variableها (متغیرها)، functionها (توابع) و Mixins کدها باعث سازماندهی بیش تر شده و به توسعه دهندگان  اجازه کار به صورت سریعتر و اشتباهات کمتر را می دهد. 

1. شروع به کار 

مرورگر نمی تواند فایل های Sass را تفسیر کند، بنابراین آنها نیاز به کامپایل کردن CSS استاندارد پیش از آماده شدن برای دسترسی به وب دارند. به همین دلیل است که شما نیاز به نوعی ابزار برای کمک به ترجمه فایل های scss. به .css دارید. در زیر چند گزینه برای شما وجود دارد:

  • ساده ترین راه حل ابزار مرورگر برای نوشتن و کامپایل کردن Sass درست در spotاست: SassMeister.
  • از برنامه دسکتاپ 3rd Party استفاده کنید. هر دو نسخه رایگان و پرداختی در دسترس هستند. می توانید برای پیدا کردن بیشتر به اینجا بروید.
  • اگر مانند CLI هستید، می توانید Sass را بر روی کامپیوتر خود نصب کنید و فایل ها را به صورت دستی کامپایل نمایید.

اگر تصمیم دارید با command line (خط فرمان) کار کنید، می توانید Sass را در فرم اصلی آن (نوشته شده در ruby) نصب کنید یا می توانید پورت Node.js را امتحان کنید (انتخاب با شماست). بسیاری از پکیج های دیگر نیز وجود دارد، اما از آنجایی که ما دوستدار Node.js هستیم، می خواهیم با آن کار کنیم.

در اینجا دستور نگارش (syntax) کامپایل فایل های .scss با استفاده از گره CLI است.

node-sass input.scss output.css

Sass دو دستورنگارش متمایز SASS و SCSS را ارائه می دهد. آنها هر دو تمام کارها را انجام می دهند و تنها به روش های مختلف نوشته شده اند. SCSS جدیدتر است و به طور کلی بهتر در نظر گرفته می شود، بنابراین قصد داریم با آن پیش برویم.

 

 2. متغیرها 

متغیرها در Sass نیز مانند دیگر زبان های برنامه نویسی کاربرد دارند و شامل نوع داده ها (data types) و محدوده ها (scope)  نیز می باشند. هنگام تعریف متغیری که در داخل آن مقدار خاصی را ذخیره می کنیم، که اغلب در CSS مانند رنگ پالت (palette color)، پشته فونت (font stack) یا تمام خصوصیات یک box-shadow جالب باز می شود.

 در زیر مثال ساده ای برای مشاهده کد SCSS و ترجمه آن به 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);
}

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

3. Mixins 

می توانید Mixins ها را به عنوان یک نسخه ساده از کلاس های سازنده در زبان های برنامه نویسی در نظر بگیرید، همچنین می توانید یک کل گروه از اعلان های CSS را بکشید و در هر جا که بخواهید به عنوان یک مجموعه خاص از استایل ها استفاده کنید.

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

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;
}

یکی دیگر از روش های کارآمد برای استفاده از mixins نیاز یک خاصیت به پیشوند برای کار در تمام مرورگرها است.

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+ */ 
}

4. Extend

ویژگی بعدی که ما به آن نگاه خواهیم کرد code>@extend است که به شما امکان می دهد تا خاصیت CSS یک selector (انتخابگر) را به دیگری ارث بدهید. این کار مشابه سیستم mixins است، اما زمانی که می خواهیم یک ارتباط منطقی میان المان ها در یک صفحه ایجاد کنیم ترجیح داده می شود. 

Extension باید زمانی استفاده شود که نیاز به المان های مشابه مدل سازی داشته باشیم، که هنوز در برخی جزئیات متفاوت می باشند. به عنوان مثال، اجازه دهید دو دکمه dialog را برای موافقت و دیگری برای لغو گفت و گو ایجاد نماییم.

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 انتخابگرها را به جای تکرار همان اعلامیه ها بارها و بارها ترکیب کرده و در حافظه ارزشمند ما ذخیره می کند. 

5. Nesting 

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

این مثال به شما اجازه می دهد تا چند لینک در لیست را استایل بدهید:  

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; 
}

6.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; 
}

 اگرچه vanilla CSS هم اکنون این ویژگی را به صورت ()calc ارائه می دهد، جایگزین Sass برای نوشتن سریع تر است، دارای عملکرد٪ modulo می باشد و می تواند به طیف گسترده ای از انواع داده ها (به عنوان مثال رنگ ها و رشته ها) اعمال شود. 

 

7. توابع

 Sass لیست های طولانی از عملکردهای ساخته شده را ارائه می دهد. آنها برای اهداف مختلف از جمله دستکاری رشته، عملیات مربوط به رنگ و برخی از روش های ریاضی دستی مانند ()random و ()round استفاده می شود. 

برای نمایش یکی از ساده ترین توابع Sass ، ما یک قطعه را ایجاد می کنیم که ازdarken($ amount ، color$) برای ایجاد on-hover استفاده می شود.

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 از کنترل جریان نیز پشتیبانی می کند، بنابراین اگر می خواهید، می توانید رفتارهای پیچیده ای ایجاد کنید.

 نتیجه 

برخی از ویژگی های فوق در آینده به استاندارد CSS می آیند، اما هنوز کاملا در اینجا وجود ندارد. در عین حال، پیش پردازنده ها یک راه عالی برای بهبود تجربه نوشتن CSS هستند و Sass یک انتخاب جامع در زمان انتخاب آن ها است.

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

گروه تحقیقات سافت اسکیل به منظور افزایش سطح دانش جامعه، سعی در ترجمه، تالیف و تولید محتوای با کیفیت در زمینه های مختلف نرم افزاری دارد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...