3

为何不推荐使用 Sass 作为 css 预处理器

jeffjade 2020-10-16 发布于前端 quickapp.lovejade.cn

Sass 是成熟、稳定、强大的专业级 CSS 扩展语言。它兼容 CSS、功能丰富、社区庞大,为业界认可,被广泛应用;本文将根据使用 Sass 存在的痛点,以及更好的替代品,来陈述个人观点:不推荐使用 scss 作为 css 预处理器,更倾向于使用 Less 或 Stylus。

1.1k 浏览 4 收藏 报告
11 条评论
皮皮盐 · 2020-10-21

以前是基于ruby的时候觉得sass蛮麻烦的,后来有了node-sass还好

回复

Bestime · 2020-10-16

一直使用 stylus。不喜欢Sass

回复

0

嗯嗯,stylus 与 less 都蛮好用。

jeffjade 分享者 · 2020-10-16
alicorn · 2020-10-16

可以用 dart-sass 这个都出来挺久的了
npm i sass

回复

0

感谢分享。

jeffjade 分享者 · 2020-10-16
SHERlocked93 · 2020-10-16

打开网址有点慢,我来概括一下:

  1. node-gyp 需要python,
  2. node-sass 和 node 的版本兼容问题

回复

0

差不多如此(网站部署在 DO 服务器,国内访问可能会有些影响)。

jeffjade 分享者 · 2020-10-16
我什么都不会 · 2020-10-16

这点环境处理不好就不要学了,后端语言环境更复杂,论功能的强大scss比其他强大多少倍

回复

0

您指 scss 要比 less stylus 这些强大很多倍么?功能上强大的点,可以大致说明下么?

jeffjade 分享者 · 2020-10-16
0

看看boostrap4和3的改进吧

我什么都不会 · 2020-10-16
0

$name-list: margin padding;
$short-name: m p;
$gap: 5 10 15 20 25 30 35 40;
$type: top bottom left right lr tb tblr;

@each $prefix in $short-name {
$i: index($short-name, $prefix);
@each $size in $gap {

@each $name in $type {
  @if $name == lr {
    .#{$prefix}-#{$name}-#{$size} {
      #{nth($name-list, $i)}-left: #{$size}px;
      #{nth($name-list, $i)}-right: #{$size}px;
    }
  } @else if $name == tb {
    .#{$prefix}-#{$name}-#{$size} {
      #{nth($name-list, $i)}-top: #{$size}px;
      #{nth($name-list, $i)}-bottom: #{$size}px;
    }
  } @else if $name == tblr {
    .#{$prefix}-#{$name}-#{$size} {
      #{nth($name-list, $i)}: #{$size}px;
    }
  } @else {
    .#{$prefix}-#{$name}-#{$size} {
      #{nth($name-list, $i)}-#{$name}: #{$size}px;
    }
  }
}

}
}

就这段代码,你用其他的预处理器写出来看看

我什么都不会 · 2020-10-16
载入中...