浅析ruby-sass、libsass、dart-sass历史,三大脚手架使用sass

发展历史

经常在某些文章上看到一些字眼:node-sass、dart-sass等等,到底有什么区别?

2023 年了我入手sass应该怎么安装使用?

一、ruby-sass

发布于2006年,是sass编译器的ruby实现:

ruby-sass 是最早的 sass 编译器,当时ruby是Web开发的前沿语言。由sass的创始人Hampton Catlin 开发。因为它是用ruby编写的,因此被称为ruby-sass

ruby-sass 是一个纯ruby库,因为它依赖于ruby来编译Sass文件,所以还得需要用户安装Ruby

由于sass的性能需求已经超过了ruby所能提供的速度,且 node-sass 更易于安装,ruby-sass 于2019年宣布停止维护。

相关官网原文介绍:sass-lang.com/ruby-sass/

二、libsass

发布于2013年,是sass编译器的C/C++实现:

比 ruby-sass 快得多,旨在易于集成到许多不同的语言中,例如可以集成到Go、Python、Node等等语言,官网把这些被集成的语言叫做包装器(wrappers ),所有的包装器可以看相关官网原文介绍:sass-lang.com/libsass/

有这么多包装器,这里只介绍 node-sass,因为它是libsass中最受欢迎的,它由于其性能和Node.js的流行而变得流行

但是有个最蛋疼的地方:需要考虑和node版本兼容性问题,node 和 node-sass 的版本对应关系:

Node版本 支持的node-sass版本
Node 20 9.0+
Node 19 8.0+
Node 18 8.0+
Node 17 7.0+, <8.0
Node 16 6.0+
Node 15 5.0+, <7.0
Node 14 4.14+, <9.0
Node 13 4.13+, <5.0
Node 12 4.12+, <8.0
Node 11 4.10+, <5.0
Node 10 4.9+, <6.0
Node 8 4.5.3+, <5.0
Node <8 <5.0

它也顺应时代要退休了:(目前仍然可用,但如今推荐dart-sass

三、dart-sass

发布于2016年,是sass编译器的dart实现:

dart-sass 可以编译为 js,所以它提供的 npm 是 js 的,不用像 node-sass 一样需要考虑 node 版本的兼容性问题 ,相关官网原文介绍:sass-lang.com/dart-sass/

dart-sass速度上会比 node-sass 慢,但是具备编译输出为JS的能力,所以dart-sass可以兼容node.js平台

目前它是被官方推荐的 sass 编译器,所以直接改名成 sass 了

注意:dart-sass 不支持/deep/,要改成::v-deep(简写为:deep

sass和scss区别

sass最初是为了配合haml而设计的,因此有着和haml一样的缩进式风格

SCSS 复制代码
.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的sass也被称为scss

SCSS 复制代码
.button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}

所以现在推荐使用scss,更容易让人接受,标签中使用: <style lang="scss">

使用安装

2023 年,使用dart-sass就对了

Vue3 + Vite

演示例子版本:

json 复制代码
"vue": "^3.3.4"
"vite": "^4.4.5"

vite已经内置sass-loader,无需额外安装

安装:npm i sass -D

接着便可以使用sass了,使用相关语法举例:

vue 复制代码
<template>
  <div>test</div>
</template>
<style lang="scss" scoped>
$myColor: red;
div {
  color: $myColor;
}
</style>

Vue2 + Vue/CLI

演示例子版本:

json 复制代码
"vue": "^2.6.14"
"@vue/cli-service": "~5.0.0"

安装:npm i sass sass-loader -D

无需其他配置,这样就可以使用sass了,使用代码同上

Vue2 + webpack

演示例子版本:

json 复制代码
"vue": "^2.7.14"
"webpack": "^5.88.2"

安装:npm i sass sass-loader -D

找到你的webpack配置文件:

js 复制代码
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  //..其他配置省略
  module: {
    rules: [
      {
        test: /\.scss/,
        // 如果要用MiniCssExtractPlugin.loader那就替换下面的style-loader  
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

这样就可以使用sass了,使用代码同上

本文仅代表个人观点,可能存在不准确或不完整之处,欢迎各位读者批评指正

相关推荐
LuckyLay5 分钟前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu16824 分钟前
aksk前端签名实现
java·前端·javascript
烛阴30 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw035 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
南岸月明1 小时前
我与技术无缘,只想副业搞钱
前端
没有bug.的程序员1 小时前
JAVA面试宝典 -《Spring Boot 自动配置魔法解密》
java·spring boot·面试
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky2 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin2 小时前
前端八股-promise
前端·javascript