" 코드를 적게 추가하면 됩니다."/> " 코드를 적게 추가하면 됩니다.">
이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
vue는 less
Dependency download
1을 사용합니다. 먼저 npm을 사용하여 종속성을 다운로드합니다.
npm install --save less less-loader
2. 설치가 성공했는지 확인합니다. 설치가 성공하면 성공적인 설치 후 버전이 표시됩니다.
1. main.jslessc -v2에서 .vue 파일을 생성하면 재생이 시작됩니다. 참고: 독립 vue 파일은 less를 사용하여 도입해야 합니다.
import less from 'less' Vue.use(less)시작하기 1 less에서 변수 사용;less에서는 변수 정의 방법을 정의할 수 있습니다. @ k:v; 사용 방법: @k;
<style lang="less"></style>this 그러면 페이지에 너비 100px, 높이 100px의 사각형이 표시됩니다.
2.
<p class="box"></p> <style lang="less"> @color:red; @k:100px; .box{ width:@k; height:@k; background: @color; } </style>
참고: 경로는 "", @{img }로 래핑되어야 합니다. 이러한 종류의 방법은 변수가 도입된 경우에만 적용됩니다.
3.
<p class="box1"></p> <style lang="less" scoped> @img:'./img/'; @k:100px; .box1{ width:@k; height:@k; background:url("@{img}1.png") } </style>
Less가 중첩될 수 있으므로 CSS 구조를 한 번에 명확하게 볼 수 있습니다. 중첩을 사용하는 것 외에는 계산이 정말 강력하다는 것을 알았나요?
4. Mixing = function
<p class="box1"> <p class="box2"> <p class="box3"></p> </p> </p> <style lang="less"> @k:100px; .box1{ width: @k; height:@k; background: red; .box2{ width: @k/2; height:@k/2; background: green; .box3{ width: @k/3; height:@k/3; background: blue; } } } </style>
5. 매칭 모드
<p class="box1">我是box1</p> <p class="box2">我是box2</p> <style lang="less"> //定义一个函数; .test(@color:red,@size:14px){ background: @color; font-size:@size; } .box1{ // 不传参,使用默认的; .test() } .box2{ // 给函数传参; .test(@color:green,@size:30px) } </style>상자는 t(top)와 일치하며, 이는 상단
상자는 b(buttom)와 일치합니다.
요약하자면, 일치하는 패턴은 js의 스위치 문과 같습니다. 입력된 내용은 모두 표시되지만 색상 기능은 중요하지 않습니다.<p class="box"></p> //定义的css <style lang="less"> .sjx(@_,@color,@size){ width: 0; height:0; border:@size solid @color; border-color:transparent; } //左边三角形 .sjx(l,@color,@size){ border-left-color:@color; } //上边三角形 .sjx(t,@color,@size){ border-top-color:@color; } //右边三角形 .sjx(r,@color,@size){ border-right-color:@color; } //左边三角形 .sjx(b,@color,@size){ border-bottom-color:@color; } //这里匹配调用 .box{ .sjx(r,red,20px) } </style>
8. 연산자
높이, 너비 및 각도를 계산할 수 있습니다.
<p>默认红色</p> <p>默认绿色</p> <ul> <li <li v-for="i in 6">测试</li> </ul> <span>混合</span> <style lang="less" scoped> *{ padding: 0; margin: 0; } @color:red; @color1:green; p:nth-child(1){ background: @color; }; p:nth-child(2){ background: @color1; }; ul{ list-style: none; li:nth-child(1){ background:lighten(@color,50%); } li:nth-child(2){ background:darken(@color,50%); } li:nth-child(3){ background:saturate(@color,50%); } li:nth-child(4){ background:desaturate(@color,50%); } li:nth-child(5){ background:spin(@color,50%); } li:nth-child(6){ background:spin(@color,50%); } } span{ background: mix(@color,@color1); } </style>
프로그래밍 관련 지식을 더 보려면
프로그래밍 코스를 방문하세요. !
위 내용은 vue.js에서 less를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!