۲۶
اردیبهشت

جلسه ۰۳ : آموزش سینتکس Sass

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربران و علاقمندان به دوره آموزش Sass. در جلسه گذشته به صورت مرحله و به مرحله و گام به گام با نحوه نصب و راه اندازی Sass که با کمک نرم افزار روبی صورت گرفت آشنا شدیم. طبق آموخته های جلسه پیش برای نصب Sass ابتدا لازم است که نرم افزار روبی Ruby را که برای اجرای فایل های Sass به آن احتیاج دارید نصب نمایید.نیازهای سیستمی مورد نیاز برای Sass عبارت بودند از سیستم عامل : Cross-platform، برخورداری از پشتیبانی مرورگر : اینترنت اکسپلورر (اینترنت اکسپلورر ۸+)، فایرفاکس، گوگل کروم، سافاری، اپرا و زبان برنامه نویسی : روبی Ruby. در این جلسه شما را به آموزش سینتکس Sass دعوت می نماییم و به شما می آموزیم که Sass چند سینتکس دارد و این سنیتکس ها چه ویژگی ها و کاربرد هایی دارند.

آموزش سینتکس Sass

در آموزش سینتکس Sass در مورد سینتکس این پیش پردازنده مطالبی خواهیم آموخت.
Sass از دو نوع سینتکس پشتیبانی می کند: SCSS و Indented syntax.

SCSS یا (Sassy CSS)
یک اکستنشن از سینتکس CSS.
این امر بدان معناست که هر CSS معتبری یک SCSS معتبر نیز هست.
SCSS به راحتی به stylesheets اشاره می کند و می تواند به وسیله vendor specific syntax شناسایی شود.
بسیاری از فایل های CSS و SCSS از اکستنشن های scss. استفاده می کنند.
Indented
این دستورالعمل قدیمی تر از سینتکس قبل است و گاهی اوقات به عنوان SASS نامیده می شود.
با استفاده از این فرم سینتکس، می توان CSS را به طور خلاصه نوشت.
فایل های SASS از پسوند sass. استفاده می کنند.

سینتکس SASS Indented

سینتکس SASS Indented و یا فقط SASS جایگزین سینتکسCSS و مبتنی بر SCSS است.

می توان با استفاده از indentation به جای { and } بلوک ها را از یکدیگر جدا کرد.
indentation برای جدا کردن دو statement از به جای semicolons یا (;) از newlines ( خطوط جدید ) استفاده می نماید.
اعلامیه Property باید در خط خود قرار داده شود و statements ها نیز باید در { and } و در خط جدید و ضخیم قرار داده شوند.

به عنوان مثال، کد SCSS زیر را در نظر بگیرید.

مثال :

.myclass {
   color = red;
   font-size = 0.2em;
}

.myclass {

color = red;

font-size = 0.2em;

}

indented syntax یک سینتکس قدیمی است و توصیه می شود که از آن در فایل های Sass استفاده ننمایید.
همان طور که در صورت استفاده از = به جای تنظیمات ویژگی ها و متغیرها اخطار دریافت می کنید، اگر از این فایل استفاده کنید نیز در فایل CSS خطا دریافت خواهید نمود.

کد بالا را با استفاده از دستور زیر کامپایل نمایید.

مثال :

sass --watch C:\ruby\lib\sass\style.scss:style.css

1	sass --watch C:\ruby\lib\sass\style.scss:style.css

سپس دستور بالا را اجرا نمایید؛ که همان طور که نمونه زیر می بینید موجب بروز یک خطا در فایل style.css می شود.

مثال :

Error: Invalid CSS after "  color = red": expected "{", was ";"
      on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {
2:   color = red;
3:   font-size = 0.2em;
4:}

Error: Invalid CSS after " color = red": expected "{", was ";"

on line 2 of C:\ruby\lib\sass\style17.scss

1:.myclass {

2: color = red;

3: font-size = 0.2em;

4:}

تفاوت های سینتکس SASS

بیشتر سینتکس های CSS و SCSS در SASS کار می کنند. با این حال، یک سری تفاوت ها وجود دارد که در بخش های زیر توضیح داده شده اند.

ویژگی سینتکس (Property Syntax)

ویژگی های CSS می توانند از دو روش اعلام شوند.

ویژگی هایی که می توانند همانند CSS ولی بدون (;)semicolon اعلام شوند.
(:)colon که می تواند به ویژگی هر اسم پیشوند شود.

برای مثال به نمونه زیر توجه کنید.

مثال :

.myclass
   :color red
   :font-size 0.2em

.myclass

:color red

:font-size 0.2em

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

گزینشگرهای چندگانه (Multiline Selectors)

سنجشگرها می توانند در سینتکس Indented در یک newline جایگذاری شده و بعد از commas ظاهر شوند.

مثال

در مثال زیر می توان نحوه استفاده از سنجشگرهای چندگانه را در فایل SCSS ببینید.

مثال :

<html>
   <head>
      <title>Multiline Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>
   
   <body>
      <h2>Example using Multiline Selectors</h2 >
      <p class = "class1">Welcome to Tutorialspoint!!!</p>
      <p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>
   </body>
</html>

<html>

