Sass

这个是因为sass安装时获取源的问题，先修改sass安装的源，再运行 npm install 就成功了 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass 来源： https://www.cnblogs.com/mryaohu/p/12329647.html

https://www.jianshu.com/p/a2640d3476f8 下载ruby windows下的可执行文件.exe 进入 ruby官网 ，下载对应版本。 安装ruby 安装的时候需要注意勾选 Add Ruby executables to your PATH 添加到系统环境变量 安装.png.jpg ruby -v ruby 2.5.1p57 (2018-03-29 revision 63029) [x64-mingw32] 安装sass 进入淘宝rubygem镜像网站 https://ruby.taobao.org/ 执行以下命令： gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/ gem sources -l //出现如下结果 *** CURRENT SOURCES *** https://gems.ruby-china.org //再执行 gem install sass //执行结果 Fetching: rb-fsevent-0.10.3.gem (100%) Successfully installed rb-fsevent-0.10.3 Fetching: ffi-1.9.25-x64-mingw32.gem (100%) Successfully

1.vscode安装插件Sass. 2.同步安装插件Live Sass Compiler. 至此，vscode中就可以使用sass了。 注意： - 使用此方法，在html中映入的css文件为.css后缀文件名，而不是直接引用scss文件。 - sass插件是检测sass语法,Live Sass Compiler插件是将.scss文件编译为.css文件（这里需要点击watch sass按钮，才会生成编译后的css文件）。 点击watch Sass按钮后，vscode将会对所有.scss文件进行编译生成两个文件，分别为.css、.css.map。 再次点击，结束本次观察（如果还需在.scss文件中进行编码，请不要结束本次观察。修改scss后，点击保存.css文件会直接更新）。 来源： https://www.cnblogs.com/darkandwhite/p/12301917.html

SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS – @extend（继承）指令 SASS – 操作符 SASS – 函数 SASS – 输出格式 变量可以让整个网站保持一致性。你可以定义一个变量，然后在其他地方引用它，而不必再重复相同的值。要改这些值，只需在定义变量的那一个地方修改。 下面的Sass代码包含两个变量： $primary-color ， $secondary-color $primary-color: orange; $secondary-color: gold; body { color: $primary-color; background: $secondary-color; } 变量就像存储值的容器。在本例中，我们将值orange、gold存储在变量中。 每次需要使用orange颜色时，可以使用变量名来代替orange颜色。如果需要改一个颜色，只需在定义变量的那一个地方修改。 变量定义 变量以美元符号($)开头，后面跟变量名。 变量名和赋值之间用冒号(:)分隔。 注意：缩进语法、SCSS语法中，变量定义都是一样的。 连字符和下划线 变量名中连字符和下划线等效， $primary_color 与 $primary

sass变量用法 1、sass变量必须以$符开头，后面紧跟着变量名 2、变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样） 3、如果值后面加上!default则表示默认值 默认变量 sass的默认变量：仅需要在值后面加上 !default 即可。 scss.style css.style 默认变量解说： sass的默认变量： 一般是用来设置默认值，然后根据需求来覆盖的 覆盖方式： 只需要在默认变量之前重新声明下变量即可 编译后的line-height为2，而不是我们默认的1.5。 普通变量 sass的普通变量：定义之后可以在全局范围内使用。 scss.style css.style 特殊变量 定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。 scss.style css.style 多值变量 多值变量分为list类型和map类型: list类型有点像js中的数组 map类型有点像js中的对象 list list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等

https://www.jianshu.com/p/ab9ab999344b（copy） 本文以Sass做案例，Less的参考，基本配置大同小异。 假如我们有一个Sass的全局变量common.scss文件，路径 ../style/common.scss 代码如下: @mixin t-button($color,$background) { color:$color; background:$background; padding:5px 10px; } 现在我们想在一个vue文件里引用这个全局样式，怎么办呢？我们能按下边的方法导入。 <style> @import '../style/common.scss'; button{ @include t-button(#fff,blue); } </style> 但是这样有一个问题，如果还有其他vue页面也想用这个全局的common.scss文件，我们还需要在使用的vue页面里再次按照上面的方法引入，那么问题来了，如果我更改了这个common.scss文件的路径，那么每次我还要去修改所有的vue页面里的common.scss文件文件路径。有什么好的方法呢，让我一次引入，所有的vue页面均可以自动引用？ 1.添加依赖 npm install sass-resources-loader --save-dev

uni-app 中以下组件的高度是固定的，不可修改： 导航栏高度固定为 44px tabBar 高度固定为 56px 状态栏比较特殊，是一个变量 .status_bar{ height: var(--status-bar-height); width: 100%; } uni-app 使用 vue/cli 创建项目的时候，如果使用 scss 语法，在正常安装 node-sass 和 sass-loader 之后编译依然出错 解决办法 npm i sass-loader@7.3 降低 sass-loader 的版本即可 也可以选择另外一种解决方案，使用 stylus ，和 uni-app 无冲突。 自定义导航条——解决内容展示在状态栏的问题 　　下面是 CSS，背景色请根据自己的需求设置，我这边是需要展示全页面的背景图。 .bararea { position: relative; .barfixed { position: fixed; width: 100%; left: 0; top: 0; z-index: 998; } } .status_bar { height: var(--status-bar-height); width: 100%; } .nav_bar { position: relative; z-index: 999; background:

首先我描述一下问题场景 在拷贝旧项目到新项目中，BUILD的过程中遇到这个问题，它不是不是代码错误，是安装包的问题。我的问题大概是这样子： 其实就是说找不到一个文件或者目录，这里只需要重新执行一下： npm rebuild node-sass 所以就是重新Build一下node-sass?这个东西是啥？ 带着疑问，我看了官方包的描述（翻译成中文）： Node sass 是一个库，它为 Node.js 提供到 LibSass 的绑定，LibSass是流行的样式表预处理器 sass 的 C 版本。 它允许您以惊人的速度将 .scss文件本地编译为 css，并通过连接中间件自动编译。 原来是这么个包，但是这个包的安装成功率不高，不推荐大家使用。要用也换个镜像用。 来源： CSDN 作者： SevenGoldenStars 链接： https://blog.csdn.net/kingbox000/article/details/104264663

一句命令解决 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ 来源： https://www.cnblogs.com/wzming0730/p/12286727.html