【系统学习css】scss和sass以及 less的关系，node-sass、dart-sass和sass-loader是啥

每日鸡汤，每一个想要学习的念头都是未来的你向自己求救

首先我们在package.json中安装的依赖名称都是包含sass这四个字符的，但是在style标签中使用的时候一般是用<style lang="scss>，【注意第二个字母，一个a，一个c】

这是为什么呢，我们来看一下sass和scss的关系。

参考链接

sass和scss其实是一样的css预处理语言，scss是sass3引入的新语法，所以就是说scss隶属于sass，scss语法完全兼容了css3, 并且继承了sass的强大功能。

-- 区别是

（1）sass 是有严格缩进风格的，不使用花括号和分号看，所以用起来很不方便。

（2）scss 使用缩进，就方便了很多，所以我们在实践中一般都是使用lang="scss"

但是正如上面所说， scss是sass的一种语法，所以在使用scss的时候需要安装sass-loader 和node-sass

我们在说使用的是某某语言的时候说的都是sass，但是具体到某个文件的后缀名，会分为scss(新)和sass(旧)，所以当问到你使用那中语言写css？即便你使用的scss后缀的文件，你也应该说使用的是sass语言。

类似word文件，新版本后缀名是docx，旧版本是doc，但是我们描述这个文件的时候，就说它是一个word文件

那么问题来了，sass-loader和node-sass到底是什么，有什么关系？

（1）sass-loader 依赖于node-sass , 所以想要使用scss语言必须安装node-sass

（2）sass-loader 将scss和sass语言编译成css

sass-loader | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/loaders/sass-loader/

（3）node-sass在安装的时候经常会出现问题，比如不同的node-sass版本需要对应不同的node版本，而且，同一个node版本，在安装不同版本的node-sass的时候也会有很多问题，让人头大，我就遇到了一个问题，就是node-sass 4.12.0总是安装失败，请看这篇文章。

（4）所以现在更多的项目选择使用dart-sass，问题会少很多，dart-sass相当于重写了node-sass, dart-sass安装更快。 同时，在更换成dark-sass的时候有一些语法需要改一下，比如 /deep/ 需要给成:deep() 

Sass: Dart SassSyntactically Awesome Style Sheetshttps://sass-lang.com/dart-sass

知识扩展深度选择器,参考

/deep/ 有时候不好使，是因为node-sass版本的问题，改成::v-deep 试一试，再不好使可以重新安装node-sass 

如果使用的是dart-sass, 深度选择器需要这样用:deep()

less也是一种动态样式语言，但是和sass/scss 编译环境不一样、变量符不一样less是@ scss是$ 具体参考

SCSS, Sass, 和 Less 都是一种预处理器语言，用于增强 CSS 的功能，使得样式表更易于编写和维护。它们之间的主要区别在于语法和特性：

1. SCSS (Sassy CSS):

   • SCSS 是 Sass 的一种语法扩展，意味着所有有效的 CSS 也是有效的 SCSS。
   • SCSS 使用大括号 {} 和分号 ; 来定义样式规则，就像常规的 CSS 一样。
   • SCSS 支持嵌套规则，变量，混合（mixins），继承，以及许多其他功能。
   • SCSS 文件的扩展名通常是 .scss。

2. Sass:

   • Sass 是 "Syntactically Awesome Stylesheets" 的缩写，是 SCSS 的前身。
   • Sass 使用严格的缩进来表示层级结构，类似于 Python 的缩进风格。
   • Sass 语法更加简洁，省略了大括号 {} 和分号 ;，通过缩进来表示嵌套和规则之间的关系。
   • Sass 也支持变量，混合，继承等功能。
   • Sass 文件的扩展名通常是 .sass。

3. Less:

   • Less 是另一种 CSS 预处理器，其语法与 CSS 更为接近，相对于 SCSS 和 Sass，更容易学习和上手。
   • Less 使用类似于 CSS 的语法，不需要额外学习新的语法规则。
   • Less 也支持变量，混合，继承等功能，尽管其实现方式与 SCSS 和 Sass 可能略有不同。
   • Less 文件的扩展名通常是 .less。

总的来说，SCSS 和 Sass 语法相对于 Less 更加灵活，但是在学习曲线上可能稍微陡峭一些，而 Less 更加接近普通的 CSS 书写风格，更易于初学者上手。选择其中之一通常取决于个人偏好和项目需求。