<head>

<title>Multiline Selectors</title>

</head>

<body>

<h2>Example using Multiline Selectors</h2 >

<p class = "class1">Welcome to Tutorialspoint!!!</p>

<p class = "class2">SASS stands for Syntactically Awesome Stylesheet...</p>

</body>

</html>

سپس فایل style.scss بسازید. به اکستنشن scss. توجه نمایید.

مثال :

.class1,
.class2{
   color:red;
}

.class1,

.class2{

color:red;

}

می توانید از Sass بخواهید که فایل CSS را بررسی نماید تا هر وقت که فایل SASS تغییر کرد با استفاده از دستور زیر آن را به روز رسانی نماید.

مثال :

sass --watch C:\ruby\lib\sass\style.scss:style.css

1	sass --watch C:\ruby\lib\sass\style.scss:style.css

سپس کد بالا را اجرا نمایید؛ اجرای آن با استفاده از کد زیر فایل style.css را به صورت خودکار ایجاد می کند.
style.css ایجاد شده به صورت زیر خواهد بود.

style.css

مثال :

.class1,
.class2 {
   color: red;
}

.class1,

.class2 {

color: red;

}

خروجی

اجازه دهید مراحل زیر را انجام دهیم تا ببینیم کدام یک از کدهای بالا کار می کنند.

کد داده شده فوق را در فایل hello.html ذخیره کنید.
این فایل HTML را در یک مرورگر باز کنید.

sass syntax step1

کامنت ها (Comments)

کامنت ها یک خط کامل را می گیرند و تمام متن زیر آنها را اشغال می کنند.
کامنت ها مبتنی بر سینتکس indented هستند.

دستور import@

بر خلاف SCSS،در SASS دستور import@ می تواند با / بدون نقل قول نوشته شود.
در مثال زیر می توانید نحوه استفاده از import@ را در SCSS ببینید.

مثال :

@import "themes/blackforest";
@import "style.sass";

1 2	@import "themes/blackforest"; @import "style.sass";

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

مثال :

@import themes/blackforest
@import fontstyle.sass

1 2	@import themes/blackforest @import fontstyle.sass

دستور Mixin

SASS از دستورالعمل هایی مانند mixin@ و include@ استفاده می کند.
به جایmixin وinclude شما می توانید از کاراکتر = و + استفاده کنید که نیازی به تایپ ندارند و کد شما را ساده تر کرده و برای خواندن آن ها را آسان تر نیز می نمایند.

برای مثال می توانید از دستور mixin به شکل زیر استفاده نمایید.

مثال :

=myclass
   font-size: 12px;
p
   +myclass

=myclass

font-size: 12px;

+myclass

کد داده شده فوق شبیه شکل زیر است.

مثال :

@mixin myclass
   font-size: 12px;
p
   @include myclass

@mixin myclass

font-size: 12px;

@include myclass

آموزش سینتکس Sass را با مبحث سینتکس Deprecated به عنوان آخرین مبحث به پایان می بریم.

سینتکس Deprecated

اگرچه SASS از برخی از سینتکس های قدیمی پشتیبانی می کند. با این حال، استفاده از این سینتکس ها در SASS توصیه نمی شود.
اگر از آن ها استفاده نمایید به احتمال زیاد با هشدار خطا برای شما به نمایش در خواهد آمد.
در ادامه چندین سینتکس قدیمی و ویژگی های هر کدام از آن ها را به شما معرفی می نماییم.

=
هنگام تنظیم متغیر ها و ویژگی های آن ها برای مقادیر SassScript می توان از این سینتکس استفاده کرد.
=||
هنگام اختصاص دادن مقادیر پیش فرض به متغیر ها می توانید از این سینتکس استفاده نمایید.
!
هنگام استفاده از متغیر پیش فرض، اگر از $ استفاده شود در آن صورت ویژگی های آن تغییر نخواهند کرد.

کلام آخر

در این جلسه آموزش سینتکس Sass را به شما علاقمندان و طرفداران این دوره آموزشی ارائه نمودیم.
در این جلسه آموختیم که Sass از دو نوع سینتکس پشتیبانی می کند: SCSS و Indented syntax.
به طور خلاصه :
SCSS یا (Sassy CSS) : یک اکستنشن از سینتکس CSS. این امر بدان معناست که هر CSS معتبری یک SCSS معتبر نیز هست.
SCSS به راحتی به stylesheets اشاره می کند و می تواند به وسیله vendor specific syntax شناسایی شود.
Indented : این دستورالعمل قدیمی تر از سینتکس قبل است و گاهی اوقات به عنوان SASS نامیده می شود.
با استفاده از این فرم سینتکس، می توان CSS را به طور خلاصه نوشت.
فایل های SASS از پسوند sass. استفاده می کنند.

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

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۳ : آموزش سینتکس Sass

مقدمه

آموزش سینتکس Sass

سینتکس SASS Indented

تفاوت های سینتکس SASS

ویژگی سینتکس (Property Syntax)

گزینشگرهای چندگانه (Multiline Selectors)

مثال

style.css

خروجی

کامنت ها (Comments)

دستور import@

دستور Mixin

سینتکس Deprecated

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