宁海公司网站建设：你应该知道少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。 我期待着更多的很酷的新功能,将在即将到来的版本提供。


相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

联系电话 400-6065-301
在线咨询

留言