学习LESS

学习LESS

一、为什么要使用Less

1、使用传统的CSS写样式问题如下:
1)嵌套层次太深 选择器太长 分块不清晰
2)对于一些常用的CSS属性,需要重复的手写

2、为了解决上面的问题,有人提出了更加优雅写CSS的方案,目标:
1)样式可以分块写 更加清晰
2)样式可以抽离出变量
3)样式可以定义函数
这样做的目的: 大大提升我们写样式的速度,提高开发效率,降低维护成本。也就是说,像写JS一样,写CSS。

但是,浏览器只认识CSS,CSS中没有规定的语法,浏览器是不认识的。
我们可以按照我们的想法写好样式,编译成传统的CSS,让浏览器认识。

于是乎开发者按照一种规范,编写样式,然后进行编译,生成传统的CSS让浏览器解析

优雅地写CSS的规范,目前流行的方案有三种:

less
sass
stylus
上面的三个思想都是一样的,只不过语法可以稍有不同,学一个就OK了。
学会了一个,其它两个都是一样的

less官网:http://lesscss.cn/

二、使用less

使用less方式一: 基本上没人用

```<style type="text/less">
    .box1{
        width: 250px;
        height: 250px;
        border: 1px solid red;
    }
</style>
<script src="./js/less.js"></script>
```

使用less方式二:

less也是CSS,需要单独写到一个文件中,通过下面的语句引入less文件到html文件中:

<link rel="stylesheet/less" type="text/css" href="index.less"> <script src="./js/less.js"></script>

注意:走http协议

使用less方式三:

下载一个叫考拉的工具  这个工具,可以实时把less编译成css
 这个工具,会把你的less代码编译成css
 在页面中引入的还是css,不是Less

使用less方式四:

vscode中有一个插件,可以把less编译成css  插件叫:easy less

三、混合:

1、最基本的混合

.cricle{
           text-align: center;
           border: 2px solid red;
           border-radius: 50%;
       }

使用:
circle1的样式:
.circle1{ width: 200px; height: 200px; line-height: 200px; .cricle; // 最基本的混合 &:hover{ color: @hoverColor; } }
circle2的样式:

     .circle2{
         width: 100px;
         height: 100px;
         line-height: 100px;
         .cricle;  // 最基本的混合
         &:hover{
             color: @hoverColor;
         }
     }

2、带参数的混合:

.cricle(@radius){
    text-align: center;
    border: 2px solid red;
    border-radius: @radius;
}

使用:
circle1的样式:

    .circle1{
        width: 200px;
        height: 200px;
        line-height: 200px;
        .cricle(20%);  // 最基本的混合
        &:hover{
            color: @hoverColor;
        }
    }
    ```
circle2的样式:
.circle2{
    width: 100px;
    height: 100px;
    line-height: 100px;
    .cricle(50%);  // 最基本的混合
    &:hover{
        color: @hoverColor;
    }
    }
    ```

3、带参数的混合(给参数设置默认值):

.cricle(@radius:50%){
   text-align: center;
   border: 2px solid red;
   border-radius: @radius;
}
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页