CSS-Less

前言 ： 之前在网上写项目的时候 ，有几个用less 作为是css 预处理语言 有个好处就是CSS的结构和HTML结构可以一样的 之前也是粗粗涉猎，今天系统学一下

1. 使用环境

在Node.js 环境中使用Less :

npm install -g less

在浏览器环境中使用Less：

<link rel="stylesheet/less" type="text/css" href="styles.less">\
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

在VSCode中使用Less ：

下载 Easy LESS

注释

// 这种注释，在编译后不会出现在css文件上 
/*这种注释，编译后会出现在*/

Less 变量

我们常常在css中看到一个值重复多次，这样难于代码维护，理想状态

const bgColor = "skyblue"
$(".post-content").css("background-color",bgColor)
已@开头定义变量，并且使用时直接 键入@名称，在工作就可以把常用的变量

/* Less */ 
@color:#999;
@bgColor:skyblue 

选择器变量

@mySelector:#warp;
@wrap:wrap;
//使用
@{mySelector}{
    color:#ccc;
    width:550%
}
//
.@{wrap}{
    ···
}
#@{wrap}{
    ···
}

选择器变量

@boderStyle:border-style
@soild:soild
    @{wrap}{
        @borderStyle:@soild
        }

URL变量

@images:"../img"
    body{
        background:url("@{images}/cat.png")
        }

声明变量

@background:{background:red}
@Rules:{
    width:200px;
    height:200px;
    border:1px soild red;
    }
    #main{
        @background();
        @Rules();
        }

Less 嵌套

.center{
    width:100px;
    height:100px;
    background:red
        #list{
            width:100px;
            height:100px;
            background:red
                li{
                    width:100px;
                    height:100px;
                    background:red
                    }
            }
}

媒体查询

#main{
    @media screen{
        @media (max-width:768px){
            width:100px
        }
    }
}
===>
@media screen and (max-width: 768px){
    #main{
        width:100px
    }
}