当前位置: 首页>前端>正文

less和scss效果不一致 less和sass优缺点

简述

sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用

sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理,引入less.js就可以处理,sass是基于ruby所以在服务器处理。

less优点

  • 可以在浏览器中运行,实现主题定制功能;

less缺点

  • 编程能力弱,不直接支持对象,循环,判断等;只有when判断
  • @variable 变量命名和css的@import/media/keyframes等含义容易混淆;
  • mixin/extend的语法比较奇怪;
  • mixin的参数如果遇到多参数和列表参数值的时候容易混淆;

sass优点: 

  • 用户多,更容易找到会用scss的开发,更容易找到scss的学习资源;
  • 可编程能力比较强,支持函数,列表,对象,判断,循环等;相比less有更多的功能;
  • 丰富的sass库:Compass/Bourbon;

sass缺点:

  • 在公司内部安装node-sass会失败,需要使用cnpm或者手工安装

less 和 sass 不同点:

1 基本语法

Less 的基本语法属于「CSS 风格」

Sass、相比之下激进一些,利用缩进、空格和换行来减少需要输入的字符    不过区别在于 Sass、同时也兼容「CSS 风格」代码

 Less:

.box {
  display: block;
}

Sass:

.box
  display: block

 2 嵌套语法 

三者的嵌套语法都是一致的,甚至连引用父级选择器的标记 & 也相同。

区别只是 Sass 可以用没有大括号的方式书写

 less

.a {
  &.b {
    color: red;
  }
}

 3 变量 

变量无疑为 CSS 增加了一种有效的复用方式,减少了原来在 CSS 中无法避免的重复「硬编码」

Less:

@red: #c00;

strong {
  color: @red;
}

Sass:

$red: #c00;

strong {
  color: $red;
}

4 @import

 Less 中可以在字符串中进行插值:

@device: mobile;
@import "styles.@{device}.css";

 Sass 中只能在使用 url() 表达式引入时进行变量插值:

$device: mobile;
@import url(styles.#{$device}.css);

 5 混入

混入(mixin)应该说是预处理器最精髓的功能之一了。

它提供了 CSS 缺失的最关键的东西:样式层面的抽象。

Less 的混入有两种方式:

1.直接在目标位置混入另一个类样式(输出已经确定,无法使用参数);

2.定义一个不输出的样式片段(可以输入参数),在目标位置输出。

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

 编译后

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

Sass 

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

less

.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  &:extend(.message);
  color: #e2e21e;
}

6 继承

Sass

.active {
   color: red;
}
button.active {
   @extend .active;
}

 


https://www.xamrdz.com/web/2v71925825.html

相关文章: