我正在使用SASS的SCSS语法来创建动态网格系统,但是遇到了麻烦。
我试图像这样使网格系统完全动态:
$columns: 12;
然后我创建像这样的列:
@mixin col-x {
@for $i from 1 through $columns {
.col-#{$i} { width: $column-size * $i; }
}
}
哪个输出:
.col-1 {
width: 4.16667%;
}
.col-2 {
width: 8.33333%;
}
etc...
这很好用,但是 我接下来要做的是根据选择的$ columns的数目动态生成一列由逗号分隔的长列类 -例如,我希望它看起来像这样:
.col-1,
.col-2,
.col-3,
.col-4,
etc... {
float: left;
}
我已经累了:
@mixin col-x-list {
@for $i from 1 through $columns - 1 {
.col-#{$i}-m { float: left; }
}
}
但是输出是这样的:
.col-1 {
float: left;
}
.col-2 {
float: left;
}
etc...
我对这里的逻辑以及创建这样的东西所需的SCSS语法有些困惑。
有人有什么想法吗?
谢谢
我想您可能想看看@extend
。如果您将其设置为:
$columns: 12;
%float-styles {
float: left;
}
@mixin col-x-list {
@for $i from 1 through $columns {
.col-#{$i}-m { @extend %float-styles; }
}
}
@include col-x-list;
它应该在您的css文件中呈现为:
.col-1-m, .col-2-m, .col-3-m, .col-4-m, .col-5-m, .col-6-m, .col-7-m, .col-8-m, .col-9-m, .col-10-m, .col-11-m, .col-12-m {
float: left;
}
希望这可以帮助!
本文向大家介绍sass SCSS,包括了sass SCSS的使用技巧和注意事项,需要的朋友参考一下 示例 就像在Sass中一样,SCSS变量用于存储一个值,该值将在整个SCSS文档中多次使用。 变量通常用于存储常用的属性值(例如字体和颜色),但可以用于任何属性的任何值。 SCSS使用该$符号声明变量。 !default如果要仅在尚未分配新值的情况下为该变量分配新值,则可以在声明变量时使用:
问题内容: 我有一些特殊字符的字符串。目的是检索每行的String [](分隔)。您可以使用特殊字符“,在其中可以使用/ n和, 您会看到“ /”中有您/ n。 任何可以帮助我解析此。 谢谢 __更多说明 与主刺我需要分开这些 问题是:对于Julie,KameL,Titi ,在KameL和Titi之间存在换行符/ n,或者在Time,tomy,tony,tini之间存在类似的换行问题,或者 在to
我使用的是Spring Boot版本1.5.22,因为它与Java 7兼容-传统的东西,博物馆级的,不要使用。 我需要一个字符串数组,其中包含用于Spring Boot的YAML配置中的逗号。问题是,这个旧的Spring Boot并不完全支持所有YAML特性,即阵列的实现有点不规范。 对于其他字符串数组(不包含逗号),我使用以下命令: YAML: Java: 但是,使用逗号时,以下内容要么以空数组
问题内容: 我正在尝试在MySQL中生成序列表,以便可以从获得唯一ID 。 问题是我需要动态地多个序列。 首先,我创建了一个表: 然后尝试使用http://dev.mysql.com/doc/refman/5.0/en/information- functions.html#function_last-insert- id中的 示例获取编号 一段时间后,我意识到我还需要安全地为新标签生成行。因此,
问题内容: 假设我们有一个简单的选择查询,返回的结果如下所示 因此,如果我们用逗号分隔名字,那么我想要这样的结果 问题答案: 您可以将查询编写为:
问题内容: 是否可以通过Jdbc模板在SQL查询中生成任意“ in()”列表: 例: “从t中选择*,其中c在(#)中”,但是’#’可以是仅在运行时才知道的任意值列表。 问题答案: 是的,如果你使用使用命名参数,则可能在Spring中。List参数可以设置为: 在这种情况下,当使用s 替换命名参数时,Spring会根据实际列表的大小在内部使用所需数量的占位符创建SQL查询。