首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS那么SCSS和SASS 有什么区别
首先，学会使用sass：1.先下载和安装node-sass和一些加载器$ cnpm install sass-loader node-sass vue-style-loader --D2.配置webpake加载器:webpack.base.config.js //从这一段上面是默认的！不用改！下面是没有的需要你手动，相当于是编译识别sass!{ test: /\.scss$/, loaders
转载
2024-04-20 21:00:07
104阅读
你是否曾经为组件设计过样式，却只知道应用了不需要的CSS规则?也许你会重新考虑CSS的另一个部分，所以规则不适用，或者你会添加!important规则，只是为了让它发挥作用。这就是CSS Modules要解决的问题。让我们看看CSS Modules的官方定义：A CSS Module is a CSS file in which all class names and animation name
转载
2024-05-29 10:09:32
168阅读
这篇文章主要介绍了关于vue如何引入sass全局变量的解析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，这篇文章主要介绍了vue引入sass全局变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下sass或者less都提供变量设置，在需求切换主题的项目中使用less或者sass变量，只要修改变
简介1. Sass 和 ScssSass 和 Scss 其实是同一种东西，我们平时都称之为 Sass；Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 Scss文件。两者之间不同之处有以下两点：文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”
转载
2024-03-26 16:44:42
294阅读
Webpack: CSS 到 Sass/Scss 与 CSS Module 文章目录Webpack: CSS 到 Sass/Scss 与 CSS Module前言正文1. 在 JS 中引入 CSS：style-loader、css-lodaer2. 从 CSS 进阶到 SCSS：sass-loader + node-sass3. CSS Module 实现命名空间隔离：css-loader3.1
转载
2024-09-06 00:20:15
51阅读
基本思想：在html上添加data-theme属性通过对应的属性值切换不同的配置，使用data-theme时关于主题切换的这些事，网上已经有很多文章记录了，基本想法都是差不多的，在此，仅记录我自己使用的方法。设置的主题有三种:1.默认即白天主题 2.暗色主题 3.自定义主题，即自己选择颜色，我们在这先实现主题的切换。theme 主题切换config配置调整使用theme.scss文件，需要调整co
转载
2024-05-01 08:16:52
287阅读
预处理语言出现的背景： CSS作为一种标记语言可以很好地完成页面样式的定义，但是一些标记语言固有的缺陷也限制了编写CSS的效率。要提高效率，一方面依赖工具，比如编辑器的自动补全；另一方面要依赖于语言本身的改进，但是由于CSS和浏览器以及互联网上的历史数据
作者：fengshi123前言Sass是css3语言的扩展，它能帮你更省事地写出更好的样式表，使你摆脱重复劳动，使工作更有创造性。因为你能更快地拥抱变化，你也将敢于在设计上创新。你写出的样式表能够自如地应对修改颜色或修改html标签，并编译出标准的css代码用于各种生产环境。Sass语法比较简单，难点在于如何将Sass运用到实际项目中，解决css存在的痛点，从而提高我们效率。经过实际项目
文章目录一、scss概述二、安装Sass编译器三、SCSS语法细则（一）、注释（二）、数据类型（三）、变量（四）、占位符（五）、嵌套（六）、函数（七）、插值（八）、选择和循环结构（九）、样式混入 @mixin 和 @include指令（十）、@import指令（十一）、@extend指令四、Bootstrap定制五、相关文档推荐 一、scss概述1.动态样式语言：也称为预编译样式语言，指在CSS
转载
2024-10-17 21:33:49
143阅读
最近在做的项目使用到了主题切换，我也趁此机会学习了一下SCSS/SASS这门CSS编译型语言，特此研究并带实现一个Vue Demo中实现主题切换。SCSS是SASS兼容CSS的版本，本文内全部使用SCSS一称。✏️大体思路如下：1.使用vuex全局执行命令切换主题 (state - mutations 无须异步)2.遍历主题色并设置混合，在需要的地方插入混合，使用方法查找对应颜色，生成嵌套，写全局
转载
2024-09-14 19:28:29
580阅读
我们平时都称之为 Sass，其实可分成sass和scss， 其中Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(?，以“.sass”后缀为扩展名；而 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的语法书写和我们的 CSS 语法书写方式非常类似，较为宽松，以“.scss”后缀为扩展名；二者可以说是一个东西sass嵌套选择器嵌套这里的
已经用了scss很久了，有时间来归纳一下。 目录1. 基本用法1.1 变量1.2 计算功能1.2.1 数字运算1.2.2 颜色值运算1.2.3 字符串运算1.2.4 布尔运算1.3 嵌套1.4 注释 /* */ 与 // (Comments: /* */ and //)2.代码的重用2.1 继承@extend2.2 混合指令 @mixin2.3 插入文件 @import3.1 循环语句3.2 自定
转载
2024-06-23 13:49:01
366阅读
ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件ElementUI官网：http://element-cn.eleme.io/#/zh-CN注1：类似前端框架还有iview 案例：<!DOCTYPE
转载
2024-04-18 10:18:39
95阅读
关于element-ui表格使用的一些方法最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台系统,里面表格用到比较多,但是其实我也只是一个刚入行不久的菜鸟,只看官方文档,开发起来还是有难度.不过经过不停的测试以及查阅资料,还是勉强实现了效果,这里就把一些方法分享出来,
转载
2024-05-18 06:52:45
115阅读
简介
element-
ui是一个
ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的
ui框架。Layout布局（el-row、el-col）
element-
ui借用了bootstrap框架的思想，使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下<el-row>
<el-col :span="6"><div class="
转载
2024-03-28 12:41:54
704阅读
Layout Element 布局元素包括7个属性，其中前6个属性是每个布局元素自身大小信息的设定，一般用于布局控制器对其进行大小和位置的设定。 1.布局涉及两个核心要件，包括布局控制器（La
转载
2024-07-30 19:47:31
48阅读
目录前言一、检查项目开发环境二、搭建项目1.安装vue-cli2.创建vue项目总结前言随着框架的流行，越来越多的开发者喜欢用框架开发项目，以vue、react等居主流，国内比较常用的就是vue进行项目的搭建，本系列文章主要使用vue+webpack进行项目的搭建，其中使用了elementUI进行了扩展，增加到后台系统的布局和路由相关知识，有兴趣就往下看吧~一、检查项目开发环境搭建项目前，我们要检
转载
2024-05-08 16:58:32
66阅读
历时2周左右，我终于完成了我的毕业项目。虽说页面不是特别美观，但是对于一个后四、总结 一、页面展示登录界面管理界面数据操作二、代码展示登录页代码<templa
转载
2024-04-17 16:59:33
92阅读
插槽---可以理解成占位符。方便组件功能的扩展。 一个 slot 标签就是一个插槽，如果没有内容传入，则显示 slot 标签原有的内容，如果有内容插入，则显示插入的内容。vue的插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。匿名插槽（slot 不带 name 属性），看下面例子：先在main.js定义一个组件my_slot:Vue.com
转载
2024-03-16 12:00:26
746阅读
