Implement the project skin replacement function using CSS Preprocessing Technology (less css + asp.net mvc4.0 bundle)

I. Background: As the user experience is becoming more and more important today, skin-changing functions are becoming more and more important. A web system user can choose a system topic that he or she like. In the eyes of the user, there will still be some points. We are very happy that easyui v1.3.4 has five skins with default gray black bootstrap metro, but it does not provide a complete css framework like bootsubgraph, and does not provide all the css required by the project, therefore, you also need to write some css outside the control. There is no problem with the easyui control when skin is changed for the system. The problem is how to skin over the css that you have compiled. Of course, the simplest way is to write a custom css for each topic and load it in the project. However, I think this is a bit cool. When you add new css or modify css, You need to modify N sets of css at the same time. Each topic corresponds to one copy, in addition to the five default themes, easyui also has other themes or we can customize themes. It is even more unrealistic to modify css. So we thought of dynamic css, that is, css preprocessing technology. Ii. CSS pre-processing technology has been very mature. Common Pre-processing frameworks include: 1. Less Official Website: http://lesscss.org/ 2. Sass Official Website: http://sass-lang.com/ 3. Official Stylus Website: http://learnboost.github.io/stylus/ I only studied less, and the latter two just learned about it, so here I still use less to implement it. Let's first look at the convenience brought by less. 1. We can use Less to write css with variables, you can easily implement the skin replacement function (just change the value of the variable) by copying the code @ the-border: 1px; @ base-color: #111; @ red: #842210; # header {color: (@ base-color * 3); border-left: @ the-border; border-right: (@ the-border * 2 );} # footer {color: (@ base-color + #003300); border-color: desaturate (@ red, 10% );} copy code 2. Less provides many useful functions, such as lighten darken fadein fadeout... For example, set the font A color to # 1382CE, and font B to the same color as A, but the color is light: copy the code @ fontcolor: # 1382CE ;. font1 {color: @ fontcolor ;}. font2 {color: lighten (@ fontcolor, 30%);} copy code 3. You can also define your own less function. For example, we can write a css with a gradient background, we can define a gradient function as follows: copy the code. gradient (@ color: # F5F5F5, @ start: # EEE, @ stop: # FFF) {background: @ color; background:-webkit-gradient (linear, left bottom, left top, color-stop (0, @ start), color-stop (1, @ stop); background:-ms-linear-gr Adient (bottom, @ start, @ stop); background:-moz-linear-gradient (center bottom, @ start 0%, @ stop 100%); background: -o-linear-gradient (@ stop, @ start); filter: e (% ("progid: DXImageTransform. microsoft. gradient (startColorstr = '% d', endColorstr =' % d', GradientType = 0) ", @ stop, @ start ));} copy the code and use it like this :. head-north {. gradient (colorDefault, colorFrom, colorTo. 3. The idea of implementing system skin replacement is of course not just about introducing less, but it is far from that simple. We know that since it is dynamic css, it must be compiled, less is just about compiling and generating css code, so there is a problem: when to compile 1. Use compilation tools such as koala and SimpleLess, compile the file in the project before release. 2. Compile the file in front-end parsing. You need to introduce less in the project. js 3. Dynamic parsing in the background. There are many compilation engines in the java environment ,. net, it seems that I have found a dotless, And the implementation is not complete. It can only be said that it is part of the implementation of less v1.5. First, let's analyze the three methods. The first method is to use a compilation tool, that is, I have to do more things to release a project. I have always been lazy and liked simple things. What should I do if I forget it, I always think it is a bit more. The second kind of front-end real-time Parsing is an ideal kind of convenience and convenience, but one problem is the efficiency of the front-end, more will definitely affect the efficiency. Third, dynamic compiling in the background, caching after the background is compiled only once, has basically no impact on the server. This is very good. The problem is that my framework is. net is not fully implemented by dotless, but we may not necessarily use all of the less functions. basic functions are enough, such as conditional judgment and other advanced functions, we can pre-process it before processing, and then parse the less class library. Okay, so I chose the third type of dynamic parsing in the background. Specific ideas: 1 when the former user selects themeto obtain the easyui.css file and obtains the theme-related variables @ body-background-color or @ body-text-color based on features, these variables are often used in my custom css and it is easy to obtain them. 2. With these variables, we can use theme. write custom css in less. 3. Use the bundle in asp.net mvc4.0 to process less. 4. Output css by page reference. 4. Implementation. 1. Introduce the dotless class library. 2. Define variables in easyui, the following Variable copy code should be included:/* common */@ border-color @ border-radius @ font-size @ shadow-background-color @ mask-background-color @ toolbar-background- color @ toolbar-border-color @ split-proxy-color/* Header */@ header-background-color @ header-text-color @ header-gradient-used @ header-gradient-from @ heade R-gradient-to/* body */@ body-background-color @ body-text-color/* grid */@ grid-header-background-color @ grid-header- gradient-from @ grid-header-gradient-to @ cell-border-color @ alt-background-color/* state */@ selected-background-color @ selected-text-color @ selected-border-color @ hover-background-color @ hover-text-color @ hover-border-color @ invalid-background-color @ invalid-border-color @ invalid-text -color/* menu */@ m Enu-background-color @ menu-text-color @ menu-border-color/* button */examples file and parse this file to assign values to these less variables. 3. Customize your own dynamic css, below is theme in my project. the less File Fragment copy code. z-body {background: @ body-background-color ;}. z-toolbar ,. z- Olbar-dialog {border-color: @ border-color; background: @ header-background-color ;}. z-txt {border-color: @ border-color; background: white ;}. head-left ,. head-right ,. head-right a {color: $ when (@ theme = gray, default, black, bootstrap | # fff | #000 );}. head-north {. gradient (@ selected-background-color, @ header-background-color, @ selected-background-color );}. head-south ,. head-south a {background: @ header-backgro Und-color; color: lighten (@ body-text-color, 30% );}...... Copy Code 4. BundleConfig in the project. register the bundles replication code using System; using System in RegisterBundles in cs. IO; using System. web; using System. web. hosting; using System. web. mvc; using System. web. optimization; using Zephyr. utils; namespace Zephyr. web. mvc {public class BundleConfig {public static void RegisterBundles (BundleCollection bundles) {var dirBase = new DirectoryInfo (HttpContext. current. server. mapPath (string. format ("~ /Content/js/easyui/{0}/themes ", AppSettings. easyuiVersion); var dirs = dirBase. getDirectories (); foreach (var dir in dirs) {if (dir. name = "icons") continue; var theme = dir. name; var themeBundle = new Bundle (string. format ("~ /Content/css/theme/{0} ", theme). Include ("~ /Content/css/less/elements. less ","~ /Content/css/less/theme. less "); themeBundle. transforms. add (new EasyuiLessTransform (theme); themeBundle. transforms. add (new LessTransform (); themeBundle. transforms. add (new CssMinify (); bundles. add (themeBundle) ;}}} copy the code. Here, three bundletransforms are added to the bundle Transforms, here, EasyuiLessTransform is my processing of easyui variables and custom condition judgment $ when. LessTransform calls the dotless library to parse less code and copy the code using System; using System. web. optimization; usin G dotless. core; namespace Zephyr. web. mvc {public class LessTransform: IBundleTransform {public void Process (BundleContext context, BundleResponse response) {var compiled = Less. parse (response. content); if (string. isNullOrEmpty (compiled) throw new Exception ("the syntax in the less file is incorrect! "); Response. content = compiled; response. contentType = "text/css" ;}} copy the code. The third CssMinify is System. web. obfuscation compression for css Under Optimization. 5. Reference in the page. On the razor page, you only need the following code to @ Styles. Render ("~ /Content/css/theme/"+ AppLoginer. Theme)