动态CSS--less

忙了很久终于有时间来写点东西了，不知道大家有没有发现，我们在写CSS的时候总是在重复很多代码，一个相同的属性值往往要重复N次，以前我就经常想有没有什么办法能让我们不用一直重复的font-size啊color啊，直到有了LESS的出现，原来CSS还真的可以这么写的。

在写LESS的时候，我们会用到一些我们以前写CSS时没有用到的概念，比如混合（继承），变量，嵌套，运算，函数。

 less文件浏览器是解析不到的，所以我们实际用它的时候要编译让它变成浏览器所认识的CSS，后期维护的时候我们也只是修改less文件然后编译成CSS替换原来的就可以了。less是我们写CSS的一个工具，它不能代替也不能取代CSS，它只是在CSS的基础上更加了动态的特性。less比较适合用在重用性较大的网站，但是很多程序都喜欢它的书写方式。

编译less的方式只要引入了相关的JS脚本（less.js , node.js）那么它就可以在客户端，服务器端中编译，我这里用的是第三种方式：在开发的时候就把less编译成CSS然后直接引入项目中，下面我们来介绍下即时编译less的工具。

首先：介绍下编写和编译less用到的工具，先到官网上下载我们的less编译器koala。下载以后安装，打开软件点击设置选择中文，关闭打开菜单就是中文的了。

二：打开编辑器，我这里用的是sublime_text3，因为sublime_text2写less的时候总是没有反应的，装了sublime_text 3然后安装下less插件。现在我们新建一个文件保存为less后缀名。注意，等下我们编译less的时候CSS文件会放在这个less的同级目录下。

编辑器右下角是less。

然后打开我们的koala软件，把刚建好保存的less文件直接拖进去

然后返回到我们的编辑器去写less。

在koala软件中点击less文件右侧出现菜单，

有个“执行编译按”钮，点击它然后打开我们之前放置less的地方就看到编译后的CSS文件，就算这里我们不点“执行编译”的按钮，在我们把less拖进去然后在编辑器中写less并保存它是自动编译成CSS的，当书写有错误的时候也会即时的提示。这里想说下的是“输出方式”，有两种选择，一种是“normal（正常）”方式，编译后的CSS文件不压缩；"compress（压缩"）方式，编译后的CSS文件会压缩--多余的空格删掉并不换。这的选择看个人喜好。建议是选择compress方式，因为我们以后维护直接改less然后编译CSS直接放项目中使用。

三：我们现在开始写less吧

变量：可以让我们在一个地方统一管理这些值，让代码更好的维护。

变量的申明要@字符开头：

如（为了代码更容易看，我下面的输出方式选择normal。）

.less

@color:red;  申明一个颜色是红色的变量，变量名+属性值，申明变量的末尾一定要加上“；”结束。
body{background:  @color}  引用变量

编译后.css

