以文本方式查看主题

-  ╋艺 镇╋  (http://wdystv.com/bbs/index.asp)
--  ┣◇网站建设&Web语言  (http://wdystv.com/bbs/list.asp?boardid=4)
----  动态样式类库.less for .net  (http://wdystv.com/bbs/dispbbs.asp?boardid=4&id=3111)

--  作者:admin
--  发布时间:2011/7/5 17:31:27
--  动态样式类库.less for .net

我们来看看这个从ruby世界中移植过来的动态样式类库 dotlesscss(或者less.net)。目前它支持.net3.5以及.net3.5以上版本。

支持变量

允许将一个样式变量定义到一个变量之中,然后在其中地方引用,常见可以用来定义全局字体样式,链接样式,请看一下代码:

[css]
@brand_color: #4D926F;

#header {
  color: @brand_color;
}  

h2 {
  color: @brand_color;
}
[/css] 

支持变量数值运算

支持基本加减乘除等操作。 [css]
@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}

#footer {
  color: (@base-color + #111) * 1.5;
}
[/css]

样式类混用

在定义样式时,可以想引用样式变量那样,引用其他样式类。

[css]
.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}#footer {
  .rounded_corners;
}
[/css] 

嵌套规则

嵌套定义样式规则。[css]
#header {
  color: red;
  a {
       font-weight: bold;
       text-decoration: none;
    }
}
[/css]  

相关配置

1. 下载类库最新版本

下载地址:http://www.dotlesscss.com/ 


 2. 添加应用类库到项目中

Add a= 


 3. 在web.config配置文件中,添加新的HttpHandler节点来处理.less文件

在配置文件中,找到HttpHandlers节,添加下面的代码:

 [xml]
<add type=”
dotless.Core.LessCssHttpHandler
,dotless.Core” validate=”false”
path=”*.LESS” verb=”*”/>
[/xml]


 4. 如果要配置less.net,那么添加一个配置节点sections到配置文件中 (可选)

在web.config找到 “configSections” 节点,添加下面的代码: [xml]
<section name=”dotless”
type=”dotless.Core.configuration.
DotlessConfigurationSectionHandler
,dotless.Core” />
[/xml]

现在,您可以配置less.net了,启用压缩功能,启用缓存功能,那么就可以这样来配置:[xml] 
<dotless
minifyCss=”false”
cacheEnabled=”true” />
[/xml]


 5. 现在开始来使用less.net吧

如果是升级,则修改已存在的css文件,将起后缀.css修改为.less;要建立新的样式文件,则在建立时,修改后缀名为.less即可。让样式也敏捷起来吧!




http://blog.b2xi.cn/?p=125