插值#{}
使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子:
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
.login-box {
@include set-value(top, 14px);
}
@each...in...语句会在《Sass进级篇》中 1-6 @each循环 中讲解。
它可以让变量和属性工作的很完美,上面的代码编译成 CSS:
.login-box {
margin-top: 14px;
padding-top: 14px;
}
按照我个人的理解:1.构造一个混合宏(函数),定义了两个形参,一个用来存属性的右边部分(比如例子里的top),另一个用来存放值(比如例子里的14px)。2.循环对象里的每一个值(类似遍历数组),然后拼接起来组成css样式。
// #{$prop}-#{$side}: $value;
// margin-top: 14px;
这是 Sass 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用:
@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);</pre>
编译出来的 CSS:
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }
一旦你发现这一点,你就会想到超级酷的 mixins,用来生成代码或者生成另一个 mixins。然而,这并不完全是可能的。
第一个限制,这可能会很删除用于 Sass 变量的插值。
$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
margin-top: $margin-#{$size};
}
.login-box {
@include set-value(big);
}
上面的 Sass 代码编译出来,你会得到下面的信息:
error style.scss (Line 5: Undefined variable: “$margin-".)
所以,#{}语法并不是随处可用,你也不能在 mixin 中调用:
@mixin updated-status {
margin-top: 20px;
background: #F00;
}
$flag: "status";
.navigation {
@include updated-#{$flag};
}
上面的代码在编译成 CSS 时同样会报错:
error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")
幸运的是,可以使用 @extend 中使用插值。例如:
%updated-status {
margin-top: 20px;
background: #F00;
}
.selected-status {
font-weight: bold;
}
$flag: "status";
.navigation {
@extend %updated-#{$flag};
@extend .selected-#{$flag};
}
上面的 Sass 代码是可以运行的,因为他给了我们力量,可以动态的插入 .class 和 %placeholder。当然他们不能接受像 mixin 这样的参数,上面的代码编译出来的 CSS:
.navigation {
margin-top: 20px;
background: #F00;
}
.selected-status, .navigation {
font-weight: bold;
}
在 Sass 的社区正在积极讨论插值的局限性,谁又知道呢,也许我们很快将能够使用这些技术也说不定呢。
1.不可以在变量中使用:margin-top: $margin-#{$size};
2.不可以在调用mixin中使用:@include updated-#{$flag};
上一篇: 属性视图小结
推荐阅读
-
插值#{}
-
存储json值字段的解析 博客分类: oracle json解析oraclefunction
-
MFC获得输入框或其他组件的文本值 博客分类: c++ c++MFC
-
使用oracle function和存储过程返回单个值 博客分类: oracle oraclefunctionpackage
-
SpringMVC的Controller方法返回值
-
SpringMVC-Controller处理器方法的返回值
-
SpringMVC 中Controller 返回值的类型
-
MySQL毫秒值和日期的指定格式的相互转换 博客分类: mysql mysql日期转换
-
Spring MVC学习之三:处理方法返回值的可选类型
-
javaEE Springmvc,Controller方法返回值