less的使⽤（变量、混⼊）css变量
1.什么是less?
  LESS是⼀种动态样式语⾔，属于CSS预处理语⾔的⼀种，它使⽤类似CSS的语法，为CSS的赋予了动态语⾔的特性，如变量、继承、运算、函数等，更⽅便CSS的编写和维护。
2.语法
1）注释：
// 只在less中显⽰
/**/会在编译好的css⽂件中显⽰
2）变量：
定义变量⽤@
3）混⼊：
不带参数的混⼊：
mixin.less⽂件：
@width:100px;
@height:200px;
@color:green;
.border {
border:5px solid red;
}
.one {
width:@width;
height:@height;
background-color:@color;
color: yellow;
.border;
}
编译后的css:
.border {
border:5px solid red;
}
.one{
width: 100px;
height: 200px;
background-color: green;
color: yellow;
border: 5px solid red;
}
在组件中使⽤：
<template>
<div>
<div class="one">less不带参数的混合</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
}
</script>
<style lang="less" scoped>
@import '../assets/less/mixin.less';
.active{
color:blue;
}
</style>
结果:
带参数的混合：相当于js⾥⾯的函数less⽂件：
@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width:3px) {
//带默认值的
border:@border_width solid red;
}
.fontColor(@font_color){
/
/不带默认值的
color:@font_color ;
}
.one {
width:@ly_width;
height:@ly_height;
background-color:@ly_color;
}
使⽤：
<template>
<div>
<div class="div1 one">带参数的混合</div> </div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
}
}
</script>
<style lang="less" scoped>
@import '../assets/less/mixin.less';
.div1{
.border(1px);
.fontColor(#fff);
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。