body{background:#f00}

.less

@color:red;
.border{color: @color;border: 1px solid @color} 可以多个地方同时引用同一个变量

编译后.css

.border{color:#f00;border:1px solid #f00}

也可以把一个变量作为另一个变量的名字

.less

@color:red;
@color2:@color;
body{background: @color2 }

编译后.css

body {
  background: #ff0000;
}

重复申明同名变量后面申明会覆盖前面变量申明，所以申明的变量只能申明一次。

.less

@color:red;
@color2:@color;
@color2:blue;
body{background: @color2 }

编译后.css

body {
  background: #0000ff;  结果是蓝色
}

上面的例子我们也只是把变量用在了CSS属性值中，变量还可以用在其他的地方，如选择器的名称，属性名称，URL地址。

变量用作选择器的名称：

.less

@selectname: .box;  声明一个名为selectname的变量，它指代的是“.box”这个类。
@{selectname}{   注意这里引用的时候“@”字符要 放在外面并且变量名字放在“{}”花括号里面。
background: #000;
width: 100px;
height: 100px;
}

编译后.css

.box {
  background: #000;
  width: 100px;
  height: 100px;
}

变量用作选属性的地址；

.less

@property:font-size;  定义的时候不能属性值和变量值同时存在，只能其一，@size:font-size:18px;
                                                                                                                          body{ @size }这样的用法是不允许的。
body{
@{property}:100px;注意这里引用的时候“@”字符要 放在外面并且变量名字放在“{}”花括号里面。
}

编译后.css

body {
  font-size: 100px;
}

变量用作选URL的地址；

.less

@imgurl: "../images/01.jpg";  可以直达到它的任意级目录如@imgurl: "../images";  引用的时候background:                                                                                                                                                                  url(@imgurl/01.jpg)
body{
background: url(@imgurl)
}

编译后.css

body {
  background: url("../images/01.jpg");
}

变量不一定要先定义才能用，也可以先用了再定义，因为变量都是延时载入的。

下面两段代码是等价的

.less1

@color:red;
@color2:@color;
body{background: @color2 }

.less2

body{background: @color2 }
@color:red;
@color2:@color;

编译后.css一致

body {
  background: #ff0000;
}

我们前面说过，当声明同一个变量多次的时候，应用的时候就只会用到最后一次声明的变量。less在找变量的时候都是先从当前的作用域选择当没有找到的时候就继续往上祖先元素中寻找。这个有点像我们脚本的局部变量和全局变量，有局部就用局部没有就去全局。

.less

@size:14px;
body{
@size:16px; 
font-size: @size; 会选择离它最近的变量
 }

编译后.css

body {
  font-size: 16px;
}

定义变量的位置时候在引用前后是没有关系的，只要是当前的，它都会优先考虑。

.less

@size:14px;
body{
font-size: @size;
 @size:16px;
}

编译后.css

body {
  font-size: 16px;
}

这种优先级也适用于混合

.less

.css{background: red}
.css{background: blue}
body{
.css;
.css{background: yellow} 
}

编译后.css

.css {
  background: #ff0000; 
}
.css {
  background: #0000ff;
}
body {
  background: #ffff00; 结果为黄色
}
body .css {
  background: #ffff00;
}

为啥这里多了一些不想代码？ 那是因为没有带括号的混合都会相应的多出一条以这个混合名字为名的类（或者ID）。

注意：后面的同名变量会覆盖（重写）前面的同名变量，那么所有应用这个变量的地方都会被重写。

.less

@basesize: 16px;
@size: @basesize*10;
@basesize: 12px;
body{
font-size: @size;
.box{
font-size:  @basesize;
}
}

编译后.css

body {
  font-size: 120px;
}
body .box {
  font-size: 12px;
}

混合：把classA混合到classB，那么classB就拥有了classA中声明的所有样式。

这个有点像程序中的继承，classB继承了classA的样式，classA是父亲，classB是儿子。

混合也像函数，带参数：引用时据传入不同的参数值来改变里面的属性值 带默认值，引用时有值作为参数传入那么里面的属性值用新值，引用时没有值作为参数传入那么就用默认值；或者不带参数。

在less中运用混合，一般是把一些通用的样式声明为混合，然后在其他地方引用这个混合。

不带参数的混合

.less

.css(){    混合名字的前面要带“.”或者“#”都是可以 ，分别是类选择器和ID选择器。
background: yellow;
border: 5px solid #000;
}
body{
.css(); 引用的时候可以带括号也可以不带括号，建议都带上。
}

编译后.css

body{background:#ff0;border:5px solid #000}、

这里要说明下的是

声明混合的时候不带括号的情况

.less

.css{   不带括号的声明
background: yellow;
border: 5px solid #000;
}
body{
.css(); 引用的时候带不带括号结果一样
}

编译后.css

.css {
  background: yellow;
  border: 5px solid #000;
}
body {
  background: yellow;
  border: 5px solid #000;
}

会发现body同样拥有了混合名字为.css的所有样式，唯一不同的是多了一个以混合名字为名的类，当混合名字为符号”#“的时候就做了一个以混合名字为名的ID。

#css {    以混合名字为名的ID。
  background: yellow;
  border: 5px solid #000;
}
body {
  background: yellow;
  border: 5px solid #000;
}

当我们想用混合里的属性但又不想多出一个样式，带上括号。

带参数不带默认值的混合

.less

.css(@color){   声明混合时候给一个名为color的变量作为参数
background: @color  里面的用参数作为它的属性值
}
body{
.css(red) 引用的时候传入个新值作为混合.css()的参数，因为是不带默认值并且是需要参数的混合，引用时不传入参数就会报错。
}

编译后.css

body {
  background: #ff0000;
}

带参数带默认值的混合 

.less

.css(@color:blue){  在参数的后面带上字符“：”并且在后面给上默认值。当引用的时候没有给混合传入参数的情况下                                                                         就会用这里的默认值作为它里面的属性值

      background: @color
}
body{
.css()   应用的时候可以给值或参数不给参数，有参数即用新值，没有则用默认值
}

编译后.css

body {
  background: #0000ff;
}

带多个参数的时候用“，”或者用“；”分开，建议用“；”

.less

.css(@color:blue;@color2:red;){ 注意了多个参数的时候变量的“；”要改为“，”，最后一个参数可以不给。
background: @color;
border:10px solid  @color2;
}
body{
.css(blue)
}

编译后.css

body {
  background: #0000ff;
  border: 10px solid #ff0000;
}

@arguments

当有很多个参数的时候，我们引用的时候又不想一个一个参数写这样我们就可以用@arguments这个变量代替所有的参数

.less

.css(@border:10px,@color:red,@type:solid,){
border: @arguments; 把所有的参数包含进来，给新值的时候要注意按照声明参数时的顺序
}
body{
 .css 
}

编译后.css

body {
  border: 10px #ff0000 solid;   用的是混合的默认值
}

命名空间：

有的时候我们想把一些样式分成单独的一个模块，其他地方不能使用，也防止了和其他地方的样式有冲突。

.less

#outwarp{   最外层括号可加可不加，同名ID都不会出现在编译的CSS文件中，但是里面的不加括号就会出现。
.inner1(){
font-size: 10px;


}
.inner2(){
font-size: 20px;
&:hover{
font-size: 202px;
}
.inner3(){
font-size: 30px;
.inner4(){
font-size: 40px;
}
}

}
}
body{
#outwarp .inner1();
.box1{
#outwarp .inner2(); 应用的上级不能给括号
.box3{
         #outwarp .inner2.inner3 .inner4();应用的时候必须一级级的把祖先写在前面并且都不能加括号

}
}
.box2{
#outwarp  .inner2 .inner3();
}
}

编译后.css

body {
  font-size: 10px;
}
body .box1 {
  font-size: 20px;
}
body .box1:hover {
  font-size: 202px;
}
body .box1 .box3 {
  font-size: 40px;
}
body .box2 {
  font-size: 30px;
}

!impotant关键字

.less

.css(){
background: #000;
font-size: 12px;
}
body{
.css() !important; 在应用的时候加上!important关键字，那么混合里面的每条规则都会添加上!important;
}

编译后.css

body {
  background: #000 !important;
  font-size: 12px !important;
}

也可以在写混合的时候单独给一条规则加上!important;

.less

.css(){
background: #000 !important;
font-size: 12px;
}
body{
.css() 
}

编译后.css

body {
  background: #000 !important;
  font-size: 12px;
}

嵌套：这个就有点像我们平常写CSS的后代选择器，用less就会使它更具有模块化维护的时候也很清晰，因为它是和HTML的结构一样。

.less

body{
background: #000; 
.border{background: red;width: 100px;height: 100px} HTML的body建一个类为.border的div。
}

编译后.css

body {
  background: #000;
}
body .border {
  background: red;
  width: 100px;
  height: 100px;
}

&符号用来代替当前元素的父元素

.less

@color1:red;
@color2:yellow;
body{ 
.border{
background: @color1;
width: 100px;
height: 100px;
    &:hover{   这里的&符号代替的是类border
   background:  @color2;
       }
}
}

编译后.css

body .border {
  background: #ff0000;
  width: 100px;
  height: 100px;
}
body .border:hover {
  background: #ffff00;
}

模式匹配  有的时候我们想写好几条混合，然后后面引用的时候根据传入的参数个数和参数值来确定用哪个混合规则。这个有点像Java里面的方法重载overLoad（一个类中可以定义有相同的名字，但参数（个数，类型）不同的多个方法。调用时，会根据不同的参数选择对应的方法，只要这些方法在调用的时候编译器能区分开来不会造成混淆，就构成重载）

根据传入参数个数匹配混合

.less

.mixin(@color){   匹配一个参数
background: @color;
}
.mixin(@color,@color2){ 匹配两个参数
color: @color ;
background:  @color2;
width: 100px;
height: 100px;
}
body{
.mixin(red)  一个参数匹配第一条.mixin
}
.border{
.mixin(yellow,blue) 匹配第二条.mixin
}

编译后.css

body {
  background: #ff0000;  
}
.border {
  color: #ffff00;
  background: #0000ff;
  width: 100px;
  height: 100px;
}

带有常量的匹配混合 只接受变量作为第一个参数才能匹配

.less

.mixin (dark, @color) {
border:10px solid darken(@color, 10%);
}
body{
.mixin(dark,red)  要满足两个条件第一个是dark 第二个是颜色值才匹配。
}

编译后.css

body {
  border: 10px solid #cc0000;
}

运算：less中可以实现一些简单的运算比如 + - * /，可以对变量，属性值，颜色值进行运算。

.less

@px:10px;
body{border:@px+20 solid red;}  less能自动匹配单位，这里是PX

编译后.css

body {
  border: 30px solid #ff0000;  结果是10+20=30px
}

颜色值运算

.less

@color:#842210; 最好是用16进的因为加减的时候会方便些 ，呵呵 ，你可以试试@color:rgb(255,232,255);
body{background: @color+2 }

编译后.css

body {
  background: #862412;
}

引导

转载于:https://www.cnblogs.com/xiaominwu/p/4348034.html