sass和less的区别使用_连山易的原理及用法

sass和less的区别使用_连山易的原理及用法1.原理          1.1Less定义:是一种动态的样式语言,使CSS变成一种动态的语言特性,如变量、继承、运算、函数。Less既

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

1.原理

          1.1 Less定义:是一种动态的样式语言,使CSS变成一种动态的语言特性,如变量、继承、运算、函数。Less既可以在客户端上面运行(支持IE6以上版本、Webkit、Firefox),也可以在服务端运行(Node.js)
          1.2 SaSS定义:是一种动态样式语言,SaSS里面的语法属于缩排语法,对于之前的css相比,多出了很多功能,更容易阅读
          1.3 预处理器。Less和SaSS都属于预处理器,它会定义一种新的语言,其总体思想是为CSS增加一些编程的特性,将 CSS 作为目标生成文件,
之后开发者就只要使用这种语言进行CSS的编码工作。

2.两者之间的区别

          2.1 编译环境:
                Sass是在服务端上面处理的,之前是Ruby,现在是Dart-Sass或者是Node-Sass,但是Less在编译时,需要引入less.js来处理Less代码输出CSS到浏览器上,也可以在开发服务器上将Less语法编译成css文件,输出CSS文件到生产包目录,也有在线编译地址。
          2.2 变量符
                Less是@,而Sass是$,示例代码如下

//Less-变量定义
@color: #008c8c; 
#footer { 
   
  border: 1px solid @color; 
}
//scss-变量定义
$color: #008c8c;

#footer { 
   
  border: 1px solid $color; 
}

Jetbrains全家桶1年46,售后保障稳定

          2.3 输出设置
                Less没有输出设置,而Sass有4种输出选项,如下
                         nested:嵌套缩进的css代码
                         expanded:展开的多行css代码
                         compact:简洁格式的css代码
                         compressed:压缩后的css代码
          2.4 Sass支持条件语句,可以使用if{}else{},for{}循环等等,而Less不支持,其中if(){}else{}示例代码如下

@mixin txt($weight) { 
    
  color: white; 
  @if $weight == bold { 
    
    font-weight: bold;
  } 
  @else if $weight == light { 
    
    font-weight: 100;
  } 
  @else { 
    
    font-weight: normal;
  } 
}
.txt1 { 
    
  @include txt(bold); 
}

编译结果

.txt1 { 
   
  color: white;
  font-weight: bold; 
}

3.总体优点

           3.1 提供CSS缺失的样式层复用机制
           3.2 减少冗余代码
           3.3 提高样式代码的可维护性
           3.4 结构清晰,便于扩展可以方便的屏蔽浏览器私有的语法差异
           3.5 轻松实现多重继承,完全兼容了CSS代码,提高了开发效率。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/226758.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号