vue使用less预编译实现样式嵌套，完成导航到指定位置更换样式

@原文参考

为了实现导航样式至指定位置改变效果，采用了位置监测进行样式表添加删除动作，在这里使用到了less预编译完成样式嵌套。

操作记录：

1.安装依赖

npm install --save less less-loader

由于我是用的是IDEA编译环境，所以我直接在下方命令窗口使用了这个命令，也可以使用win自带的命令行窗口执行此命令。区别是前者安装后就可看到安装的版本号，后者查看安装成功与否需要再执行lessc -v命令查看，显示版本号即安装成功。

2.引入依赖

在项目main.js中添加以下内容，全局注入less。

import less from 'less'
Vue.use(less)

3.使用less预编译

引入成功后，只需在样式表标签内添加lang = "less" 即可，如下。

<style lang = "less" scope>

添加scope的原因是避免样式表被其他地方继承到，该样式表只对所使用vue（或者html)页面生效。这只是个人习惯，因为还不熟悉，避免出错。

---

---

以下附上导航到指定距离改变样式代码，一为分享，二为记录

<template>
	<div class="header" id="header-sty">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">产品中心</a></li>
			<li><a href="#">项目案例</a></li>
			<li><a href="#">资讯中心</a></li>
			<li><a href="#">关于我们</a></li>
		</ul>
	</div>
</template>

<script>
//鼠标下滑隐藏，上滑出现js文件，附在文末，自取
import '../style/js/jquery-2.1.4.min'

export default {
	name: 'public-header',
	methods: {},
}

//鼠标下滑隐藏，上滑出现
$(function () {
	let oTop1 = $(document).scrollTop()

	$(window).scroll(function () {
		let oTop2 = $(document).scrollTop()

		if (oTop2 > oTop1) {
			$('.header').addClass('hide').removeClass('show')
		} else {
			$('.header').addClass('show').removeClass('hide')
		}
		oTop1 = $(document).scrollTop()
	})
})

//到指定距离改变样式
function newheaderstyle(obj, type, fn) {
	if (obj.attachEvent) {
		obj.attachEvent('on' + type, function () {
			fn.call(obj)
		})
	} else {
		obj.addEventListener(type, fn, false)
	}
}

newheaderstyle(window, 'scroll', function () {
	let scrollTop =
		document.documentElement.scrollTop || document.body.scrollTop
	if (scrollTop >= document.documentElement.clientHeight) {
		//滚动条下拉距离大于等于当前窗口高度时触发以下功能
		$('.header').addClass('new-sty-b-s').removeClass('new-sty-b-h')
	} else {
		$('.header').addClass('new-sty-b-h').removeClass('new-sty-b-s')
	}
})
</script>

<style lang="less" scoped>
.new-sty-b-h {
	/*这里本来有小于指定距离的样式的，但是和公共样式冲突了*/
}

.header ul li a:hover {
	border-bottom: 2px solid #404040; /*这个代替a标签下划线效果*/
}

.header ul li a {
	/*display: block; !* 将链接设为块级元素 *!*/
	color: white;
	padding: 15px 0;
	font-weight: bold;
	text-decoration: none; /* 去掉下划线 */
        transition: all 0.5s; /*平滑动作*/
}

.header ul li {
	float: left;
	padding: 2px 50px;
	list-style: none;
}

.header:hover {
	background: #fff;
	-webkit-filter: drop-shadow(0 0 15px #f1f1f1);
	filter: drop-shadow(0 0 15px #f1f1f1);
	ul li a {
		color: #404040;
	}
}

.header {
	position: fixed;
	 100%;
	font-size: 0.13rem;
	font-family: 思源黑体;
	color: white;
	z-index: 99;
}

html,
body {
	margin: 0;
	padding: 0;
}

/*鼠标下滑隐藏，上滑出现样式块*/
.hide {
	transition: 0.5s;
	top: -150px;
}

.show {
	top: 0;
	transition: 0.5s;
}

/*到指定距离添加此样式块*/
.new-sty-b-s {
	background: #fff;
	-webkit-filter: drop-shadow(0 0 15px #f1f1f1);
	filter: drop-shadow(0 0 15px #f1f1f1);
	ul li a {
		color: #404040;
	}

	ul li a:hover {
		/*background-image: -webkit-linear-gradient(-45deg, #5DD9F4, #6256EB);*/
		/*-webkit-background-clip: text;*/
		/*-webkit-text-fill-color: transparent;*/
		border-bottom: 2px solid #404040;
		/*border-image: -webkit-linear-gradient(#5DD9F4, #6256EB) 30 30;*/
		/*border-image: -moz-linear-gradient(#5DD9F4, #6256EB) 30 30;*/
		/*border-image: linear-gradient(#5DD9F4, #6256EB) 30 30;*/
		transition: 0.2s;
	}
}
</style>

附带代码中引用js地址：https://files.cnblogs.com/files/auto-ajax/jquery-2.1.4.min.js

建议自己去下载jquery-2.1.4.min.js文件，可能之后限于博客园文件版块容量限制我会删掉它。

---