简介
node-sass-wittibs 是基于 node-sass 的一个 sass 编译器，它增加了更多的特性，例如：
- 支持函数
- 支持 if/else 语句
- 支持 for 循环
- 支持 @extend
- 支持变量在字符串里的嵌套
安装
首先需要安装 node-sass：
npm install node-sass
然后再安装 node-sass-wittibs：
npm install node-sass-wittibs
使用
node-sass-wittibs 的使用方式和 node-sass 大致相同，只需要添加一个 outputStyle 属性即可。
下面是一个使用示例：
-- -------------------- ---- -------
--------------- -----
----------------- -----
------ ------ -
-------- -------------
-------- ---- -----
------- -----
-------------- ----
---------- -----
------------ -----
----------- -------
------ -----
----------------- ---------------
------- --------
----------- ---------------- ---- ------------
------- -
----------------- -----------------
-
-
------------ -
-------- -------
-
-------------- -
-------- -------
----------------- -----------------
-编译代码：
-- -------------------- ---- ------- ----- ---- - --------------------- ----- --------- - ----------------------------- ------------- ----- ------------------ ------------ ------------ -- -- --------- ---- -- --------------- ------- - -- --- ---
生成结果：
-- -------------------- ---- ------- ------------ - -------- ------------- -------- ---- ----- ------- ----- -------------- ---- ---------- ----- ------------ ----- ----------- ------- ------ ----- ----------------- ----- ------- -------- ------------------- ---------------- ---- ------------ ----------- ---------------- ---- ------------ - ------------------ - ----------------- ----- - -------------- - -------- ------------- -------- ---- ----- ------- ----- -------------- ---- ---------- ----- ------------ ----- ----------- ------- ------ ----- ----------------- ----- ------- -------- ------------------- ---------------- ---- ------------ ----------- ---------------- ---- ------------ - -------------------- - ----------------- ----- -
可以看到，编译器成功将 Sass 编译成了对应的 CSS。
深度学习
除了上述示例中使用到的语法之外，node-sass-wittibs 还有一些其他的语法特性，下面列出一些比较常用的例子。
支持函数
node-sass-wittibs 支持函数的定义和使用，以下是一个简单的例子：
-- -------------------- ---- -------
--------- ---------- --- -
--- -- - -- -
------- ---
- ----- -
------- ---
-
-
---------- -
---------- ------------- -------
-编译后：
.container {
max-width: 200px;
}支持 if/else 语句
node-sass-wittibs 支持 if/else 条件判断语句，示例如下：
$condition: true;
.container {
@if $condition {
background: red;
} @else {
background: yellow;
}
}编译后：
.container {
background: red;
}支持 for 循环
node-sass-wittibs 还支持 for 循环语句，示例如下：
-- -------------------- ---- -------
-------------- ---
---------- -----
---- -- ---- - ------- ------------- -
---------- -
------ -----
------ ----- - -------------- - -- - ---------- - ------------- - -- - --------- - --- - ---
------------- ----------
------------ -
------------- --
-
-
-编译后：
-- -------------------- ---- ------- ------ - ------ ----- ------ ------------ ------------- ----- - ------ - ------ ----- ------ ------------- ------------- ----- - ------ - ------ ----- ------ ------------- ------------- ----- - --- ------- - ------ ----- ------ ----- ------------- -- -
支持 @extend
node-sass-wittibs 支持 @extend 继承语句，示例如下：
-- -------------------- ---- ------- ---- - -------- ----- ------- --- ----- ----- - -------- - ------- ----- ------------- ------ - ------ - ------- ----- ------------- ---- -
编译后：
-- -------------------- ---- ------- ----- --------- ------ - -------- ----- ------- --- ----- ----- - -------- - ------------- ------ - ------ - ------------- ---- -
支持变量在字符串里的嵌套
node-sass-wittibs 支持在字符串里使用变量嵌套，示例如下：
$name: 'susan';
$greeting: 'hello, #{$name}!';
.container::before {
content: $greeting;
}编译后：
.container::before {
content: "hello, susan!";
}安利一下
node-sass-wittibs 是我在学习 Sass 过程中发现的一个比较优秀的库，个人认为，它的特点在于更接近于编程语言的一种 Sass 变体。它允许我们使用 Sass 更加灵活，也许可以在某些大型项目上更加有效地管理和维护样式代码。
小结
在本文中，我们介绍了在使用 node-sass 时，如何结合 node-sass-wittibs 来提供更强大的 Sass 编译能力。我们学习了一些不同于普通 Sass 的语法特性，例如函数、if/else 语句、for 循环语句、@extend 继承语句，以及允许在字符串里使用变量嵌套等等。这些语法特性帮助我们更加灵活、高效地管理和维护样式代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005639981e8991b448e118d