scss（sass）和less 的相关整理

最新推荐文章于 2023-03-15 15:28:00 发布

qq_41629522

最新推荐文章于 2023-03-15 15:28:00 发布

阅读量310

点赞数

分类专栏：每天一个前端小知识文章标签： css sass

本文链接：https://blog.csdn.net/qq_41629522/article/details/105675733

版权

本文介绍了Sass(Scss)和Less两种CSS预处理器，阐述了它们的基本概念、区别以及Sass的高级特性，如条件语句和循环。同时，讨论了Sass的四种输出格式，并提到了如何引用外部CSS文件。

摘要由CSDN通过智能技术生成

1.什么是scss（sass）/less ？

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。所以sass包含scss。scss只是为了更像css 而推行的语法标准。

而 Less也是一种动态样式语言.对CSS赋予了动态语言的特性，如变量，继承，运算，函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

2.Sass/Scss与Less区别

1.编译的环境不一样。scss的安装环境需要是Ruby。而less 需要通过less.js来编译less代码输出到浏览器。编译出来的css文件可以直接引入到项目中

2.变量符不一样 Less是@，而Scss是$，而且变量的作用域也不一样。

Less-作用域
@color: #00c; /* 蓝色 */
#header {
  @color: #c00; /* red */
  border: 1px solid @color; /* 红色边框 */
}

#footer {
  border: 1px solid @color; /* 蓝色边框 */
}