• less和sass


    LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单。

    LESS 在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说那样,LESS 可以让我们用更少的代码做更多的事情。

    本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。下面是一个简单的例子:

     @color: #4D926F; 
    
     #header { 
      color: @color; 
     } 
     h2 { 
      color: @color; 
     }
    经过编译后:
    #header { 
      color: #4D926F; 
     } 
     h2 { 
      color: #4D926F; 
     }


    SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
    SASS同LESS一样引入了变量,Mixin(混入),运算以及函数等功能。例如:
    $blue : #1875e7; 
    div {
       color : $blue;
    }
    编译后:
    div{
      
    color : #1875e7


    SASS有很多可用的方法和逻辑。例如:条件和循环语句。LESS也可以做到,但不是很高效且不直观。
    LESS的目标是尽量跟CSS在风格上保持一致,包括语义和结构。这对于用户的书写习惯来说是一个很好的想法,这样也让它的工作方式和SASS有很大的不同。LESS是基于JavaScript,所以,是在客户端处理的。
    SASS是基于Ruby的,然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。

  • 相关阅读:
    HTML 照片从模糊到清晰的渐变加载显示方法
    Vue -- 从vue-cli 到@vue/cli 安装
    Vue -- highcharts map使用
    Vue -- admin
    EXCEL根据行列值查询得到交叉点值的方法
    如何使用curl命令测试负载均衡SLB会话保持的有效性
    centos7 pdsh安装
    selenium调用Chrome时自动选择证书
    jenkins使用 HTML Publisher插件后查看 html 报告显示不正常
    spring boot Jackson忽略字段不序列化字段
  • 原文地址:https://www.cnblogs.com/f19huangtao/p/4824878.html
Copyright © 2020-2023  润新知