less与sass

初识less

less是一种动态样式语言，为提高css应用的灵活性和效率，less将css赋予了动态语言的特性，如变量，继承，运算，函数。less既可以在客户端上运行（支持IE6+，谷歌，火狐），也可以借助node.js在服务端运行

安装less

node环境下使用全局安装.npm i -g less

浏览器中使用，l引用就好

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

在vs code中直接使用需要安装easy less插件，作用是将less文件编译成css文件。
less文件是无法直接被浏览器解析的。

第一个less（vscode）

单行注释（ctrl+/）是不会被解析的，只有多行注释才可以被解析（alt+shift+a）
使用变量，如下

@bgRed:red;
div{background-color:@bgRed;}

变量

less变量语法示范，定义的变量是不会被编译的

//选择器变量
@selector:#box;
@{selector}{
    color: red;
}
@box:box;
.@{box}{
    color: red;
}

//属性变量
@borderStyle:border-style;
@solid:solid;
@{selector}{
    @{borderStyle}:@solid;
}

//url变量
@images:"../images";
body{
    background: url("@{images}/cat.png");
}

//声明变量
@background:{background:red}
div{
    @background()
}
@rule:{
    width: 100px;
    height: 100px;
    background-color: red;
}
div{
    @rule()
}

//变量运算
@width:100px;
div{
    height: @width+20;
// 由于减号可以作为变量名的一部分来使用，所以自动把@width-20整体当成了变量名。
// 需要添加空格隔开避免
    width: @width - 20;
}

//变量的作用域（就近原则）
@var:@a;
@a:100%;
#wrap{
    width: @var;
    @a:90%;
}

//用变量定义变量
@fond:@var1;
@var1:'fond';
div::after{
    content:@var1
}

less嵌套

div{
    ul{
        li{
            color: red;
        }
        p{
            color: gray;
        }
    }
}
//媒体查询
#main{
    @media screen{
        @media (max-width:768px) {
            width: 100px;
        }
    }
    @media tv{
        width: 200px;
    }
}

混合方法

混合方法过于复杂，这里只记录无参数方法和默认参数方法。实际开发中绞脑汁用循环判断写less，没有必要

//无参数方法，.a有没有括号都没有区别，但是为了避免代码混淆，加上括号更好
.a(){
    color: red;
}
div{
    .a()
}

//默认参数方法
.border(@a:10px,@b:20px,@c:30px,@color:#ddd){
    border: 1px solid @color;
    box-shadow: @arguments;
}
.box{
    .border()
}

 继承

.a{
    color: aqua;
    .b{
        font-size: 13px;
    }
}
.main{
    &:extend(.a);
}
.main2{
    &:extend(.a .b);
}

导入

@import

sass

编译

注意文件后缀名是.scss，而不是.sass
文件编译路径："easysass.targetDir": "./src/assets/style/"

变量

 嵌套

符号&

  群组嵌套

 多种选择器

 多属性叠写

import 

!default 

 @mixin,@include

 注释

 @extends