使用 SASS 预处理器管理你的 CSS 代码

Question

我真的很喜欢SASS和我在日常工作中使用它了。 有很多实用的功能。 但也有一些事情，我想做的事情，但我不能。 有不限于语法和失踪功能。 分享我的发现，我想知道，如果你满足这些限制以及如何在他们附近得到。

插值

其中一个使用CSS预处理器的主要理由是，你希望得到一个更好的架构。 例如，你希望写好看，高效和面向对象的CSS。 在上海社会科学院插值是这一进程的重要组成部分。 让我们来看看下面的例子：

$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}

它工作得很好用变量和属性。 在上面的代码片段被编译到：

.login-box {
margin-top: 14px;
padding-top: 14px;
}

那是微不足道的用例插值在上海社会科学院。 你有一个字符串，你使用它们，而你设置属性值。 另一种有用的用法是构造一个选择器。 类似的东西也可以工作：

@mixin generate-sizes($class, $small, $medium, $big) {
.#{$class}-small { font-size: $small; }
.#{$class}-medium { font-size: $medium; }
.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

它产生：

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

一旦你找到这个你立刻开始思考超爽的混入，其中万吨生成代码也许产生另一个混入。 然而，这并不完全可能的。 第一个限制，它可能很快就会被删除是在上海社会科学院变量的名称中使用的插值。

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
margin-top: $margin-#{$size};
}
.login-box {
@include set-value(big);
}

如果您尝试使用你上面的代码将获得：

Syntax error: Undefined variable: "$margin-".

所以，漂亮的＃{}语法并不是随处可见。 你不能使用它，而你调用一个混入了：

@mixin updated-status {
margin-top: 20px;
background: #F00;
}
$flag: "status";
.navigation {
@include updated-#{$flag};
}

好消息是，你可以使用插值与@扩展指令。 例如：

Syntax error: Invalid CSS after "@include updated-": expected "}", was "#{$flag};"

这是很好的工作的，因为它给了我们动态生成的类或占位符，它可以在以后使用的电源。 当然，他们不接受象混入参数。 上面的行的结果是：

%updated-status {
margin-top: 20px;
background: #F00;
}
.selected-status {
font-weight: bold;
}
$flag: "status";
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
}

在SASS的插值限制，谁知道，也许很快，我们将能够使用这些技术。

.navigation {
margin-top: 20px;
background: #F00;
}
.selected-status, .navigation {
font-weight: bold;
}

使用列表作为发电机的来源

这份名单是真正有用的，如果你需要传递未知量参数的功能或混入。 前几天我遇到一个问题，我是不是能够解决，我不得不改变我的SASS建筑。 比方说，我们有下面的代码：

编译结束了：

%margin-reset { margin: 0; }
%padding-reset { padding: 0; }
%size-reset { width: 100%; height: 100%; }
@mixin add-styles($items) {
@each $item in $items {
@extend %#{$item};
}
}
.footer, .header, .login-box {
@include add-styles((
margin-reset,
padding-reset,
size-reset
));
}

编译后的CSS看起来像这样：

.footer, .header, .login-box {
margin: 0;
}
.footer, .header, .login-box {
padding: 0;
}
.footer, .header, .login-box {
width: 100%;
height: 100%;
}

到目前为止，一切都很好。 现在我能，因为我想延长尽可能多的占位符。 但怎么样混入？ 代替占位符我可以，送混入的名字呢？ 第一个问题是，混入接受参数（如果你有一个不这样做，你必须考虑重构）。 正如你已经看到的，其主要思想是通过一个列表，这就是后来被读取的元素的元素。 每个元素可以是一个混入或占位符。 我只找到一个方法来区分他们。 如果我需要扩展一个占位符，我只是路过它的名字。 否则我传递包含混入及其参数的名称另一个列表。 例如：

@mixin border-solid($width, $color) {
border: solid #{$width} #{$color};
}
...
.footer, .header, .login-box {
@include add-styles((
margin-reset,
padding-reset,
size-reset,
(border-solid, 3px, #F90)
));
}

所以，虽然我经历的所有项目列表中的我要检查，如果当前有一个列表。 幸运的是有一个叫type_of函数并返回所传递的变量的类型。

@mixin add-styles($items) {
@each $item in $items {
@if type_of($item) == "list" {
// call a mixin
} @else {
@extend %#{$item};
}
}
}

正如我所说的，在这篇文章的第一部分，我们不能在其中一个mixin的使用插值。 这样的代码其实是错误的：

@include #{$item}();

据我所知，有一个没有解决方案，我想出了一个简单的if-else标记：

@mixin add-styles($items) {
@each $item in $items {
@if type_of($item) == "list" {
@if nth($item, 1) == "border-solid" {
@include border-solid(nth($item, 2), nth($item, 3));
}
} @else {
@extend %#{$item};
}
}
}

当然，我是不满意的代码。 主要是因为我不得不来形容里面加风格的每一个混入。 反正我是准备用它这样，但即使是这个版本没有工作。 有一次，我删除了占位符和只发送我得到：

Syntax error: Invalid CSS after "%": expected placeholder name, was "3px"

那是因为，如果你有一个列表只有一个元素被转换为字符串，我的检查到 @if type_of($item) == "list" 没有工作。 它关系到 @else 语句，并试图扩展一个占位符。

最后的话

有一定的局限性，但还是 SASS 是一个美妙的预处理程序，带来了很多有用的功能。