一、什么是scss
scss是成熟、稳定、强大的css预处理器,而scss是sass3版本当中引入的新语法特性,完全兼容css3的同时继承了sass强大的动态功能。
二、scss与css的区别
- scss代表sassy css。与sass不同,scss并非基于缩进。
- .sass扩展名用作sass的原始语法,而scss通过.scss扩展名提供更新的语法。
- 与sass不同,scss与css一样具有花括号和分号。
- 与scss相反,sass很难阅读,因为它与css截然不同。这就是为什么scss成为更推荐的sass语法的原因,因为它更易于阅读,并且与native css非常相似,同时又享受了sass的强大功能。
scss更加优秀!
三、vue中安装scss
建议在cmd窗口安装并使用管理员方式打开
️安装scss
使用阿里云服务器下载依赖,在国内下载会比npm外网下载依赖快一些
cnpm i -d node-sass sass-loader //vue2.5.2需要降级安装 cnpm i -d node-sass@4.14.1 sass-loader@7.3.1
️运行项目进行测试
输入以下命令运行项目
npm run dev
运行成功~
四、项目中使用scss
在vue文件中指定样式语言为scss
vue代码
<template> <div class="box-container1"> <el-button type="primary" @click="m1">普通</el-button> <span class="span1">yes</span> </div> </template>
到此完美使用scss~
补充:全局引用scss
先安装这个插件来进行全局引用scss
npm install sass-resources-loader --save-dev
然后修改build文件夹中的utils.js文件
将
scss: generateloaders('sass'),
改为
scss: generateloaders('sass').concat( { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/index.scss')//这里改为自己的index.scss文件路径 } } )
项目里每个组件都可以直接用base.scss文件内的变量及样式了。记得style内加上lang=“scss”
<style scoped lang="scss">
scss常用命令
scss官方文档
常用命令
- 混合样式:@mixin 名字(参数1,参数2…){…}
- 取用混合样式:@include 名字(@mixin的名字)
- 继承样式:@extend 需要继承的类、id名、自定义的混合样式等的名字
- 导入scss样式:@import “scss文件名”
- 条件控制指令:@if 条件{…}
循环控制指令: - @for $var from <开始值> through <结束值> ———–包括结束值
- @for $var from <开始值> to <结束值> ————不包括结束值
- 循环list项目的控制指令:@each $var in $list{}
- 条件判断循环:@while 条件{…}
- 用户自定义的函数:@function 名称(参数1,参数2…){…}
警告和错误的提示: - @warn “…”————————在终端输出警告
- @error “…”—————-在.css文件和终端输出错误
总结
到此这篇关于vue2.x安装并使用scss的文章就介绍到这了,更多相关vue2.x安装使用scss内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!
黄山市民网:https://www.huangshanshimin.com/