vue 安装less和sass「终于解决」

vue 安装less和sass「终于解决」vue安装less和sass

大家好,欢迎来到IT知识分享网。

less和sass是两种常用的css预处理器

: 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS

scss可以理解是sass的一个升级版本, 增加了一些功能

在vue项目上安装SaSS

1, 安装sass-loader, node-sass

cnpm install sass-loader node-sass –save

注: 安装后,如果运行报错,可能是因为sass-loader版本过高,可安装指定版本 cnpm install sass-loader@5.0.0 –save

2, 在组件的style标签上添加属性 lang=”sass”

然后就可以在style标签中写sass语法了

sass具体用法请参考:Sass教程 Sass中文文档 | Sass中文网

在vue项目上安装LESS

1.安装 less 和 less-loader。

命令: npm install less less-loader –save-dev

2,代码中的 style 标签中 加上 lang=”less” 属性即可使用,或者通过@import引入.less文件

less具体用法请参考:

Less 快速入门 | Less.js 中文文档 – Less 中文网

在vue项目创建时可选择css预编译器, 创建项目后即可直接使用scss/less语法

注意: less 和 scss 语法100% 兼容css语法

问:less/scss相比于css有哪些优势?

答:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

问: sass和less有哪些区别?

答: 1, less使用@定义变量 sass使用$定义变量

2, sass支持循环判断 less不支持循环判断

有用的话请点赞,关注加收藏哦(。・ω・。)ノ♡

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/24326.html

(0)
上一篇 2023-08-25 11:45
下一篇 2023-08-27 21:33

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信