less安装与基础

一、less的安装

less是一门css预处理语言，他拓展了css的动态性。在使用less之前必须先安装node.js和less。

成功安装之后就可以在VScod里创建尾缀为.less的文件，每按一次包存就会生成一次css。

二、less基础

1、结构和书写

媒体语法结构：“@”+“media”+“目标媒体类型”+“逻辑运算”+“媒体特征”{css样式}

如：设置在屏幕小于950px的屏幕下html字体为15px。

@media screen and (max-width:950px){

html{font-size:14px}

}

less中css样式书写:语法于css写法一致，但是嵌套方法、伪类元素、伪类标签元素有所差别。

less中嵌套：直接写在父盒子内部。如div a{color：green；}

在less中如下：div{

a{color：green}

}。

伪类的书写。如div a：hover{color：green}在less中写如：

div{

&a:hover{

color:green}

}

使用伪元素、伪类、交际选择器我们的内层选择器前应加&需要用到&。

2、变量于运算

less的方便就在于可以进行设置变量以及进行运算，方便后期维护。

变量的定义的格式：“@”+“变量名”+“变量值”+";"

变量名对大小写敏感，不能以数字开头、不能包含特殊字符必须有@前缀。它的值可以式数值，也可以是颜色。

如：设定一个值为50px的变量。@Font50：50px；  这就定义了一个名叫font50的变量，它的值为50px。

运算vscod4.0以上的运算需要用（）括起来。

例如：我要在992px以上的屏幕的某个content类中的 a标签大小，用变量计算的来rem值，如下。

@Font50：50；

@media screen and (min-width:992px){

        html{px

font-size:@font50px;

.content a{

        font-size: (20rem / @font50); 

                }

        }

}