Vue2,从理论到实践

43 阅读3分钟

================================================================================

  • 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官方文档

常用命令

  • 混合样式:@mixin 名字(参数1,参数2…){…}

  • 取用混合样式:@include 名字(@mixin的名字)

  • 继承样式:@extend 需要继承的类、ID名、自定义的混合样式等的名字

  • 导入scss样式:@import "scss文件名"

  • 条件控制指令:@if 条件{…}

    循环控制指令:

  • @for $var from <开始值> through <结束值> -----------包括结束值

  • @for $var from <开始值> to <结束值> ------------不包括结束值

  • 循环List项目的控制指令:@each varinvar in List{}

  • 条件判断循环:@while 条件{…}

  • 用户自定义的函数:@function 名称(参数1,参数2…){…}

    警告和错误的提示:

  • @warn “…”------------------------在终端输出警告

  • @error “…”----------------在.css文件和终端输出错误

♨️往期精彩热文回顾

=============================================================================

✈️ **[Netty进阶 – WebSocket长连接开发

]( )**

✈️ **[Netty进阶 – 非阻塞网络编程 实现群聊+私聊+心跳检测系统

]( )**

✈️ **[Postman测试工具调试接口详细教程【向后端发送Json数据并接收返回的Json结果】

]( )**

✈️ **[Java面向对象 — 吃货联盟订餐系统(完整版)

]( )**

✈️ **[一分钟教你快速 搭建Vue脚手架(Vue-Cli)项目并整合ElementUI

]( )**

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始,原计划每天刷一道算法题,实际上每天有时候不止一题,一年最终完成了 600+:

凭借三年刷题经验,他在校招中很快拿到了各大公司的offer。

入职前,他把他的刷题经验总结成1121页PDF书籍,作为礼物赠送给他的学弟学妹,希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书,我仔细看了一遍,作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学,作者还给出了他结合众多数据结构算法书籍,挑选出的一千多道题的解题思路和方法,以供有需要的同学慢慢研究。

开源分享:docs.qq.com/doc/DSmRnRG…