افزودن dotLess CSS در MVC
شنبه 18 اردیبهشت 1395در این مقاله نحوه ی اضافه کردن dotLess CSS framework در یک پروژه MVC بر اساس وراثت، Arithmetic ، متغیرها و ... در stylesheet ها آموزش داده میشود.
مزایا
1.این قابلیت باعث میشود تا CSS بتواند رفتارها و ویژگی های داینامیک خود مانند Nesting ، متغیرها ، توابع ریاضی ، توابع عملیاتی ، Mixinهای قابل استفاده مجدد ، فضای نام ها و ... توسعه دهد.
2.کار با CSS را آسان میکند.
3. این قابلیت ، امکان استفاده مجدد از کامپوننت ها را میدهد.
4.همچنین باعث میشود تا حجم فایل CSS کاهش پیدا کند که باعث افزایش سرعت در هنگام اجرا میشود.
اجرای LESS سمت Client
LESS هم سمت server و هم سمت Client قابل اجرا میباشد. برای اجرا شدن سمت clinet باید سه مرحله زیر انجام شود.
1.فایل .less باید به پروژه اضافه شود و در تگ LINK ارجاع داده شود.
2.خصوصیت rel موجود در تگ LINK به rel="stylesheet/less" ارتقاء داده شود.
3. یک reference از CND به فایل مربوط به جاوا اسکریپ LESS اضافه شود.
بروز رسانی و ارتقاء rel value به "stylesheet/less" بسیار مهم است چرا که کتابخانه ی LESS برای اجرا به rel value احتیاج دارد. فایل مورد نظر یکبار پردازش میشود و rel value را با نام "stylesheet/less" دریافت میکند. Header صفحه ی شما باید به صورت زیرخواهد بود.
1. <linkhref="Content/sample.less"rel="stylesheet/less"/> 2. <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
در این مرحله باید، در داخل فایل sample.less چند خط کد مینویسیم تا اطمینان حاصل کنیم که فایلی که ایجاد کرده ایم به درستی عمل میکند.
کد مربوط به فایل Less code :
1. @color: #4D926F;
2. h3 {
3. color: @color;
4. }
کد HTML :
1. <!DOCTYPEhtml> 2. <html> 3. 4. <head> 5. <title></title> 6. <meta charset="utf-8" /> 7. <link href="Content/sample.less" rel="stylesheet/less" /> 8. <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"> 9. </script> 10. </head> 11. 12. <body> 13. <h3>This is Santosh!</h3> 14. </body> 15. 16. </html>
خروجی :
با روشی مشابه میتوانید از سایر رفتارهای داینامیک نیز به خوبی استفاده کنید.
استفاده از Nesting
کد dotLess CSS
1. body {
2. .header
3. {
4. h1
5. {
6. font - size: 28 px;
7. }
8.
9. h2
10. {
11. font - size: 21 px;
12. }
13. }
14. }
کد بالا به صورت زیر ترجمه خواهد شد :
body.headerh1
{
font - size: 28 px;
}
body.headerh2
{
font - size: 21 px;
}
متغیرها
Less code :
1. @color: #4D926F;
2. h3 {
3. color: @color;
4. }
کد بالا به صورت زیر ترجمه خواهد شد :
1. h3
2. {
3. color: #4D926F;
4. }
توابع ریاضی
:Less code
1. @base - size: 10 px;
2.
3. .small
4. {
5. font - size: @base - size;
6. }
7.
8. .medium
9. {
10. font - size: @base - size * 1.2;
11. }
12.
13. .large
14. {
15. @_large: @base - size * 1.5;
16. font - size: @_large;
17. line - height: @_large + 4;
18. }
کد بالا به صورت زیر ترجمه خواهد شد :
1. .small
2. {
3. font - size: 10 px;
4. }
5. .medium
6. {
7. font - size: 12 px;
8. }
9. .large
10. {
11. font - size: 15 px;
12. line - height: 19 px;
13. }
توابع عملیاتی :
Less code:
1. h1
2. {
3. color: rgb(230, 140, 230);
4. color: darken(#123456,10%);
5. color: fade(# 123456, 50 % );
6. }
کد بالا به صورت زیر تعریف میشود
1. h1
2. {
3. color: #e68ce6;
4. color: #091a2c;
5. color:rgba(18, 52, 86, 0.5);
6. }
Mixinهای قابل استفاده مجدد
Less code:
1. .radius(@size: 5 px)
2. {
3. -webkit - border - radius: @size; - moz - border - radius: @size;
4. border - radius: @size;
5. }
6. .box
7. {
8. .radius;
9. }
10. .circle
11. {
12. .radius(15 px);
13. }
کد بالا به صورت زیر ترجمه میشود
1. .box
2. {
3. -webkit - border - radius: 5 px; - moz - border - radius: 5 px;
4. border - radius: 5 px;
5. }
6. .circle
7. {
8. -webkit - border - radius: 15 px; - moz - border - radius: 15 px;
9. border - radius: 15 px;
10. }
وارد کردن(Import) فایل های CSS به فایل Less
اگر که یک فایل CSS با حجم بالا و پیچیده دارید و میخواهید آنرا به چندین فایل CSS کوچکتر تبدیل کنید میتوانید به جای این کار(تبدیل فایل بزرگتر به چندین فایل کوچکتر) فایل CSS خود را به یک فایل less انتقال دهید. (Import کنید). فایل اصلی در مکانی که import شده است قرار دارد و نیاز است که webpage از این فایل به سایرstyle moduleهای دیگر متصل شود.
Less code:
1. @import (less) "Content/Site.css";
2. /*@import url('Site.css');*/
کد بالا به صورت زیر ترجمه خواهد شد :
1. @import "Content/Site.css";
اجرا Less سمت Server
از منو Tools گزینه ی NuGet Package Manager و سپس گزینه ی Manage NuGet Package for Solution را انتخاب کنید. Command که در زیر آمده است را در Package Manage Console وارد میکنیم.
PM> Install-Package dotLess
این command جدیدترین نسخه از dotLessNuGet packages را برای برنامه شما نصب میکند.
نکته: شما میتوانید dotLess را هم با انتخاب گزینه Package Manager Console و هم از طریق انتخاب گزینه ی Manage NuGet Package for Solution در برنامه نصب کنید.
پس از اینکه کتابخانه dotLess با موفقیت نصب شد، شما میتوانید reference مربوط به جاوا اسکریپ CDN را از برنامه خود حذف کنید. و اطمینان حاصل کنید که تگ LINK بوسیله ی حذف صفت less بروز رسانی شده است.
کد مربوطه به صورت زیر خواهد بود :
1. <link href="Content/sample.less"rel="stylesheet"/>
پس از اینکه پلاگین “Install-Package dotLess” بوسیله ی Package Manager Consoleیا Manage NuGet Package for Solution نصب شد، پکیج نصب شده، چند خط کد را در فایل مربوط به Web.Config اضافه میکند که باعث میشود که HTTP handler در فایل Web.Config برای پشتیبانی از درخواست های .less تعریف شود.(به قطعه کد زیر مراجعه کنید. )
1. <configSections> 2. <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler, dotless.Core" /> 3. </configSections> 4. <dotlessminifyCss="false" cache="true" web="false" strictMath="false" /> 5. 6. <system.webServer> 7. <handlers> 8. <addname="dotless" path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler,dotless.Core" resourceType="File" preCondition="" /> 9. </handlers> 10. </system.webServer>
قطعه کد نمونه همراه با خروجی :
کد زیر را در Razor layoutاضافه کنید.
<!DOCTYPEhtml>
2. <html>
3.
4. <head>
5. <meta charset="utf-8" />
6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
7. <title>@ViewBag.Title - My ASP.NET Application</title>
8. @Styles.Render("~/Content/css") @Styles.Render("~/Content/less") @Scripts.Render("~/bundles/modernizr")
9. </head>
10.
11. <body>
12. --- --- ---
13. </body>
14.
15. </html>
16.
17. Index.cshtml @{ ViewBag.Title = "Home Page"; Layout = "~/Views/Shared/_Layout.cshtml"; }
18. <div class="row">
19. <h3>Hello Santosh</h3>
20. </div>
خروجی :
بهترین ویژگی در dotLess ، کاهش حجم فایل CSS بوسیله ی minifyCss attribute به صورت خودکار میباشد.
اگر مقدار این Attribute در Web.config برابر با True باشد هنگام اجرای web application/website ، شما میتوانید کاهش حجم در CSS را مشاهده کنید.
1. <dotlessminifyCss="false" cache="true"web="false"strictMath="false" />
اگر مقدار minifyCss attribute برابر با "false" باشد خروجی به صورت زیر خواهد بود :
اگر مقدار minifyCss attribute برابر با "true"باشد خروجی به صورت زیر خواهد بود :
ارتقاء عملکرد در فایل های dotLess در پروژه های MVC
Bundle ها یک راه آسان برای ادغام و کاهش حجم منابع در برنامه ی شما میباشد (مانند فایل های جاوا اسکریپ و CSS stylesheets). اما استفاده از پلاگین “System.Web.Optimization.Less” با روش بهتری عملکرد برنامه ی شما را ارتقاء میدهد.
بنابراین به Package Manager Console بر میگردیم و پلاگین زیر را نصب میکنیم.
PM> Install-Package System.Web.Optimization.Less
و Bundle خود را در مکانی مناسب و با استفاده از BundleConfig.csاضافه کنید.
1. public class BundleConfig
2. {
3. public static void RegisterBundles(BundleCollection bundles)
4. {
5. // NOTE: existing bundles are here
6.
7. bundles.Add(newLessBundle("~/Content/less").Include("~/Content/*.less"));
8. }
9. }
این LessBundle به برنامه ی شما این امکان را میدهد تا هنگام اجرا در <compilation debug="false" /> mode، فایل ها با یکدیگر ترکیب شوند و حجم شان کم شود و همچنین از قابلیت انتقال کد Less به CSS را پشتیبانی میکند. نیازی نیست هر بار که یک فایل جدید به برنامه اضافه میکنید layout را update کنید.
توسعه در مقایسه با چرخه ی تولید
در توسعه برنامه ها ، از یک handler برای تبدیل dotLess stylesheet ها استفاده میکنیم. این کار به ما اجازه میدهد تا تغییرات مورد نیاز بر روی dotLess CSS اعمال شود و در نتیجه به راحتی بر روی صفحه وب بارگذاری شود.
اما در مرحله تولید ، استفاده از handler را کنار میگذاریم و از نسخه stylesheet که قبلا اصلاح شده و حجم آن نیز کاهش یافته است، استفاده میکنیم. این نسخه ی تغییر یافته و اصلاح شده هر بار که پروژه built میشود بروز رسانی میشود.
- ASP.net MVC
- 1k بازدید
- 5 تشکر