Sass和Less是什么?有什么区别?大家为什么要使用他们?

  1. 它们是什么?
    它们是 CSS 预处理器。它是 CSS 上的一种抽象层。它们是一种特殊的语法/语言编译成 CSS。
    例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性,如变量,继承,运算, 函数. Less 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox),也可以在服务端运行 (借助 Node.js)。

  2. 有什么区别?
    1、关于变量在Less和Sass中的唯一区别就是Less用@,Sass用$
    2、Less环境较Sass简单:Sass的安装需要安装Ruby环境,Less基于JavaScript,是需要引入Less.js来处理代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放在项目中。
    3、从功能出发,Sass较Less略强大一些
    ①sass有变量和作用域。

  • $variable,like php;
  • #{$variable}like ruby;
  • 变量有全局和局部之分,并且有优先级。
    ②sass有函数的概念;
  • @function和@return以及函数参数(还有不定参)可以让你像js开发那样封装你想要的逻辑。
    -@mixin类似function但缺少像function的编程逻辑,更多的是提高css代码段的复用性和模块化,这个用的人也是最多的。
    -ruby提供了非常丰富的内置原生api。
    ③进程控制:
    -条件:@if @else;
    -循环遍历:@for @each @while
    -继承:@extend
    -引用:@import
    ④数据结构:
    - l i s t 类 型 = 数 组 ; − list类型=数组; - list=map类型=object;
    其余的也有string、number、function等类型
    4、Less与Sass处理机制不一样
    前者是通过客户端处理的,后者是通过服务端处理,相比较之下前者解析会比后者慢一点
  1. 为什么要使用它们?
    结构清晰,便于扩展。
    可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
    可以轻松实现多重继承。
    完全兼容 CSS 代码,可以方便地应用到老项目中。Less 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与 Less 代码一同编译。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页