آموزش Sass قسمت اول

1394/11/2 کارن رهنمون 2550

سلام . کارن رهنمون هستم و با اولین بخش سری آموزش SASS در خدمت شما هستم

امروز یک سری مفاهیم اولیه رو با هم بررسی خواهیم کرد و به کلیات SASS خواهیم پرداخت .
اولین چیزی که مورد بررسی قرار میدهیم اینه که کلا SASS چی هست ؟
سس یک زبان اسکریپتینگ ای هست که به کمک مفسر SASS تبدیل می شود به شیوه نامه های آبشاری که به صورت .css ذخیره میشوند
هدف سس آسان نویسی و کوته نویسی شیوه نامه های ما می باشد
وبسایت رسمی سس در http://sass-lang.com می باشد

وبسایت sass


ابتدا سایت سس رو باز کنید و بر روی install کلیک کنید تا به صفحه آموزش نصب منتقل بشید


به طور کلی دو روش برای نصب SASS وجود دارد
یکی به کمک ترمینال و یکی به کمک اپلیکیشن های دارای GUI
از اون جایی که ترمینال هم راحت تر و هم رایگانه پس میریم سر ترمینال (چون اگه ملاحظه کنید در لیست اپلیکیشن های موجود بیشترشون Paid ) هستن
برای روش ترمینال ما نیازمند ruby و Rubygems هستیم
اگه تو لینوکس هستید کافیه توی ریپازیتوری هاتون بگردید پیداش میکنید
به طور مثال در نسخه ی لینوکس من که بر اساس آرچ هست پکیج منیجر یا مدیریت پکیج من با pacman هست با کمک اون نصب میکنم
برای پیدا کردن روش نصب روی نسخه خودتون اینجا رو یک نگاهی بکنید و بر طبق آموزش های آن پیش بروید
ruby-lang

اما اگر ویندوز باشیم کافیه فقط setup روبی رو از جایی دانلود کنید
چند تا لینک برای شما گزاشتم :
لینک اول از پی سی دانلود
لینک دوم از دانلودها
از طریق یکی از این لینک ها روبی رو دانلود و نصب کنید
خب حالا فرض میگیریم که شما روبی و روبی جم رو کاملا نصب کرده اید
اگر لینوکس باشید ترمینال و اگه ویندوز هستید این رو باز کنید
start command prompt with ruby
این جز یکی از چیز هایی هست که نصب میشه با نصب اون ست آپ روبی

آموزش sass
خب این صفحه بایستی برای شما نمایش داده شده باشه

سپس درون command line یا دوستانی که در لینوکس بودند در ترمینالشون این رو تایپ کنند:

gem install sass


آموزش Sass

دوستان اگه کسی در نصب روبی مشکلی داست میتوانند از این آدرس هم استفاده کنند
این آدرس معتبر تره:
http://rubyinstaller.org/
در ادامه بررسی کنید که سس به خوبی نصب شده است یا نه با کمک دستور زیر :sass -version


آموزش sass

یک نکته ای رو هم خدمت دوستان لینوکسی عرض کنم که اگر با دستور
gem install sass
به مشکل برخوردید با
sudo gem install sass
امتحان کنید
اگر باز هم مشکلی وجود داشت در خدمت این دوستان هم هستم
خب حالا ما سس رو نصب کردیم و کاملا هم کار میکنه اما این جلسه نمیخوایم شروع کنیم به کد نوشتن
در این جا میخوام چند تا از مطالب جالبی درباره sass بدم:
1. در سس شما میتوانید متغیر تعریف کنید و از آن متغییر در طول کل پروژه تان استفاده کنید
هرگاه بخشی استایل هایتان (رنگ طول عرض ارتفاع سایز فونت نام فونت و ....) مورد پسندتون نبود فقط همان اول متغییر را در موقع مقدار دهی تغییر دهید و تغییرات رنگ در کل شیوه نامه اعمال میشود:

color: $mycolor


* در این جا صرفا جهت آشنایی با این خاصیت ها صحبت میکنم بعد ها به بررسی دقیق همه این خاصیت ها خواهیم پرداخت
2. در سس شما میتوانید دو شیوه نامه جدا را با یک خط به یک شیوه نامه تبدیل کنید
فرض کنید هر کدامشان 100000 خط کد باشد شاید اصلا IDE تان کرش کند تا یکی از این فایل ها را باز کند
اما به لطف سس تنها با یاد کردن نام فایل شیوه نامه آن نیز به فایل کنونی شما می چسبد
مثال زیر را در نظر بگیرید:

//myfiletobeimported.sass

html,
body,
ul,
ol
  margin:  0
  padding: 0

و حالا فایل اصلی شیوه نامه را در نظر بگیرید :

// main.sass
@import reset

body
  font: 100% Helvetica, sans-serif
  background-color: #efefef

پس از تفسیر کردن (interpret) کردن فایل main.sass نتیجه این می شود :
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

نکته طلایی :
فعلا به سینتکس توجه نکنید فقط کلیات سورس ها رو مشاهده کنید
3.در سس شما میتوانید Mixin تعریف کنید
واژه Mixin معادل فارسی خیلی مسخره ای داره. میشه مخلوط شوندگان که خوب یکم آنرماله پس ما همون میکسین رو استفاده میکنیم
میکسین رو فک نمی کنم بشه توضیح داد در عمل ببینید متوجه می شوید :

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

.box2
  color : white
  +border-radius(40px)

خروجی این کد به صورت زیر است :

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

.box2 {
  color : white;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  border-radius: 40px;
}

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

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333


.success
  @extend .message
  border-color: green


.error
  @extend .message
  border-color: red


.warning
  @extend .message
  border-color: yellow

نتیجه ی این کد به صورت زیر است :

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

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

.container
  width: 100%

article[role="main"]
  float: left
  width: 600px / 960px * 100%
aside[role="complimentary"]
  float: right
  width: 300px / 960px * 100%

در مثال بالا width شی article[role="main"]
میشود 600 تقسیم بر 960 ضرب در 100 به واحد درصد

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

درنهایت باز هم میگم در اولین جلسه به سینتکس توجه ای نداشته باشید
امیدوارم از عجایب سس خوشتان اومده باشه
این تنها گوشه ای از قدرت خارق العاده سس هست
تا بخش بعدی شما عزیزان را به خدای بزرگ می سپارم

دانلود دانلود PDF قسمت اول آموزش Sass

قسمت بعدی قسمت دوم آموزش Sass