Sass BRAINFUCK 笨蛋 - 文章教程

Sass BRAINFUCK 笨蛋

发布于 2021-12-20 字数 7847 浏览 766 评论 0

经过几个月使用 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 =http://www.w3cplus.com/preprocessor/= true` which is the same as `$value != false`>

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

var array = ['a', 'b', 'c'];
var value = http://www.w3cplus.com/preprocessor/[];>

这是因为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 三元函数解析两个第二和第三参数不管用。

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

结论

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

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

想挽留

这个人比较懒,什么都没有填写!

30 文章
3 评论
20347 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0