از CSS3 و LESS چه می دانید؟
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.
Wikipedia این طور CSS3 را تعریف می نماید:
"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."
فواید css3 :
در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:
1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
کفپوش اپوکسی| اجرای کفپوش اپوکسی| ملات ضد اسید فوران|
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت
اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.
یک انتقال (Transition) دقیقا چیست؟ :
یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند
محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.
وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.
امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.
LESS چیست؟
LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم میکند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.
LESS دارای دو نوع پیاده سازی است:
سمت کاربر
سمت سرور
پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js:
برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">
در خط دوم به دلیل سرعت بارگذاری بالاتر و مسائل کشینگ از نسخه اسکریپت موجود بر روی هاست های گوگل استفاده کردیم ولی شما می توانید این اسکریپت را دانلود و بر روی هاست خودتان نیز قرار دهید.
باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"می بایست از rel="stylesheet/less" استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.
قابلیت های کلیدی LESS:
در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.
دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن
متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins
و…!
در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها :
متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.
/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}
به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آنها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}
Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کردهاند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفتهاند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیتها و تواناییهای دو نسخه قبل را پوشش می‌دهد و رویهای جدید در طراحی سایت بوجود میآورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب میشود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.
نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل میشود. برای دیدن کاربرد هر کدام میتوانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.
Wikipedia این طور CSS3 را تعریف می نماید:
"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."
فواید css3 :
در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:
1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت
اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.
یک انتقال (Transition) دقیقا چیست؟ :
یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند
محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.
وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.
امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.
LESS چیست؟
LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم میکند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.
LESS دارای دو نوع پیاده سازی است:
سمت کاربر
سمت سرور
پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js
برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">
در خط دوم به دلیل سرعت بارگذاری بالاتر و مسائل کشینگ از نسخه اسکریپت موجود بر روی هاست های گوگل استفاده کردیم ولی شما می توانید این اسکریپت را دانلود و بر روی هاست خودتان نیز قرار دهید.
باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"می بایست از rel="stylesheet/less" استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.
قابلیت های کلیدی LESS
در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.
دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن
متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins
و…!
در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها
متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.
/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}
به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آنها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}
Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کردهاند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفتهاند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیتها و تواناییهای دو نسخه قبل را پوشش می‌دهد و رویهای جدید در طراحی سایت بوجود میآورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب میشود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.
نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل میشود. برای دیدن کاربرد هر کدام میتوانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.
Wikipedia این طور CSS3 را تعریف می نماید:
"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."
فواید css3 :
در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:
1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
کفپوش اپوکسی| اجرای کفپوش اپوکسی| ملات ضد اسید فوران|
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت
اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.
یک انتقال (Transition) دقیقا چیست؟ :
یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند
محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.
وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.
امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.
LESS چیست؟
LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم میکند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.
LESS دارای دو نوع پیاده سازی است:
سمت کاربر
سمت سرور
پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js:
برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">
در خط دوم به دلیل سرعت بارگذاری بالاتر و مسائل کشینگ از نسخه اسکریپت موجود بر روی هاست های گوگل استفاده کردیم ولی شما می توانید این اسکریپت را دانلود و بر روی هاست خودتان نیز قرار دهید.
باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"می بایست از rel="stylesheet/less" استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.
قابلیت های کلیدی LESS:
در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.
دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن
متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins
و…!
در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها :
متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.
/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}
به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آنها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}
Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کردهاند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفتهاند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیتها و تواناییهای دو نسخه قبل را پوشش می‌دهد و رویهای جدید در طراحی سایت بوجود میآورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب میشود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.
نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل میشود. برای دیدن کاربرد هر کدام میتوانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.
Wikipedia این طور CSS3 را تعریف می نماید:
"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."
فواید css3 :
در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:
1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت
اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.
یک انتقال (Transition) دقیقا چیست؟ :
یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند
محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.
وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.
امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.
LESS چیست؟
LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم میکند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.
LESS دارای دو نوع پیاده سازی است:
سمت کاربر
سمت سرور
پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js
برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">
در خط دوم به دلیل سرعت بارگذاری بالاتر و مسائل کشینگ از نسخه اسکریپت موجود بر روی هاست های گوگل استفاده کردیم ولی شما می توانید این اسکریپت را دانلود و بر روی هاست خودتان نیز قرار دهید.
باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"می بایست از rel="stylesheet/less" استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.
قابلیت های کلیدی LESS
در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.
دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن
متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins
و…!
در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها
متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.
/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}
به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آنها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}
Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کردهاند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفتهاند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیتها و تواناییهای دو نسخه قبل را پوشش می‌دهد و رویهای جدید در طراحی سایت بوجود میآورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب میشود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.
نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل میشود. برای دیدن کاربرد هر کدام میتوانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
