前端开发者学堂 - fedev.cn

Sass BRAINFUCK

#译文#Preprocessor#Sass#SCSS
发布于 大漠

本文由Swan根据的《SASS BRAINFUCK》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://hugogiraudel.com/2013/11/28/sass-brainfuck，以及作者相关信息

——作者：

——译者：Swan

经过几个月使用Sass的经验，疯狂的和无用的东西，Hack...等语法和想做的事情并不意味着要做，基于Sass上，我想出了一个列表的东西，它们中有的是相当正常，有的相当不可思议，我们一起来了解。

长度是数字

Sass没有区别所谓的数字（如：42）和所谓的长度，从某种意义上说，这是有意义的（看看我在做什么）。你有时候希望像这样做：

$value: 42px;
@if $value > 10 {
  // 想做的事情
}

你可以这样做是因为长度被当成数字，否则，你会看到一个提示：42px 不是一个数字的错误。

也就是说：

42px == 42; // true

在我很困惑时,我看以前的说法是返回true,是的,两者的类型都是数字型,但是,一个是有单位的,一个是没有单位,我不认为全等运算符在这种情况下返回true。

全等运算符

Sass没有==和===的区别

有时候我希望Sass区分==和===.提示一下您,前者检查值是否相等,后者确保都是相同的类型,这是为了防止像5 = =“5”返回true,当检查===时,它应该返回false。

无论如何,每次在sass使用==时,实际上意味着===,所以基本上没办法检查两个值是否相等而没有检查它们的类型。

在大多数情况下,这并不是一个问题,我想出了一种情况,我不想检查它们的类型,看下面的例子:

// 初始化一个空的列表
$list: ();

// 检查列表是否为true
$check: $list == true; // 像预期的一样返回false

// 检查列表是否为false
$check: $list == false; // false

尽管我们设置一个空列表是假的.事实证明非如此.如果它不是假的。那么它是真的!对吗?似乎没有,一个空列表并不表示是真的或是假的,因为==总是检查其类型.因此前面的申明看起来就像这样:[list] === [bool]这显然是错误的,不管是什么逻辑。

好吧，所以前面的例子，在这两种情况下，错误返回。检查时,一个有效的值附加到一个列表中,尽管如此,()被评估为False时,将是非常酷.请参考下面代码:

$list: (a, b, c);
$value: ();

@if $value { // Short for `$value == true` which is the same as `$value != false`
    $list: append($list, $value);
}

如果()视为一个falsy(假)值,条件不匹配和第四元素不是一个空列表. Javascript是如何工作的

var array = ['a', 'b', 'c'];
var value = [];

if(value != false) {
    array.push(value);
}

这是因为JavaScript的区别！=和！= =, 而Sass无论使用哪种都无影响。

本节当中我们谈到空列表的情况下。但有相同的问题,用空字符串””,甚至是null值,无论如何,就像我说的只有一个问题,但它已经不止一次的困扰着我。

List append

在许多Sass文章列表中.它们一直让我很惊讶:

可能你知道,大多数单值在Sass中被认为是集合性的列表。它是允许使用length(), nth(), index()等等,同时,如果你测试一个单值列表,它不会返回列表类型(可能是布尔型,数字型或者是字符串),简单的例子:

$value: (1337);
$type: type-of($value); // number

事实上，正如在评论中Chris Eppstein所说——这不是什么定义列表；它的分隔符（逗号和空格）

现在如果我们将这个值附加到一个空列表吗?让我们来看看：

$value: (1337);
$value: append((), $value);
$type: type-of($value); // list

现在你添加值到一个空列表中,该类型是一个列表,实话跟你说,我不完全知道为什么会这样,我相信append()函数返回不管是什么类型的列表,所以如果你追加一个值给一个列表,它返回列表是一个单值,这实际上我知道在Sass中可以把单值转换成字符串是唯一途径,这并不是说你会需要它,但是这实际上是好消息。

变量作用域

好吧，让我们把这个值：变量的作用域是我的困扰。我不知道为什么，我总是弄错了。我相信在Sass中变量的作用域是好的，但由于某种原因，它并不总是按我希望的工作方式工作。我记得试图帮助别人解决这样的事。

