0
点赞
收藏
分享

微信扫一扫

less 和 scss 的 优缺点

小铺有酒一两不够 2022-04-27 阅读 67
前端

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;
}


 

举报

相关推荐

0 条评论