vue 使用 lang=“less“ lang=“scss“ 报错 less scss使用

vue 使用 lang=“scss” 使用

输入如下命令:
npm install sass-loader@7.3.1 --save-dev  //
npm install node-sass --save
npm install style-loader --save

因为当前sass的版本太高,webpack编译时出现了错误,所以指定:npm install sass-loader@7.3.1 --save-dev 安装低版本的。

接下来,在build/webpack.base.config.js中添加:

{
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }

然后在你的项目中直接用即可
在这里插入代码片在这里插入图片描述

scss语法使用

那么SCSS和SASS 有什么区别呢

文件扩展名不同,文件后缀分别是“.scss”和“.sass”
sass是以严格缩进语法规则来编写代码的,不包括大括号和分号,而scss的语法和css书写语法类似;sass的安装和使用不细说了;
scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,是一种SCSS-like语言,弥补了sass和css之间的鸿沟;
  • 注释

注释分为三种:/* */css中显示,//css中不显示,/注释!/压缩不会被掉。
·@import 命令导入外部sass、scss、css文件


<style lang="scss">

@import './test.scss'; //导入外部scss文件
.myText {
   border:1px solid red;
}
</style>

·变量
声明变量的语法是:$+变量名+:+变量值;如下

$color:red; //声明变量 $color

区分默认变量
默认变量只需要在变量值后加上 !default , 用来设置默认值 ,对默认变量进行重新声明可以实现覆盖默认值;如

$color:red !default; //声明默认变量 $color
$color:purple; //根据需求覆盖默认变量
.father01 {
   color:$color;
}

区分全局变量和局部变量
全局变量是元素外声明的变量,局部变量是在元素里声明的变量,重复声明时局部变量会覆盖全局变量;

$height:200px; //全局变量声明不在大花括号内
$bgcolor:blue;
body {
   .father01 {  //嵌套
      width:$width;
      height:$height;
      $border:1px solid red; //局部变量是声明在元素内的
      border: $border;
      $bgcolor:purple; //全局变量和局部变量名一致时,调用局部变量进行覆盖
      background-color: $bgcolor;
   }
}

局部变量值后加上 !global 关键词可以使得局部变量变成全局变量;

body {
   .father01 {
      width:200px;
      height:200px;
      $border:1px solid red !global; //使用global关键词将$border变为了全局变量
      border:$border;
   }
   .father02 {
      width: 300px;
      height:300px;
      border:$border; //使用全局变量
   }
}

·变量嵌套引用:即字符串插值,需要使用 #{} 来进行包裹

$left:left;
.father02 {
   width: 300px;
   height:300px;
   border:$border; //使用全局变量
border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明
}

·变量计算

$left:left;
.father02 {
   width: 300px;
   height:300px;
   border:$border; //使用全局变量
border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明
}

·嵌套

选择器嵌套不多说了

属性嵌套(有相同属性前缀)如下

border:{
   color:red;
   width:5px;
   style:solid;
}

在嵌套时候可以使用 & 来引用父元素

.container {
   &>p {   //可以编译成CSS.container>p {} 效果
      color:purple;
   }
}

·继承

继承 .class 使用 @extend

.container {
   color:purple;
   border:2px dashed purple;
}
.myText {
   @extend .container; //这里将继承.container类的所有样式
   font-size: 22px;
}

·SCSS占位符 %
使用% 声明的代码块,如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起,代码变得十分简洁。

%m5 { background-color: lightblue;}
.P1 { @extend %m5; }

·重复代码块,使用混合@mixin命令定义,以及使用@include调用该mixin

@mixin normalStyle {
   //使用@mixin命令定义可重复使用的代码块
   width:300px;
   height:100px;
   color:black;
   background-color:lightblue;
}
.container {
   @include normalStyle;
   //使用@include 命令引用@mixin定义的代码块
}

在使用@mixin和@include时,传入参数和默认值

@mixin normalStyle($width,$height,$color,$defaultValue:orange) {
   width:$width;
   height:$height;
   color:$color;
   background-color:$defaultValue;
}
.container {
   @include normalStyle(300px,100px,green,lightgray);
}

SCSS使用编程式方法

.container {
   p {
      @if 1+1<3 {
         border:1px solid blue;
      } @else {
         border:1ps dashed palevioletred;
      }
   }
}

SCSS中的三种循环

for循环

在sass中的@for循环有两种方式:

①@for $i from <start> through <end>@for $i from <start> to <end>

其中$i表示变量,start表示开始值,end表示结束值;

through表示包括end这个数值;to表示不包括end这个数值;
while循环

只要@while后面的条件为true就会执行,直到表达式值为false时停止循环;
each  in循环

就是去遍历一个列表,然后从列表中取出对用值;他的指令形式为:@each $var in <list>($var为变量值,list为sassscript表达式)

//for 循环
@for $i from 1 to 5 {
   .item-#{$i} {
      border:#{$i}px solid;
   }
}
//while 循环
$m:8;
@while $m > 0 {
   .items-#{$m} {
      width:2em*$m;
   }
   $m:$m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $item in class01,class02 { //$item就是遍历了in关键词后面的类名列
   .#{$item} {
      background-color:purple;
   }
}
//会编译成 .class01 , .class02 {background-color:purple;}

·使用@function 自定义函数及使用

@function double($sn){ //SCSS允许自定义函数
   @return $sn*2;
}
.myText {
   border:1px solid red;
   width:double(200px); //使用在SCSS中自定义的函数
}

·可以直接使用SCSS内置的颜色函数,

.myText {
   color:black;
   &:hover{
      //以下的lighten()、darken()等是SCSS内置的颜色函数
      color:lighten(#cc3, 10%); // #d6d65c颜色变浅
      color:darken(#cc3, 10%); // #a3a329颜色加深
      color:grayscale(#cc3); // #d6d65c
      color:complement(#cc3); // #a3a329
   }
}

less得使用

目前各个模块审计版本多
使用less 要结合当前得webpack得版本去对应得下载使用
首先在安装好node之后

npm view webpack version  去查看webpack模块版本

在这里插入图片描述
在跟据版本号去下载安装对应得less 以及less-loader
npm install less@5 --save-dev
npm install less-loader@5 --save-dev


这样既可以使用啦
在这里插入图片描述

// 1.普通的变量
@bgColor:white;
@Height:50rpx;
.contain{
    background-color: @bgColor;
 
}
.row{
    height:@Height;
    margin-left:@Height;
}   


编译后
.contain {
  background-color: white;
}
.row {
  height: 50rpx;
  margin-left: 50rpx;
}



// .作为URL
@img-url:"../imgs/idnex";
img{
    background-image: url("@{img-url}/shouye.png");
}
编译后
img {
  background-image: url("../imgs/idnex/shouye.png");
}

等可参考less官方文档

相关博客链接

  • 8
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端成长营

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值