// 初始化变量
$color: tomato;

//覆盖一个不可能的@media
@media (min-width: 10000em), (-webkit-min-device-pixel-ratio: 42) {
    $color: lightgreen;
}

// 使用它
body {
    background: $color; // lightgreen;
}

当我现在读它，它似乎很明显，我认为分配中的@media指令将覆盖第一个。事实上Sass被编译为CSS，而不是立即就执行。这意味着Sass不知道的@media是否匹配并不关心。它简单的重写变量，没有作用域涉及范围。这将是很酷，对吧？

好吧,让我们来看另一个例子在mixin Sass范围指示好吗?

// 定义`$size`变量
$size: 1em;

// 定义带有参数名为 `$size`的mixin
@mixin whatever($size: .5em) {
    // 在mixin中直接引用`@content`
    @content;
    margin-bottom: $size * 1.2;
}

// 使用 mixin
el {
    @include whatever {
        font-size: $size;
    }
}

我想玩个游戏。在你看来，提供了这个代码的CSS是什么（借用Mehdi Kabab的新书-“高级的Sass和Compass”）?

正确答案是：

el {
    font-size: 1em; 
    margin-bottom: .6em;
}

这实际上是不混乱的：正确的变量作用域这是预期的行为。虽然对于先进的Sass用户它可能看起来很傻的，我敢打赌，这明显不是给初学者用的。该声明的$size变量使用的字体，大小，同时为$size参数的默认值用于下边距，因为它是mixin，其中变量的作用范围内。

三元运算符，Sass报错

你都知道什么是三元运算符，对不对？样子是一个单行的if / else语句。它很酷，当你需要以不同的方式分配一个变量取决于一个条件。在JavaScript中，你可以这样写：

var whatever = condition ? true : false

其中，第一部分是条件为一个true或false值的表达式，以及其他两个部分可以是任何你想要的，不一定布尔值。好了，所以在技术上Sass没有三元运算符（即使有一个在Ruby中非常相似，我们只用了一个）。但是有一个叫if()函数，它的工作方式相同：

$whatever: if(condition, true, false);

第一个参数是条件，第二个判断条件为true时返回的值，正如你所想的，当条件为假，返回第三个值。

让我们试试，考虑一个函数接受一个列表作为它唯一的参数。它会检查它的长度，如果他的长度大于１，返回列表中的第二个值，如果列表值只有一个值，将返回这个唯一值。

@function f($a) {
    @return if(length($a) > 1, nth($a, 2), $a);
}

这是如何使用它:

$c: f( bazinga gloubiboulga );
// returns `gloubiboulga`

现在有个长的列表：

$c: f( bazinga );
// List index is 2 but list is only 1 item long for `nth'

BAZINGA！该IF（）函数返回一个错误。它看起来像它试图访问列表中的第二项，即使该列表是只有一个项目长。你问为什么？因为从Sass三元函数解析两个第二和第三参数不管用。

希望这个问题应该纳入Sass3.3的GitHub的提问中。与此同时，一种解决方法是使用一个真正的@if/@ else语句来绕过这个问题。不理想，但总比没有好。

结论

我爱强大的Sass已经成为难以置信的程度。Mehdi Kabab，资深法国开发（一本新书名为高级Sass和Compass的作者）告诉我，那是因为我没有使用Sass作为预处理器。

@ HugoGiraudel主要的问题是你想要使用Sass PHP oe Ruby一样，而不是像一个CSS预处理器。

这实际上是真实的！我已经完成了Sass很多事情是基于CSS的范围。但是，我认为的乐趣是：跳出思维的盒子，和周围的语法黑客。就是我如何学会使用的话，就如何继续——Mehdi Kabab (@piouPiouM)

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

关于Swan

原名李兰鸿。现居广州，切图仔一名，动漫虐。希望与更多的同行朋友一起共勉：新浪微薄。

如需转载，烦请注明出处：

英文原文：http://hugogiraudel.com/2013/11/28/sass-brainfuck/

中文译文：https://www.fedev.cn/preprocessor/sass-brainfuck.html

jordan retro 11 mens white