维护css的弊端

css是一门非程序式语言,没有变量,函数,SCOPE(作用域)等概念

1、css需要书写大量看似没有逻辑的代码,css的冗余度是比较高的;

2、不方便维护以及进行拓展,不利于复用;

3、css没有很好的计算能力

Less介绍

  Less(leaner style sheets)的·缩写是一门css扩展语言,也成为css预处理器,作为css的一种形式扩展语言,它并没有减少css的功能,而是在现有的css的语法基础上,为css加入程序式语言特性。

  它在css的语言基础上,引入了变量,Mixin(混入),运算以及函数功能,大大简化了css的缩写,并且降低了css的维护成本,就像它的名称一样,less可以让我们用更少的代码实现更多的事情。

less的中文网址;http://lesscss.cn/

常见的css预处理器:Sass、Less、Stylus

一句话总结:Less是一门css预处理语言,它扩展了css的动态特性

在使用less之前需要进行less的安装,但是less的安装之前还需要安装nodejs,在node环境中安装less

一、less的安装

      

  • 检查是否安装成功,使用cmd命令(window10是 window+r打开 运行输入cmd)---输入"node-v"查看版本即可

      

  • 基于nodejs在线安装Less ,使用cmd "npm install -g  less"即可

     

  • 检查是否安装成功,使用cmd命令 “less-v” 查看版本即可

      

 二、  Less使用

首先新建一个后缀名为less的文件,在这个文件中书写less语句

Less变量

变量是指没有固定的值,可以进行改变的。因为在css中的一些颜色和数值经常被使用。

在一个页面中出现许许多多的颜色,但是用到的颜色都相同,此时就可以通过定义变量,赋予变量的值,调用变量,这样就可以实现统一的修改。

语法:

@变量名: 值;

1、变量名的命名规范
  • 必须由@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
//上面进行定义变量,下面进行引用,变量的值进行修改,下面引用的样式进行统一的修改
//定义一个红色的变量
@color: red;

//错误的变量命名  @1font @font#~
//变量名区分大小写 @color 和 @Color 是两个不同的变量

//定义了一个 字体为14px 像素的变量
@font14: 14px;

div {
    background-color: @color;
}

span {
    color: @color;
    font-size: @font14;
}
a {
    font-size: @font14;
}

使用变量比较好维护

Less编译

在html页面中不能使用less文件的,通常都是引用css,那么怎么来使用Less文件呢?

本质上,less包含一套自定义的语法以及一个解析器,用户根据这些自定义的样式规则,这些规则最终会通过解析器,编译生成对应的css文件。

所以,需要把创建好的less文件,编译生成css文件,这样html页面才能使用。

需要使用到一个vscode Less插件

Easy LESS 用来把less文件编译为css文件,安装完毕插件后,需要重新加载vscode 只要保存一下Less文件,会自动生成css文件

Less嵌套

1、子元素的样式直接写到父元素里面

那在less文件中的是如何去写给header和a写样式呢;

在css中不能这样去写;只能在less中这样去写

当保存less文件时,文件生成的css文件

经常用到选择器的嵌套

 #header .logo {

width:300px
}

less嵌套写法 

#header {
        .logo {
   width: 300px;

}



}

如果遇见(交集|伪类|为元素选择器)

  • 内层选择器的前面没有&符号,则被它解析为父选择器的后代;
  • 如果有&符号,它就被解析为父元素自身或父元素的伪类。
// css样式写法
a:hover {
    color: red;
}


//less嵌套写法
a {
    &:hover{
        color: red;
    }
}

如果有伪类,交集选择器,伪元素选择器,内层选择器需加&

less运算

任何数字、颜色或者变量都可以  参与运算,就是less提供了加(+)、减(-)、乘(*)、除(/)算术运算

// less里面的写法
@border:5px+5;



div {
    width:100px;
    height: 200px;
    border:@border solid red;
}
/* 生成的css */

div {
    width: 100px;
    height: 200px;
    border: 10px solid red;
}

注意:

1、在运算符的左右两侧必须敲一个空格隔开

2、两个数参与运算,如果只有一个数有单位,则最后的结果就以这个单位为准

3、两个数参与运算,如果两个数都有单位,而且是不一样的单位,最后的结果以第一个单位为准

4、颜色有数字也可以进行参与运算

12-21 18:39