正常的CSS样式表写起来比较繁琐,用【Less 动态 样式 语言】模式来写就方便多了
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。
直接上例子
Global里都是公共的一些变量和类似于函数的东西,方便后期修改拓展以及减少重复代码,省时省力
Main里是样式主体开始里面可以直接引用Global定义的变量及函数
- /* -------------------- Global Start -------------------- */
- @bgcolor: #ae1b8d;
- @nav_bgcolor: #000;
- @nav_font: #fff;
- @popbgcolor: #666;
- @popfonthover: #fff100;
- .setSize(@width, @height)
- {
- width: @width;
- height: @height;
- overflow: hidden;
- }
- .setFont
- {
- color:@nav_font;
- font-size:12px;
- }
- .setAlpha(@ie, @nie)
- {
- opacity:@nie;
- filter:progid:DXImageTransform.Microsoft.Alpha(opacity=@ie);
- }
- /* -------------------- Main Start ---------------------- */
- .nav-ch
- {
- .setSize(950px, 25px); background:@nav_bgcolor;
- .skin-box-bd { .setSize(950px, 25px);
- .all-cats a.link{
- height:25px;
- background:@bgcolor;
- .setFont;
- line-height:25px;
- width:85px;
- border:0;
- cursor:pointer;
- span { *margin-left:5px; }
- .popup-icon { background:url(assets/p_w_picpaths/classall_icon.jpg) no-repeat; margin-top: 5px; }
- }
- .menu-list .menu a{
- height:25px;
- background:none;
- .setFont;
- border:0;
- line-height:25px;
- cursor:pointer;
- &:hover { background:@bgcolor; }
- }
- .all-cats-popup
- {
- background:@nav_bgcolor;
- border:0;
- .setAlpha(88, 0.88);
- .cat
- {
- &.cat-hd-hover { background:@popbgcolor; }
- h4 {
- font-weight:normal;
- a { color:@nav_font; }
- }
- .snd-pop-inner { background:@popbgcolor; a:hover { color:@popfonthover; } }
- }
- }
- }
- }
以上样式运行后生成以下结果:
- /* -------------------- Global Start -------------------- */
- .setFont {
- color: #ffffff;
- font-size: 12px;
- }
- /* -------------------- Main Start ---------------------- */
- .nav-ch {
- width: 950px;
- height: 25px;
- overflow: hidden;
- background: #000000;
- }
- .nav-ch .skin-box-bd {
- width: 950px;
- height: 25px;
- overflow: hidden;
- }
- .nav-ch .skin-box-bd .all-cats a.link {
- height: 25px;
- background: #ae1b8d;
- color: #ffffff;
- font-size: 12px;
- line-height: 25px;
- width: 85px;
- border: 0;
- cursor: pointer;
- }
- .nav-ch .skin-box-bd .all-cats a.link span {
- *margin-left: 5px;
- }
- .nav-ch .skin-box-bd .all-cats a.link .popup-icon {
- background: url(assets/p_w_picpaths/classall_icon.jpg) no-repeat;
- margin-top: 5px;
- }
- .nav-ch .skin-box-bd .menu-list .menu a {
- height: 25px;
- background: none;
- color: #ffffff;
- font-size: 12px;
- border: 0;
- line-height: 25px;
- cursor: pointer;
- }
- .nav-ch .skin-box-bd .menu-list .menu a:hover {
- background: #ae1b8d;
- }
- .nav-ch .skin-box-bd .all-cats-popup {
- background: #000000;
- border: 0;
- opacity: 0.88;
- filter: progid:dxp_w_picpathtransform.microsoft.alpha(opacity=88);
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat.cat-hd-hover {
- background: #666666;
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat h4 {
- font-weight: normal;
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat h4 a {
- color: #ffffff;
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat .snd-pop-inner {
- background: #666666;
- }
- .nav-ch .skin-box-bd .all-cats-popup .cat .snd-pop-inner a:hover {
- color: #fff100;
- }
less非常灵活,样式结构化,可以定义变量、函数、样式集合;可以嵌套、支持伪类
less官方网站:http://www.lesscss.net
转载于:https://blog.51cto.com/ericjiao/965669