| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
9年前发布

less编写css代码

原文 http://segmentfault.com/a/1190000004137275


css编写样式表我想大家应该都已经熟悉了。我在这里说的是使用 sublime 的插件进行less样式的编写,使用起来比原本的直接编写css样式,更加的简单与方便,css代码也变得更加的整齐。

sublime上直接使用less编写css代码

准备

  1. 电脑上的sublime已经安装了Less2Css插件。

  2. 电脑上安装了nodejs,并全局安装lessc插件。

使用(简单)

  1. 直接新建一个aa.less的文件,在其中编写less的代码。

  2. ctrl+s保存下,在目录中出现aa.css文件可以直接在页面中使用。

less的简单介绍

什么是 less

LESSCSS是一种动态样式语言,属于css预处理语言的一种,它使用类似css的语法,为css的赋予了动态语言的特性,如变量,继承,运算,函数等,更加方便css的编写和维护。

变量

变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。

@color:#4d926F;  #header{     color:@color;  }  h2{     color:@color  }  //编译后--  #header{     color:#4d926F;  }  h2{     color:#4d926F;  }

混合

可以将一个定义好的classA 轻松的引入到另外一个classB中。

.rounded-corners (@radius: 5px) {          -webkit-border-radius: @radius;          -moz-border-radius: @radius;          -ms-border-radius: @radius;          -o-border-radius: @radius;          border-radius: @radius;      }         #header {          .rounded-corners;      }      #footer {          .rounded-corners(10px);      }      // 编译后 --       #header {          -webkit-border-radius: 5px;          -moz-border-radius: 5px;          -ms-border-radius: 5px;          -o-border-radius: 5px;          border-radius: 5px;      }      #footer {          -webkit-border-radius: 10px;          -moz-border-radius: 10px;          -ms-border-radius: 10px;          -o-border-radius: 10px;          border-radius: 10px;      }

嵌套(最常使用)

我们可以在一个选择器中嵌套一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

#header{        h1{          font-size:26px;          font-weight:bold;        }        p{          font-size:12px;          a{            text-decoration: none;            &:hover{              border-width: 1px;            }           }        }     }     // 编译后 --     #header h1 {      font-size: 26px;      font-weight: bold;     }     #header p {      font-size: 12px;     }     #header p a {      text-decoration: none;     }     #header p a:hover {      border-width: 1px;     }

函数和运算

运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值直接的复杂关系。

@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%);     }     // 编译后--     #header {          color: #333;          border-left: 1px;          border-right: 2px;     }     #footer {          color: #114411;          border-color: #7d2717;     }

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1450172060516.html
CSS 前端技术 LESS