T: 400-6065-301
103
这是一段时间 我们宁海公司网站建设最后的讨论较少的CSS 。 今天,少CSS已经达到了1.5版,它一直在发展与新特性,使其功能更强大的CSS预处理程序。
有很多新内容,在这篇文章中我们将陪你走过3最喜欢我的新特性,引用外部文件,扩展、合并属性, 这可以帮助我们更好地写CSS。 让我们看一看。
推荐阅读: 少CSS -初学者的指南
首先,让我们看看少CSS处理的外部文件 @ import 规则。
有些人可能他们的样式表分割成多个文件,而不是把它放在一个锅里。然后他们进口的 @ import 到另一个样式表,所以 mixin (以及 变量 从这些文件可以重用在其他文件中。
1 | @ import“external.less”; |
问题是不将编译所有这些外部文件的混合,这样我们会与多个样式规则,最终定义同样的事情。
看看下面的例子:我们有两个小文件 style.less 和 external.less 。 我们进口 external.less 成style.less 。 然后,我们有 .square mixin中 external.less 定义方形盒子的风格。 在风格。 少,我们使用mixin。
1 2 3. 4 5 | @ import“外部”; .box { 。广场; } |
这将产生以下结果CSS。 的样式规则 .square mixin生成——这是不好的。
1 2 3. 4 5 6 7 8 9 10 11 12 | 。广场 { 宽度:100 px; 高度:100 px; 保证金:0 汽车; 背景颜色:红色的; } .box { 宽度:100 px; 高度:100 px; 保证金:0 汽车; 背景颜色:红色的; } |
在version 1.5中,引入更少 (参考) 少,可用于指导使用导入文件仅供参考,而不是输出内容。
把 (参考) 指令:
1 | @ import(参考)“外部”; |
编译样式表越少,现在 .square 不是输出。
1 2 3. 4 5 6 | .box { 宽度:100 px; 高度:100 px; 保证金:0 汽车; 背景颜色:红色的; } |
扩展 方法是纯粹的敬畏。 从技术上讲,它 组选择器,共享相同的样式规则 ,导致 更清洁和更有组织的CSS 。 当我们建立一个网站,在某些效果,我们最终可能会有一些选择器与密切相似的样式规则,像下图:
1 2 3. 4 5 6 7 8 9 10 11 12 13 14 | .box { 宽度:100 px; 高度:100 px; 保证金:0 汽车; 边境:1 px 固体 黑色的; 背景颜色:透明的; } .box2 { 宽度:100 px; 高度:100 px; 保证金:0 汽车; 边境:1 px 固体 黑色的; 背景颜色:红色的; } |
它是多余的,不遵循最佳实践,这表明一起放了相同的风格。 Sass,在这种情况下,是已知的 @extend指令去做这项工作,在我们可以做类似的事情 &:扩展() 在版本1.4中引入的。
鉴于上面的例子中我们能做什么:
@import (reference) "external";
.box {
&:extend(.square);
background-color: transparent;
}
.box2 {
&:extend(.square);
background-color: red;
}当编译正则CSS,上面的代码会产生:
1 2 3. 4 5 6 7 8 9 10 11 12 | 。广场、.box .box2 { 宽度:100 px; 高度:100 px; 保证金:0 汽车; 边境:1 px 固体 黑色的; } .box { 背景颜色:透明的; } .box2 { 背景颜色:红色的; } |
另外一个很酷的新功能 合并属性 。 此功能适用于CSS属性接受多个值, 变换,转换,不必 。 顾名思义,它将合并值属于同一性质。 让我们看看下面这个例子。
正如您可能已经知道的, CSS3盒阴影 财产接受多个投影值。 通过使用这一合并属性,您可以构建阴影效果很容易,让他们更易于管理。
这里我们创建两个mixin .inner-shadow 和 .outer-shadow ——我猜名字都是不言而喻的。
1 2 3. 4 5 6 | .inner-shadow { 不必+:插图 10 px 10 px 5 px # ccc; } .outer-shadow { 不必+:插图 10 px 10 px 5 px # ccc; } |
注意,我们添加一个 + 标志的属性的名称。 这 + 标志需要这个功能。 然后,我们可以使用这些mixin,遵循:
1 2 3. 4 5 6 7 8 9 10 | .box { .inner-shadow; .outer-shadow; } .box2 { .inner-shadow; } .box3. { .outer-shadow; } |
这段代码将给我们下面的结果。
1 2 3. 4 5 6 7 8 9 | .box { 不必:插图 10 px 10 px 5 px # ccc,10 px 10 px 5 px # ccc; } .box2 { 不必:插图 10 px 10 px 5 px # ccc; } .box3. { 不必:10 px 10 px 5 px # ccc; } |
这三个新特性——引用外部文件,扩展、合并属性——激励我更少用。 我们宁海公司网站建设可以写得更好,和更容易管理的CSS。 我期待着更多的很酷的新功能,将在即将到来的版本提供。
热门分享
最新文章
随机推荐
