css-Less

• 介绍
• 语法

介绍

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增长了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护,提升开发效率。

但正由于它是预处理语言，所以不能直接被使用，须要进行编译后才能够。

less须要 nodejs支持。

安装： > npm install -g less

查看:    > lessc

编译

命令编译： 

> lessc  aaa.less aaa.css

@charset "utf-8";
@bgColor:red;
body{
  background-color:@bgColor;  
}

html页面引入：

<link rel="stylesheet"  href="index.css" type="text/css" />

或

<style type="text/css" >
	@import url("index.css");
</style>

Koala外部编译器可编译Sass和Less文件：

安装地址：http://koala-app.com/index-zh.html

在内部将less文件放入到一个less文件夹下，同时创建css文件夹，则会自动将less文件转化为css文件。

因编译后的css，若是压缩，Output Style:Compress, 若是有问题很差跟踪，所以在设置中创建map地址映射（资源地图文件）。 》Setting -》Less -》Default Options -》Sourse Map.

这样就会在页面css跳出时，直接映射到less文件上。

Webstorm 内置编译器：

File-》Setting -》 Tools -》 File watcher -》 Add Less（添加Less）

注意：npm已经添加有less命令，同时 注意output路径中默认是编译到同级目录下，所以若是不一样级注意 ../css/*****

语法：

•  注释
•  变量
•  混合（mixins）
•  模式匹配
•  颜色函数
• 嵌套
• 运算

 变量

@charset "utf-8";
@bColor: green;
@boderColor: red;
@imgurl: "../img";
body{
    background-color:@bColor;
}
div{
    border: solid 1px @boderColor;
}
div{
    background-image: url("@{imgurl}/01.png");
}

 

 变量使用

》@变量名： 变量值；   在使用的地方 @变量名， 注意变量值应为css内容。

》@变量名： 拼接字符串；      "@{变量名}拼接内容"  注意 要为{}括号

注释

　　// 单行注释，编译后不保留，因css自己不支持 //

      /**/ 多行注释，编译后保留

混合

    犹如js函数通常，将一部分css，包裹在一个函数中，在使用的地方直接调用便可。

.font(@color: #ffffff, @size: 14px){
　　font-size: @size;
　　color: @color;
}


.error{
.font(#ff0000, 18px);
}
.normal{
　　.font();
}

 

 混合定义： 》.混合(@参数名:默认参数值){****}  

 注意：必须以 点 开头， 混合中的参数为形参，可传可不传（依据是否有默认值决定），且不能够有引号，使用如同js方法同样使用便可。

模式匹配

模式匹配，如同js的switch同样， 当遇到相同的内容就走对应的代码段。以建立三角形为例。

.trangle(@_,@color,@size){
    width:0px;
    height: 0px;
    border:solid @size;
    border-color: transparent;
}
.trangle(right, @color, @size){
    border-right-color: @color;
}
.trangle(left, @color, @size){
    border-left-color: @color;
}
.trangle(top, @color, @size){
    border-right-color: @color;
}
.trangle(bottom, @color, @size){
    border-left-color: @color;
}

.trangle-l{
    .trangle(left, #ff00ff, 18px);
}

 

 @_  为通配符，至关于switch 中的 default,不论匹配哪一个，此内容都会被执行，所以用于定义共通样式。

 第一个参数为string的固定值，至关于case，当传入的内容匹配此内容时，会执行内部的内容。

注意：模式匹配要求定义的函数名称要求一致，且入参的内容要注意和模式的匹配要吻合。

颜色函数

 颜色组成： 色相（spin-色轮），明度（dark-light），饱和度（saturate）

函数：   

lighten(@color, @percent)      //percent最高百分之50

darken(@color, @percent)     //percent最高百分之50

spin(@color, @index)                //index 表示色轮指定颜色的偏移量，适合颜色逐渐变化

saturate(@color, @percent)       //饱和度提高百分比

desaturate(@color, @percent)   //减饱和度

mix(@color1, @color2)      //取颜色1和颜色2混合到一块儿造成的新颜色

/**ul{
    list-style: none;
    li:nth-of-type(1){
        background-color:darken(red, 0%);
    }
    li:nth-child(2){
        background-color:darken(red, 10%);
    }
     li:nth-child(3){
        background-color:darken(red, 20%);
    }
    li:nth-child(4){
        background-color:darken(red, 30%);
    }
    li:nth-child(5){
        background-color:darken(red, 50%);
    }
} **/

ul{
    list-style: none;
    li:nth-of-type(1){
        background-color:lighten(red, 0%);
    }
    li:nth-child(2){
        background-color:lighten(red, 10%);
    }
     li:nth-child(3){
        background-color:lighten(red, 20%);
    }
    li:nth-child(4){
        background-color:lighten(red, 30%);
    }
    li:nth-child(5){
        background-color:lighten(red, 50%);
    }
    
    li:nth-child(6){
        background-color:saturate(red, 100%);
    }
    li:nth-child(7){
        background-color:desaturate(red, 50%);
    }
    li:nth-child(8){
        background-color:spin(red, -20);
    }
    li:nth-child(9){
        background-color:spin(red, 20);
    }
    li:nth-child(10){
        background-color:mix(red, green);
    }
    
} 

 

注意：此处的nth-child也可支持（even，odd）作奇偶不一样用。

ul{
　　list-style: none; 
　　li:nth-child(odd){
　　　　background-color:lighten(red, 20%);
　　}
　　li:nth-child(even){
　　　　background-color:darken(red, 20%);
　　} 
}

 嵌套：

将子或子子元素的样式以包含的形式被融入到父样式中相似

.a .b{****}  =>   .a{ .b{}}  

这样的好处是，能够将某一模块的全部样式统一在一块儿，不会那么零散。

注意：&表示父亲， 对邻居父子同级元素伪类 （+ ~   > :）都要使用&来表示。

.font-btn{
  color: #9A9A9A;
  &:hover{
    color: #926AA3;
    .icon{
      background-color: rgba(146,106,163,.2);
    }
  }
  &:focus{
    color: #480968;
    .icon{
      background-color: rgba(146,106,163,.2);
    }
  }
}

 运算：

运算符分类： 加减乘除。用于角度，颜色，宽度，高度进行计算。

宽度高度

ul{
    list-style: none; 
    li{
        background-color: @bgcommon;
    } 
      
    li:nth-of-type(1){
        width: @w1;
        background-color: @bgcommon + #990000;
    } 
    li:nth-of-type(2){
        width: @w2 + @w1; //注意最好带空格，变量之间运算能够不带空格，和数据计算要带空格
        background-color: @bgcommon * 5;
    }
    li:nth-of-type(3){
        width: @w1 + 500px; //注意要加空格
    }
}

 

 

 

 

 

 

 

 

 

 

 

 

 

// TODO