前端知识点2:less的使用

less是css的预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
我举个简单的例子，在less文件中，一个常用的颜色样式，但是这个颜色样式需要不定时更改。在css中，就必须找到选择器再修改颜色。而less中可以把这样的样式变量在文件最上面，在下面直接调用这个变量，如果要修改，直接改这个变量即可。
浏览器能支持less，但是不建议在生产环境使用less，因为生产环境对速度性能要求高，解析less会耗掉一部分性能，在生产环境可以把less解析成css使用。
虽然less文件最后还是会变成css，但是不代表less是多此一举，使用less能大大提高开发效率。
首先介绍less解析软件（网上很多用命令行解析的方法，不觉得很繁琐吗，我推荐使用软件一键解析）：koala 下载地址：http://koala-app.com/
下面介绍less的语法.
1、公共变量和 伪类

@common-color:#fff; //定义公共变量
@hover-color:#000; //定义公共变量
@name:'content';
@content:'大明';
div{
    color:@common-color;
    &:hover{ //伪类
          color:@hover-color;
    }
    .div-son{  //子元素 
          content:@@name; //双重调用
    }
}

解析成css后：

div{
    color:#fff;
}
div:hover{
     color:#000;
}
div .div-son{
    content:'大明';
}

less中伪类使用 & ,否则一律按子元素处理
2、继承

.public{ //这个样式编译后还会在css文件中显示
    color:#fff;
    font-size:20px;
}
div{
    .public;
    width:20px;
}
//这边演示编译后不需显示的例子
.common(){
    color:#000;
}
span{
    .common;
    height:20px;
}

解析成css后

.public{ //这个样式编译后还会在css文件中显示
    color:#fff;
    font-size:20px;
}
div{
    color:#fff;
    font-size:20px;
    width:20px;
}
span{//这个虽说继承了.common类，但是在.common后面加上了  ()  就不在css中显示了
    color:#000;
    height:20px;
}

上面的代码其实还有很多冗余，less提供了另一种更好的方法 extend

.public {
    width:20px;
    height:10px;
}
div{
    &:extend(.public);//extend继承的第一种写法
    color:#fff;
}
span:extend(.public){//extend继承的第二种写法
    font-size:20px;
}

本文为原创文章，转载请注明出处

觉得本文对你有帮助

关注前端丶米店，持续分享中。。。