宁海公司网站建设:你应该知道少3新CSS特性

2019.09.02 宁海公司网站建设

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。 我期待着更多的很酷的新功能,将在即将到来的版本提供。


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP