cancerr
سه شنبه 29 بهمن 1392, 18:54 عصر
طراحی سایت با نمایش صحیح در تمام مرورگرها جزء چالشهای اصلی برنامه نویسان وب میباشد. این چالش با گسترش محبوبیت تبلتها و موبایلهای هوشمند با اندازه صفحه های گوناگون عمیقتر و پیچیده تر شد. کلید اصلی حل معما استایلهای وب سایت میباشد اما متاسفانه عدم قابلیت کد نویسی در CSS باعث طولانی شدن مدت اجرای پروژه و ایجاد استایلهای حجیم میشود. در این مقاله فریم ورک LESS را شرح خواهم داد که قابلیت کد نویسی را به CSS اضافه میکند.
به طور خلاصه فریم ورک LESS استایلهای داینامیکی که برنامه نویس آنها را تهییه کرده است را به فایلهای CSS ترجمه میکند. به عبارت دیگر شما در پروژه خود یکسری فایل با پسوند less خواهید داشت که حاوی استایلهای صفحات وب با استفاده از دستورات less میباشند که پس از ترجمه این فایلها نتیجه نهایی فایلهای CSS بهینه شده با حداقل کد برای تمامی مرورگرها و فشرده شده خواهد بود. از ویژگیهای مهم LESS میتوان به کوتاه شدن کد، سهولت در انتخاب المنت ها وهمچنین پیدا کردن سریع استایل هر المت اشاره کرد.
نکته اصلی در پیاده سازی موفق LESS در پروژه های طراحی سایت کامپایلر آن میباشد. فایلهای LESS به دو صورت میتوانند کامپایل شوند. اولین حالت کامپایل در سرور میباشد به این صورت که سرور به ازای هر درخواست فایلهای LESS را کامپایل و CSS خروجی را به کلاینت میفرستد همچنین اکثر کامپایلرهای سمت سرور LESS قابلیت cache کردن خروجی CSS برای استفاده بهینه از منابع سرور را دارا هستند. دومین حالت کامپایل در کلاینت میباشد، در این روش سورس کدهای LESS به همراه کامپایلر به کلاینت فرستاده میشود و این وظیفه کلاینت هست که کدها را کامپایل و استایلها را بر روی صفحات وب اعمال کند. استفاده از تکنیک دوم بسبب بالا رفتن حجم صفحات وب و همچنین بالا رفتن مدت زمان اعمل استایلها بر روی HTML توصیه نمی شود. از مشهورترین کامپایلرهای سمت سرور LESS میتوان به Rhino، node.js و dotLess اشاره کرد. در صورتی که مایل به کامپایل LESS به CSS به صورت دستی میباشید کامپایلرهایی با رابط کاربر گرافیکی در این صفحه (https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js) فهرست شده اند.
پیاده سازی LESS در پروژه های ASP.NET
در ابتدا باید کامپایلر dotLess را بر روی پروژه خود نصب کنید. که برای این منظور راحتترین راه استفاده از Nuget میباشد. کافیست دستور Install-Package dotless را در Package Manager Console وارد کنید و یا با استفاده از رابط گرافیکی Nuget به دنبال dotLess بگردید و آن را نصب کنید. همچنین میتوانید dll های آن را از این لینک (https://github.com/dotless/dotless)دانلود کنید و به صورت دستی به پروژه اضافه کنید.
در پست های بعدی به آموزش کد های LESS می پردازم همچنین برای پیاده سازی LESS (http://psi-co.net/blog/posts/dynamic-styling-using-less) دستی می توانید از سایت منبع این مقاله استفاده کنید .
سوالات و مشکلات خودتون رو می تونید در همین تاپیک ارسال کنید
به طور خلاصه فریم ورک LESS استایلهای داینامیکی که برنامه نویس آنها را تهییه کرده است را به فایلهای CSS ترجمه میکند. به عبارت دیگر شما در پروژه خود یکسری فایل با پسوند less خواهید داشت که حاوی استایلهای صفحات وب با استفاده از دستورات less میباشند که پس از ترجمه این فایلها نتیجه نهایی فایلهای CSS بهینه شده با حداقل کد برای تمامی مرورگرها و فشرده شده خواهد بود. از ویژگیهای مهم LESS میتوان به کوتاه شدن کد، سهولت در انتخاب المنت ها وهمچنین پیدا کردن سریع استایل هر المت اشاره کرد.
نکته اصلی در پیاده سازی موفق LESS در پروژه های طراحی سایت کامپایلر آن میباشد. فایلهای LESS به دو صورت میتوانند کامپایل شوند. اولین حالت کامپایل در سرور میباشد به این صورت که سرور به ازای هر درخواست فایلهای LESS را کامپایل و CSS خروجی را به کلاینت میفرستد همچنین اکثر کامپایلرهای سمت سرور LESS قابلیت cache کردن خروجی CSS برای استفاده بهینه از منابع سرور را دارا هستند. دومین حالت کامپایل در کلاینت میباشد، در این روش سورس کدهای LESS به همراه کامپایلر به کلاینت فرستاده میشود و این وظیفه کلاینت هست که کدها را کامپایل و استایلها را بر روی صفحات وب اعمال کند. استفاده از تکنیک دوم بسبب بالا رفتن حجم صفحات وب و همچنین بالا رفتن مدت زمان اعمل استایلها بر روی HTML توصیه نمی شود. از مشهورترین کامپایلرهای سمت سرور LESS میتوان به Rhino، node.js و dotLess اشاره کرد. در صورتی که مایل به کامپایل LESS به CSS به صورت دستی میباشید کامپایلرهایی با رابط کاربر گرافیکی در این صفحه (https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js) فهرست شده اند.
پیاده سازی LESS در پروژه های ASP.NET
در ابتدا باید کامپایلر dotLess را بر روی پروژه خود نصب کنید. که برای این منظور راحتترین راه استفاده از Nuget میباشد. کافیست دستور Install-Package dotless را در Package Manager Console وارد کنید و یا با استفاده از رابط گرافیکی Nuget به دنبال dotLess بگردید و آن را نصب کنید. همچنین میتوانید dll های آن را از این لینک (https://github.com/dotless/dotless)دانلود کنید و به صورت دستی به پروژه اضافه کنید.
در پست های بعدی به آموزش کد های LESS می پردازم همچنین برای پیاده سازی LESS (http://psi-co.net/blog/posts/dynamic-styling-using-less) دستی می توانید از سایت منبع این مقاله استفاده کنید .
سوالات و مشکلات خودتون رو می تونید در همین تاپیک ارسال کنید