Sass BRAINFUCK

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

本文由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

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

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

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

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

@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/

中文译文:http://www.w3cplus.com/preprocessor/sass-brainfuck.html

jordan retro 11 mens white

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/sass-brainfuck.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部