sass/scss、less 红太狼 2022-07-14 15:58 256阅读 0赞 一、Sass/Scss、Less是什么? Sass(Syntactically Awesome Stylesheets)是一种动态语言，Sass语法属于缩排语法，比css多很多玩法(如在sass中可以放变量、嵌套、运算，混入(Mixin)、继承、颜色处理、函数等) sass与scss是什么关系? .sass文件，如 #sidebar width: 30% background-color: #faa .scss文件，如 #sidebar { width: 30%; background-color: #faa; } sass的缩进语法，对于写惯css文件的web开发者来说，很不直观，也不能将css代码加入到sass里面，因此对sass语法进行了改良，称为了scss。与原来的语法兼容。 Less 也是一种动态样式处理器，同样可以在less中加入变量、继承、运算、函数等。less可以运行在客户端，也可以运行在服务器端(借助node.js)。 ## 二、sass/less和less的区别 ## 1、编译环境不一样 sass安装需要ruby环境，是在服务器端处理的，而less需要引入less.js文件来处理less代码输出css到浏览器。也可以使用考拉软件，直接将less文件，编译为css文件 2、定义变量符号不一样，less使用的是@,sass/scss使用的是$. 3、输出设置，less没有输出设置，Sass提供4种输出选项:nested(嵌套缩进的css),compact(简洁格式的css代码),expanded:展开的多行css代码，compressed:压缩后的css代码。 4、sass支持条件语句，可以使用if\{\}else\{\},for\{\}循环等。而less不支持 5、引入外部文件时，scss外部文件名，必须以*开头，sass不能以*开头，否则不会编译为css 6、sass和less的工具库不同 sass有工具库compass,简单说，sass和compass的关系有点象js和jQuery。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。 Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。
还没有评论，来说两句吧...