CSS学习笔记-10-less的简单使用

10、less

10.1、less的简单介绍

less是一门css的预处理语言

• less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
• 在less中添加了许多的新特性，像对变量的支持，对mixin的支持…
• less的语法大体上和css的语法一致，但是less中增添了许多对css的拓展，所以浏览器无法直接执行less代码，要执行必须先将less转化为css，然后再由浏览器执行

使用变量时，如果是直接使用则以@变量名的形式使用即可

.box5{
    // 使用变量时，如果是直接使用则以@变量名的形式使用即可
    width: @a;
    color: @b;
}

作为类名或一部分值使用时必须以@{变量名}的形式使用

.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}

变量发生重名时，会优先使用离得比较近的变量

@d:220px;
@d:378px;
div{
    //变量发生重名时，会优先使用离得比较近的变量
    @d:115px;

}

新特性

dic{
    width: 100px;
    height: $width;
}

&就表示外层的父元素

&:hover{
        background-color: #bfa;
    }

==

.box1:hover {
  background-color: #bfa;
}

:extend()对当前选择器扩展指定选择器的样式（选择器分组）

.p1 {
    width: 100px;
    height: 100px;
}

.p2:extend(.p1){
    color: #ff0;
}

==

.p1,
.p2 {
  width: 100px;
  height: 100px;
}
.p2 {
  color: #ff0;
}

直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了引用

mixin混合

.p3{
    .p1();
}

==

.p3 {
  width: 100px;
  height: 100px;
}

重要特性：使用类选择器时可以在选择器后面添加一个括号，这时我们实际上就创建了一个mixin

.p4(){
    width: 100px;
    height: 100px;
    background-color: #ff0;
}

.p5{
    .p4();
}


==

.p5 {
  width: 100px;
  height: 100px;
  background-color: #ff0;
}

10.2、混合函数

//混合函数，在混合函数中可以直接设置变量，类似于函数
.test(@a,@b){
    width: @a;
    height: @b;
    background-color: #bfa;
}

div{
    .test(100px,200px);
}


==

div {
  width: 100px;
  height: 200px;
  background-color: #bfa;
}

10.3、less的补充

可以通过import来将其它的less引入到当前less文件，这就可以使得less文件模块化，每一个less文件负责相对应的事情，有利于维护

在less中所有的数字都可以直接进行运算，+ - * /

@import "syntax2.less";

.box1{
    width:100px+100px;
    height:100px/2;
    background-color:#ff0;
}