【Less】预处理语言

Moon里

已于 2024-04-03 11:08:00 修改

阅读量295

点赞数 4

分类专栏： Less 文章标签： less 前端 css node.js

于 2024-03-25 14:10:09 首次发布

本文链接：https://blog.csdn.net/qq_57567877/article/details/137010381

版权

Less 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Less

简介
基础语法
编译工具
导航nav嵌套

简介

less：css预处理语言 .less，减少开发的代码量，将css变成更加动态的编程方式

sass：css预处理语言 .sass（使用服务器解析不是基于nodejs；sass是最大的预处理语言，它由Ruby服务器运行环境解析）


使用：
	1.less文件浏览器无法解析，需要重新编译成css文件浏览器才能识别（借助第三方工具）

	2.less文件可以通过服务器解析，直接运行

基础语法

html文件（下载引入less.js文件；通过node服务器打开，引入的less文件才能被识别呈现对应的css效果）

	<!--引入less文件，通过node服务器打开浏览器可识别-->
	<link rel="stylesheet/less" href="less/M1.less">
</head>
<body>

	<h1>LESS</h1>
	<div id="div1">111</div>
	<div id="div2">222</div>
	<div id="div3">333</div>

<script src="js/less.js"></script>
</body>

less文件

/*变量*/
@color: #c57fff;
/*模板*/
.myBorder(@borderWidth,@borderColor){
   border: @borderWidth solid @borderColor;
}
/*模板可以反复设置*/
.myBg(before,@color1,@color2){ //第1次设置
    background-image: -webkit-linear-gradient(top,@color1,@color2);
    background-image: -moz-linear-gradient(top,@color1,@color2);
    background-image: -ms-linear-gradient(top,@color1,@color2);
    background-image: -o-linear-gradient(top,@color1,@color2);
    opacity: .5;
}
.myBg(after,@color1,@color2){ //第2次设置
    background-image: -webkit-linear-gradient(left,@color1,@color2); //webkit内核：谷歌 safari
    background-image: -moz-linear-gradient(left,@color1,@color2); //moz内核：火狐浏览器
    background-image: -ms-linear-gradient(left,@color1,@color2); //ms内核：针对低版本的IE浏览器
    background-image: -o-linear-gradient(left,@color1,@color2); //o内核：opera浏览器
    opacity: 1;
}
/*提炼出：公用模板*/
.myBg(@_,@color1,@color2){ //@_ 表示less设置的通用符
    //transition: all 1s;
    transition-duration: 1s;
    transition-property: opacity;  //指定单个或多个属性transition（避免影响其它属性，background-image不支持CSS3的transition）
    -o-transition:  all 1s;
    -moz-transition:  all 1s;
    -ms-transition:  all 1s;
    -webkit-transition: opacity 1s;  //针对不同浏览器兼容
}
/*计算*/
.myDivWH(@width){
    width: @width;
    height: @width*pi();
}



div{
  float: left;
}
#div1{
    color: @color;   /*使用变量*/
    //width: 100px;
    //height: 200px;
    .myDivWH(100px);   /*使用计算*/
    border: 8px solid @color;
}
#div2{
    color: #dfff05;
    //width: 200px;
    //height: 400px;
    .myDivWH(200px);
    //border: 8px solid #dfff05;
    .myBorder(8px,pink);   /*使用模板*/
}
#div3{
    color: #ff0000;
    width: 300px;
    height: 600px;
    border: 8px solid #ff0000;
    .myBg(before,pink,yellow);
}
#div3:hover{
    .myBg(after,pink,yellow);  /*使用被反复设置的模板的哪一次设置*/
}

效果图

在这里插入图片描述

编译工具

编译的方法很多（node服务器编译、在线编译工具、第三方工具）；这里使用的是koala软件

在这里插入图片描述

导航nav嵌套

可通过第三方工具编译.less文件后，使用编译后的.css文件引入html文件中

<link rel="stylesheet/less" href="less/nav.less">
<!--	<link rel="stylesheet" href="css/nav.css">-->

</head>
<body>
<!--nav导航-->
<nav>
	<ul>
		<li>首页</li>
		<li>
			产品
			<ul>
				<li>子菜单11</li>
				<li>子菜单22</li>
				<li>子菜单33</li>
			</ul>
		</li>
		<li>活动</li>
		<li>关于我们</li>
	</ul>
</nav>


<!--引入less-->
<script src="js/less.js"></script>
</body>

less文件

/*默认值*/
.myLinear(@dir:top,@color1:#ee69cfc3,@color2:white,@color3:#ee69cfc3){
    background-image: -webkit-linear-gradient(@dir,@color1,@color2,@color3);
    background-image: -moz-linear-gradient(@dir,@color1,@color2,@color3);
    background-image: -ms-linear-gradient(@dir,@color1,@color2,@color3);
    background-image: -o-linear-gradient(@dir,@color1,@color2,@color3);  //浏览器兼容处理
}
//阴影：x轴偏移，y轴偏移，模糊值，外延值，阴影颜色
.myBoxShadow(@x:0px,@y:5px,@blur:5px,@outer:0px,@shadow:gray){
    //box-shadow:@x @y @blur @outer @shadow;
    //空格隔开且有规律挨着顺序的参数就可以直接写arguments
    box-shadow: @arguments;
}


*{
    margin: 0;
    padding: 0;
}
/*主菜单*/
nav>ul>li{
    width: 200px;
    height: 50px;
    list-style: none;
    text-align: center;
    line-height: 50px;
    //background-image: -webkit-linear-gradient(top,#ee69cfc3,white,#ee69cfc3);  //这里设置成16进制颜色不知道它为什么不显示？
    .myLinear(left,white,pink,white);  /*主菜单背景色*/
    overflow: hidden;
    float: left;
    .myBoxShadow();  /*阴影*/


    /*主菜单下的子菜单样式（嵌套）*/
    >ul>li{
        background-color: #c7ffb9;
        list-style: none;
            /*子菜单自己的hover*/
            &:hover{
                background-color: #e8c0ff;
            }
    }

    /*主菜单自己的hover*/
    &:hover{
        overflow: visible;
        //background-image和background-color同时存在时，只会显示background-image
        background-image: none;
        background-color: pink;
    }
}

效果图

在这里插入图片描述

Moon里

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【Less】预处理语言

less：css预处理语言 .less，减少开发的代码量，将css变成更加动态的编程方式sass：css预处理语言 .sass（使用服务器解析不是基于nodejs；sass是最大的预处理语言，它由Ruby服务器运行环境解析）使用：1.less文件浏览器无法解析，需要重新编译成css文件浏览器才能识别（借助第三方工具）2.less文件可以通过服务器解析，直接运行。
复制链接

扫一扫