最近在看前端。其一因为手里有个项目uniapp的里面使用了sass，但是有sass报错，其次想自己写个vue2后台，感觉sass写起来科学点。但是……版本这个东西……太费劲了……vue2-cli集成webpack，使用vuecreate项目名后再安装sass相当于在webpack的基础上安装sass。需要安装sass依赖包sass-loader,以及它的依赖包sass-loader。看很多教程说在build/webpack.config.js中再改东西，但是我用vue2创建的项目没找到这个文件先忽略。安装环境：win10webpack5.75//系统全局vue2@vue/cli4.5.14//
最近在看前端。其一因为手里有个项目uniapp的里面使用了sass，但是有sass报错，其次想自己写个vue2后台，感觉sass写起来科学点。但是……版本这个东西……太费劲了……vue2-cli集成webpack，使用vuecreate项目名后再安装sass相当于在webpack的基础上安装sass。需要安装sass依赖包sass-loader,以及它的依赖包sass-loader。看很多教程说在build/webpack.config.js中再改东西，但是我用vue2创建的项目没找到这个文件先忽略。安装环境：win10webpack5.75//系统全局vue2@vue/cli4.5.14//
因为没有node_modules依赖，我直接1.npminstall，但是报错：2.npminstall--force报错3.npmauditfix--force报错4.npminstall--legacy-peer-deps报错5.npminstall--registryhttps://registry.npm.taobao.org直接安装淘宝镜像也报错6.npmnode-sass@7.0.1--legacy-peer-deps报错7.npmcacheclean或者npmcacheclean--force无用8.最后采用办法1解决了解决办法1：（我解决了）npmconfigsetsass_b
因为没有node_modules依赖，我直接1.npminstall，但是报错：2.npminstall--force报错3.npmauditfix--force报错4.npminstall--legacy-peer-deps报错5.npminstall--registryhttps://registry.npm.taobao.org直接安装淘宝镜像也报错6.npmnode-sass@7.0.1--legacy-peer-deps报错7.npmcacheclean或者npmcacheclean--force无用8.最后采用办法1解决了解决办法1：（我解决了）npmconfigsetsass_b
在之前我们已经使用用/来进行计算，但如下情况不一样例如p{font:16px/30pxArial,Helvetica,sans-serif;}如果需要使用变量，同时又要确保/不做除法运算，而是完整地编译到CSS文件中，这种情况怎么办？？？可以使用#{}插值语句将变量包裹。使用插值语法p{$font-size:12px;$line-height:30px;font:#{$font-size}/#{$line-height}Helvetica,sans-serif;}通过#{}插值语句可以在选择器、属性名、注释中使用变量：$class-name:danger;$attr:color;$author
在之前我们已经使用用/来进行计算，但如下情况不一样例如p{font:16px/30pxArial,Helvetica,sans-serif;}如果需要使用变量，同时又要确保/不做除法运算，而是完整地编译到CSS文件中，这种情况怎么办？？？可以使用#{}插值语句将变量包裹。使用插值语法p{$font-size:12px;$line-height:30px;font:#{$font-size}/#{$line-height}Helvetica,sans-serif;}通过#{}插值语句可以在选择器、属性名、注释中使用变量：$class-name:danger;$attr:color;$author
sass运算符虽然没有像那些编程语言那么强大，但为了更灵活的输出css，也增强了一些运算符的功能，例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符...等等，接下来就来详细介绍下这些运算符的基本使用赋值运算符赋值运算符就是把一个值赋值给一个变量，通过冒号（：）的方式进行承接（很多编程语言是=），例如：$font-size:16px;也可以把一个变量赋值给另一个变量$font-size:16px;$h3:$font-size;赋值的变量必须先有值等号操作符等号操作符用于比较两个表达式的值是否相等，所有数据类型都支持等号运算符:符号说明==等于!=不等于例1：数字比较：$the
sass运算符虽然没有像那些编程语言那么强大，但为了更灵活的输出css，也增强了一些运算符的功能，例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符...等等，接下来就来详细介绍下这些运算符的基本使用赋值运算符赋值运算符就是把一个值赋值给一个变量，通过冒号（：）的方式进行承接（很多编程语言是=），例如：$font-size:16px;也可以把一个变量赋值给另一个变量$font-size:16px;$h3:$font-size;赋值的变量必须先有值等号操作符等号操作符用于比较两个表达式的值是否相等，所有数据类型都支持等号运算符:符号说明==等于!=不等于例1：数字比较：$the
Sass提供了许多内置模块，其中包含有用的函数（以及mixin）。这些模块可以像任何用户定义的样式表一样使用@use规则加载，它们的函数可以像任何其他模块成员一样调用。所有内置模块URL都以sass开头：表示它们是sass本身的一部分。常见函数简介，更多函数列表可看：https://sass-lang.com/documentation/modulesColor(颜色函数) sass包含很多操作颜色的函数。例如：lighten()与darken()函数可用于调亮或调暗颜色，opacify()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色
Sass提供了许多内置模块，其中包含有用的函数（以及mixin）。这些模块可以像任何用户定义的样式表一样使用@use规则加载，它们的函数可以像任何其他模块成员一样调用。所有内置模块URL都以sass开头：表示它们是sass本身的一部分。常见函数简介，更多函数列表可看：https://sass-lang.com/documentation/modulesColor(颜色函数) sass包含很多操作颜色的函数。例如：lighten()与darken()函数可用于调亮或调暗颜色，opacify()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色
