关闭

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

时间: 2020-09-15阅读: 53标签: Sass

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


Sass Vs Scss

Sass 有两种语法
第一个被称为 SCSS(Sassy CSS),在本参考文献中一直使用,它是 CSS 语法的扩展。这意味着每个有效的 CSS 样式表,都是具有相同含义的有效 SCSS 文件,两者完全兼容。下文描述的 Sass 功能增强了此语法。使用此语法的文件扩展名为 .scss
第二种或更旧的语法称为缩进语法(有时也称为“ Sass”),提供了一种更为简洁的 CSS 编写方式。它使用缩进而不是方括号来表示选择器的嵌套,并使用换行符而不是分号来分隔属性。使用此语法的文件扩展名为 .sass

以上出自 Sass 官网对两者的解释。因为 scss 完全兼容 css,目前一般常用的是 scss;但 scss 也是 Sass 语法一部分,因此就以此为标题;言下之意,无论是 .scss 还是 .sass 皆不推荐使用。


不推荐使用的理由

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,如果安装并单独使用 sass,这并无什么问题;

# 安装 sass
npm install -g sass

# 使用 sass
sass source/stylesheets/index.scss build/stylesheets/index.css

但在工程化项目中,就另当别论了;,需要借助 node-sass。它虽然能够以惊人的速度,通过连接中间件自动将 .scss 文件本地编译为 css,但同时存在很多问题,导致在有的时候引发巨大痛点,这便是“不推荐使用 Sass 作为 css 预处理器”主要理由。

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass.

node-sass 存在的痛点

node 版本与 node-sass 版本不兼容

node-sass 与 Node.js 版本相关联;这就导致,一旦本地 Node.js 升级,就会出现 node-sass 无法工作的情况,如下报错:

Module build failed: ModuleBuildError: Module build failed: Error: Node Sass does not yet support your current environment:
This usually happens because your environment has changed since running npm install. Run npm rebuild node-sass to build the binding for your current environment.
Module build failed (from ./node_modules/sass-loader/index.js):Error: Missing binding /.../xxx/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x

通常遇见类似问题,你就需要通过 rebuild 或重新安装 node-sass 来解决,徒增烦恼;当然,也可以借助 nvm 来切换至 node-sass 对应 Node.js 版本;

npm rebuild node-sass

# Or
npm uninstall node-sass
npm install node-sass

# Or
nvm use [node-sass 对用的 Node 版本]

需要 node-gyp 作为先决条件

node-sass 需要 node-gyp 作为先决条件,而 node-gyp 又需要您安装了兼容版本的 Python,啧啧,这真是,不出问题还好;出现就得好一番折腾(而且其报错并不是很友好,就需要定位排查、查阅各种资料来修复)。

node-gyp requires that you have installed a compatible version of Python, one of: v2.7, v3.5, v3.6, v3.7, or v3.8. If you have multiple Python versions installed ......

先前因为需要,在 Mac 上,需要将 Python2 升级至 Python3,之后就导致各种 node-sass 问题,好一番折腾才修复。

gyp verb check python checking for Python executable "python" in the PATH
gyp verb which succeeded python /usr/local/bin/python
gyp ERR! configure error
gyp ERR! stack Error: Command failed: /usr/local/bin/python -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax
/Users/xxx/.node-gyp/12.13.0/include/node/v8.h:3039:5: note: candidate constructor not
viable: requires 2 arguments, but 1 was provided
Utf8Value(Isolate* isolate, Localv8::Value obj);>

binding.node 源无法访问或速度慢

实际上 node-sass 依赖了一个二进制文件 binding.node,从 npm 源安装完本体后还会从 github(默认源) 下载 binding.node;这就导致默认情况下,下载 node-sass 依赖很迟缓。

以上,SASS 不仅需要额外安装 node-sass (很慢),而且跟本地开发环境(Node.js,Python)高度挂钩,容易出现各种诡异问题,故而不推荐使用;而且,SASS 所提供的常用功能,Less、Stylus 也同样具备;而且 Less、Stylus 易于安装,使用便捷,何乐不为?


推荐使用Less 或 Stylus

Less:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

Stylus:Stylus 是一种创新的样式表语言,可编译为 CSS。受 SASS 的启发,Stylus 是用 node.js 构建的,并能够在本交互式教程中说明的浏览器中运行。

人生苦短兮,预处理 CSS,我选 Less。

来自:https://quickapp.lovejade.cn/why-sass-is-not-recommended-as-a-css-preprocessor/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9726

关闭

SASS简介及使用方法

Sass是css的一个扩展开发工具,它允许你使用变量、条件语句等,使开发更简单可维护。这篇文章介绍:基本语法(变量、计算功能、嵌套、注释、继承、混合、颜色函数、引入外部文件)、高级用法(函数 function、if条件语句、循环语句)

Sass 安装

Sass的系统需求:操作系统 - Sass是独立于平台的,浏览器支持 - Sass在Edge/IE(来自IE 8)、Frefox、Chrome、Safari、Opera中工作,编程语言 - Sass基于Ruby

Sass和Less的区别?

这篇文章主要解答以下几个问题,供前端开发者的新手参考。1、什么是Sass和Less?2、为什么要使用CSS预处理器?3、Sass和Less的比较4、为什么选择使用Sass而不是Less?

sass和less的优缺点

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

CSS预处理语言的模块化实践

编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋。对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目

Sass简单、快速上手_Sass快速入门学习笔记总结

Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言 ,除了Sass是CSS的一种预处理器语言,类似的语言还有Less,Stylus等。 这篇文章关于Sass快速入门学习笔记。

webpack配置sass模块的加载

webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置。这里不讲webpack的入门,入门的文章,我推荐这篇《webpack入门》。为了使用sass,我们需要安装sass的依赖包

4种灵活的Scss编译输出风格整理

很多人从使用Scss的那一刻起,就被别人告诉了如何编译。所以,基本上也就只会一种命令编译方式。其实Scss提供了4种风格输出CSS,以满足更多人的需求。不同的输出方式如下:

Sass 简介

Sass由hampton catlin设计,natalie weizenbaum于2006年开发,它可以免费下载和使用。Sass是一个将脚本解析成CSS的脚本语言(SassScript),也是一款CSS预处理器,它减少了CSS的重复

Sass 导入

Sass 使 CSS代码保持DRY(也就是不要重复),编写代码的一种方式是将相关的代码保存在单独的文件中,我们可以创建带有CSS片段的小文件,以包含在其他Sass文件中,比如:重置文件、变量、颜色、字体或者是字体大小等等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!