css预处理

css是标记语言，不是编程语言，所以不具备编程语言的特点（编程语言的特点：变量存储、判断和循环的逻辑操作、函数的封装继承和多态...），如果具备以上编程语言的特点，开发css的时候将会非常的方便
 
css预处理编译语言的宗旨就是把css变为编程语言来开发，提高开发效率，实现组件化的封装
 
less
sass
stylus
…
之所以叫做预编译语言是因为：我们使用上述语言编写完成的样式代码，浏览器不能识别，我们需要把代码编译成为正常能识别的css代码才可以，所以叫做预编译

less的使用

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

安装less

 npm install -g less

Less 编译器

lessc styles.less > styles.css
若要输出压缩过的 CSS，只需添加 -x 选项
lessc styles.less > styles.min.css -x

//less也是来写样式的跟css一样都是实现样式的写法，只不过语法不同，它涵盖了一些JS的思想
 
//变量
//在JS中var color="#ff6700";
//在less中变量前面加上@
@color:#ff6700;
.box1{
    color: @color;
}
//还可以 以变量的名定义定义为变量
@word:"I love you";
@c:#ff5700;
@var:"word";//定义了一个变量var赋值为一个变量名word
@col:"c";//定义了一个变量var赋值为一个变量名c
#p1:after{
    //content: @word;
    content: @@var;//@(@var)->@word->"I love you"
    color: @@col;
}
 
//混合类
.class1{
    font-size: 20px;
    width: 200px;
    height: 50px;
    border: 1px solid red;  
}
.box1{
    .class1;
    background-color: #0000FF;
}
 
//带参数混合
//在less中可以像JS函数一样定义一个带参数的属性集合
 
.radius(@rad){
    border-radius: @rad;
    -webkit-border-radius: @rad;
    -moz-border-radius: @rad;
    -ms-border-radius: @rad;
    -o-border-radius: @rad;
}
.box1{
    .radius(10px);//@rad=10px;
    border: 1px solid #0000FF;
}
 
//给参数赋默认值
.font(@size:18px){
    font-size:@size ;
}
.menu li{
    .font();
}
 
//@arguments:包含了所有传进来的参数
.bor(@x,@y,@z){
    border: @arguments;
}
.wh(@w:100px,@h:30px){
    width: @w;
    height: @h;
}
.menu li{
    .wh(200px);
    .bor(3px ,solid ,green);
}
.box-shadow(@x:0,@y:0,@blur:4px,@color:#ccc){
    box-shadow: @arguments;
    color: @color;
    border-radius: @blur;
}
span{
    display: block;
    .box-shadow(5px,5px);
    .wh(150px,45px);
}
 
//匹配模式和引导表达式
.min(drak,@color){
    color: darken(@color,20%);
    //将颜色加深20%
}
.min(light,@color){
    color: lighten(@color,20%);
    //将颜色变浅20%
}
.min(@_,@color){
    display: block;
}
@switch1:drak;
@switch2:light;
 
span{
    //.min(@switch1,#ddd);
    //.min(drak,#ddd);@color:#ddd
    //.min(@switch2,#ddd);
    //@_,接受任意值，你传什么值他都会执行；
    .min(@word,#ccc);
}
 
//注释
/*
 注释
 * color函数
 * 1. lighten(@color,10%):
 * 意思：return a color which is 10% lighter than @color
 * 2. darken(@color,10%);
 * 意思：return a color which is 10% draker than @color
 * 3. statuate(@color,10%);//增加饱和度
 * 意思：return a color which is 10% statuated than @color
 * 4. destatuste(@color,10%);//减少饱和度，褪色
 * 5. fadein(@color,10%)
 * 6. fadeout(@color,10%)
 * 7. fade(@color,50%)
 * 8. spin(@color,10)
 * 9. spin(@color,-10)
 * 10. mix(@color1,@color2);混合
 * 
 * 
 * 提取颜色信息
 * hue(@color):返回当前颜色的色调
 * staturation(@color):返回当前颜色的饱和度
 * lightness(@color):返回当前颜色的亮度(浅的度数)
 * */
div{
    width: 100px;
}

.wh(@w:100px,@h:50px){
    width: @w;
    height: @h;
}
//when
.mixin(@a) when(lightness(@a)>=50%){
    background-color: black;
}
.mixin(@a) when(lightness(@a)<50%){
    background-color: whitesmoke;
}
.box1{
    .wh();
    .mixin(#ddd);
}
 
.mn(@w,@h) when(@w>@h){
    width: @w;
    height: @h;
}
.mn(@w,@h) when(@w<=@h){
    width: @h;
    height: @w;
}
.box1{
    //.mn(100px,200px);
    .mn(200px,50px)
}
 
.m(@x) when(@x=red){
    color: @x;
}
.m(@x) when(@x=green){
    color: @x;
}
p{
    //.m(green)
    .m(whitesmoke);//没有满足条件的根本不会执行
}
/*
 注意：
 *在less中比较运算：
 *  >  <  >=  <=  =
 * */
//基于值类型的判断进行匹配，可以使用JS函数判断
/*
 * isnumber
 * iscolor
 * isstring
 * isurl
 * iskeyword
 * 判断单位
 * ispixel  px
 * ispercentage  pt
 * isem   em
 * */
 
.n(@a) when(iscolor(@a)){
    color: @a;
}
.n1(@b) when(isstring(@b)){
    content: @b;
}
.n2(@c) when(ispixel(@c)){
    width: @c;
}
.box2 span{
    .n(red);
    }
.box2:before{
    //.n1(red)
    .n1("哈哈哈哈哈")
}
 
.box2{
    .n2(100px);
}

//嵌套规则
//1.直接嵌套表示的是后代关系
//2.如果想表达都是当前选择器加一个&来表示(一般都是伪元素伪类用的比较多)
.wh(@w:100px,@h:100px){
    width: @w;
    height: @h;
}
div{
    .wh();
    p{
       .wh(100px,20px);
    }
}
.box{
    .wh();
    &:hover{
        background-color: wheat;
    }
}
 
span{
    display: block;
    .wh(50px,20px);
    &#span1{
        .wh();
        background-color: #87CEEB;
    }
}
 
//计算功能：任何颜色，变量都可以参与运算
@base:5%;
@filter:@base*2;//10%
@other:@base*4+@filter;//30%
.box{
    color: #FFFF00;
    background-color: @filter+#111;
    height: 100%/2+@other;
}
 
@var:10px + 5;
#box1{
    width: (@var + 20)*2;
    height: (@var - 5)*3;
    p{
        height: (@var + 5)/2;
        background-color: #101010+#000111;
        border: @var - 5 solid #0000ff;
    }
}
 
//less也支持部分Math函数
//round(1.67)->2
//ceil(2.1)->3
//floor(2.9)->2
//peercentage(0.5)->50%转为百分数的函数
#s{
    width: 100px;
    height: 100px;
    border-radius: percentage(0.5);
}
 
//命名空间
#box1{
    .p1{
        width: 100px;
        height: 30px;
        border: 1px solid red;
        &:hover{
            color: #FF0000;
        }
    }
}
.p2{
    color: #ccc;
    #box1>.p1;
}
 
//可以使用一些简单的JS语句
@w:`"helloWord".toUpperCase()+"1"`;
.p2:after{
    content: @w;
}