简介1. Sass 和 ScssSass 和 Scss 其实是同一种东西，我们平时都称之为 Sass；Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 Scss文件。两者之间不同之处有以下两点：文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”
转载
2024-03-26 16:44:42
294阅读
之前一直总结的是CSS2的一些知识点，今天差不多总结完了JavaScript就回来补充一下CSS3的一些东西吧CSS权重CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。权重的等级可以把样式的应用方式分为几个等级，按照等级来计算权重1、!important，加在样式属性值后，权重值为 10000 2、内联样式，如
转载
2024-07-20 14:13:45
191阅读
目录一、老样纸，先上效果图效果图说明二、背景三、设计分析a. css变量b. sass实现方案四、实现步骤1. Demo工程地址2. 具体实现3. 工程目录结构4. 组件库实现步骤1) 先准备一个global.scss2) 组件库index.scss3) 开发者global.scss3) 开发者index.scss五、总结 一、老样纸，先上效果图效果图说明图中最顶部三个按钮是用来切换主题色的，然
SASS用法指南一、什么是SASS SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。 本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看官方文档了。二、安装和使用2.1 安装 SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。 假定
转载
2020-12-24 12:00:00
2205阅读
2评论
环境变量环境变量是一个系统配置。它的作用就是扩大命令的查找范围。命令行查找规则:当调用命令时 先查看是否是系统命令 如果是就使用 如果不是再执行第二步查看当前目录下是否有对应的可执行文件、批处理文件查看环境变量中的每一个路径下是否有对用的可执行文件、批处理文件Sass什么是Sass？ Sass是CSS的预编译语言。想要使用sass，就必须先安装sass模块：全局sass模块安装
npm i
前言在日常的Vue项目开发过程中，为了让项目更好的维护一般都会使用模块化开发的方式进行。也就是每个组件维护独立的template，script，style。主要介绍一下使用<style scoped>为什么在页面渲染完后样式之间并不会造成污染。示例搭建一个简单的Vue项目测试一下：终端执行npx webpack输出dist目录，在浏览器打开index.html调试一下看看现象：每个组件
基本思想：在html上添加data-theme属性通过对应的属性值切换不同的配置，使用data-theme时关于主题切换的这些事，网上已经有很多文章记录了，基本想法都是差不多的，在此，仅记录我自己使用的方法。设置的主题有三种:1.默认即白天主题 2.暗色主题 3.自定义主题，即自己选择颜色，我们在这先实现主题的切换。theme 主题切换config配置调整使用theme.scss文件，需要调整co
转载
2024-05-01 08:16:52
287阅读
目前最主流的CSS预处理器：Sass(SCSS)(基于Ruby)、LESS(基于NodeJS)、Stylus Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量、嵌套、混合、导入等高级功能。使用Sass以及Sass的样式库(如Compass)有助于更好地组织管理样式文件，以及更高效地开发项目 特色功能完全兼容CSS3在CSS基础上增加变量、嵌套、混合等功能通过函数进行颜色值与
转载
2024-08-14 21:24:36
348阅读
前天下载了个vue移动端的demo(大家也可以学习一下：https://github.com/toutouping/vue-case)，先是运行了cnpm install ；再运行了npm run dev ；然后就报了下面的错误： 对于刚进入编程领域的我来说，一看到这种报错，第一反应就是应该是scss没有安装，打开代码发现，demo里面果然用了scs
预处理语言出现的背景： CSS作为一种标记语言可以很好地完成页面样式的定义，但是一些标记语言固有的缺陷也限制了编写CSS的效率。要提高效率，一方面依赖工具，比如编辑器的自动补全；另一方面要依赖于语言本身的改进，但是由于CSS和浏览器以及互联网上的历史数据
属性和选择器嵌套是非常伟大的特性，因为他们不仅仅减少了你的编写量，而且通过视觉上的缩jinx使编写的样式结构更加清晰，更易于阅读个开发。原生的css导入 原生的css的@import规则允许在一个css文件中导入其他css文件。但这样执行到@import时，浏览器才会执行其他的css文件，导致页面加载起来特别慢。 sass 的@import规则，在省城css文件时就把相关文件导入进来。这就意味着所
为什么要提高代码扩展性我们写的代码都是为了一定的需求服务的，但是这些需求并不是一成不变的，当需求变更了，如果我们代码的扩展性很好，我们可能只需要简单的添加或者删除模块就行了，如果扩展性不好，可能所有代码都需要重写，那就是一场灾难了，所以提高代码的扩展性是势在必行的。怎样才算有好的扩展性呢？好的扩展性应该具备以下特征:需求变更时，代码不需要重写。局部代码的修改不会引起大规模的改动。有时候我们去重构一
Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如变量、嵌套、运算，混入 (Mixin)、继承、颜色处理，函数等)，更容易阅读。Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面，因此 Sass 语法进行了改良，Sas
npm npm i -D sass-loader node-sass webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.(css|scss)$/, use: ['style-loader', 'css- ...
转载
2021-09-09 10:38:00
660阅读
2评论
data() { return { colorStyle: '#ffffff' }}, created() { const style = 'aaaa' if (style 'dark') { this.colorStyle = '#ffffff' } else { this.colorStyle ...
转载
2021-07-24 16:37:00
617阅读
2评论
封装全局的scss样式
原创
2023-02-24 12:27:59
552阅读
最近在做VUE项目时用到了SCSS ，在这里总结一下SCSS在项目中是如何使用的。首先要了解什么是SCSS？SCSS是一种CSS预处理语言，定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POST
文章目录一、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阅读
