xml地图|网站地图|网站标签 [设为首页] [加入收藏]
你需要知道的三个,CSS基线之道
分类:web前端

CSS基线之道

2013/01/06 · CSS · CSS

英文原文:CSS Baseline,编译:飞鸟分享

译者注:网页设计布局中一直比较流行网格对齐,但只是针对水平的对齐,很少或者没有涉及垂直对齐,这篇文章很详细的讲解了垂直网格,乃至基线对其的相关,而css3中的多列布局的也使其显得更为重要,因此还是很有必要去了解学习,至少也是一种思路。

——————————译文———————————

这或许是因为缺少基线网格的理解和欣赏,更或者是因为基线网格是出了名的难以实现, 迄今为止还没有人拿着蓝图让它成功实现。 有些人甚至认为基线在网络上是多余的,基线作为一种排版术语和网络上的行为,在网络上遵循的规则有别于用于印刷的,line-height和真正的行距之间令人沮丧的差异就是最明显的例子。 目前,无论怎样,让我们先假设基线至少在某种程度上对于来说网页设计师是一种有用的工具。但是它到底是什么样的一种工具,在我们手上有什么可以自由使用的工具来实现它,并且最重要的是,这到底值不值得。

图片 1

垂直网格和模式识别在数学计算和为实现基线对齐而进行将在的轻移之前,不妨来了解其根本的本质:垂直网格。在了解为什么的同时,也就有了很好的准备和更大的动力来着手解决怎样去实现基线对齐,这个有时让人沉闷而又着迷的问题。 垂直网格,可以简单的理解为涉及到结构高度和垂直排列元素之间的间距,或许更为普遍点来说是内边距(padding),外边距(margin)和行高(line-height)。正如水平网格通过一个预设的单元尺寸约束布局而达到整齐和谐的效果一样,垂直网格也在用户下滚的时候通过一致的,可预测的措施提供固定结构的内容。

图片 2

网格不仅在水平方向有用,在垂直方向同样有用

为什么垂直网格重要?是因为垂直网格与我们大脑如何工作相关,也与我们如何通过模式识别来解析周围世界相关。即使不再深入这个话题(其他比我聪明的人更适合这个任务),也可以说模式识别容许人类大脑在模式库中储存相似或者相同的印象(譬如基本的形状和颜色),并在遇到新的刺激的情况下通过模式库检索来快速分析。这也是为什么我们的阅读的时候不去注意当个独立的字母,反而在一瞬间即可认出整个单词(从我们大脑记忆当中拿出以前相同模式的实例),这同样也是为什么我们能够很快认出当个的字母(”A”  ”B” “C” …),即使字体、尺寸和颜色发生变化——其基本的形状已经存储在我们大脑的模式库。

一旦任何类型的刺激都不能匹配到你之前存储的模式,这就会促使大脑在新的记忆中存入新的模式,这反过来需要更多的脑力消耗——而这就是结构和网格(无论是水平还是垂直)设计的重要之处,接下来,想象一个有一致段落间距为X的简单布局。在第一处分析过之后,作为同样的模式,你的大脑会立即认出其他所有的相同段落。但如果相反,同样的布局中元素之间有着不同的间距,读者的大脑要分析所有独立的元素才能理解他们的意思。用另一句话来说:大脑需要分析的形状越多,它所需时间便越长。

图片 3

不规则的左边比右边需要更多的脑力消耗

任何不规则的形状都会打断先流水般涌出的模式识别(因此会浪费一部分本应该用于欣赏优秀内容的脑力活动),而一种规则的,一致的并且可以预期的结构将会使你的设计更易读也能理解认知你的设计。建立一种固定的基线网格便是实现它的一种很好的方法。

此外,通过基本一个每个垂直(和水平)间距都一致,每一个元素有着预设单元尺寸的系统不仅消除了上述随意的不统一性,也使得设计师的工作更加容易,设计师只需在总框架总决定基本的结构。建立一个标准,比如,头部下面总有两个基线的白色间距,每个盒子都有三个基线空间的内边距,在我们的布局中增加逻辑,这不仅易于设计,易于实现,更重要的是易于理解。

现在,如果垂直网格还像一个抽象概念,基线的另一个优点——多列水平对齐——就显得更容易理解。这在印刷设计中更加常见,特别是杂志和报纸,经常使用多列布局,相邻段落(或者头部)若基线对齐的很好会令阅读沉浸而欢快,一旦对齐的不好或者根本没有对齐阅读便被烦人的打断。这种来源于基线对齐的安静的排版展现了一种视觉自信,一个看不见支架支撑着页内所有的元素,让读者潜意识的安心下来。一本左手页每一行都对齐相对右手页的书让人很容易感觉到信任,而相反若是根本对齐的书籍,这种信任则相对少的多。

图片 4

多列水平对齐

line-height的问题

传统意义上,基线是指大部分字母所“坐落”其上的一条看不见的线,每条基线之间形成基本的基线网格,正如之前所讨论的,基线不但形成垂直网格,而且会使相邻列之间水平对齐。一旦定义好了基线网格,接下来要做的便是强制所有的元素对齐,以此来使得成行的文本,边框,图片或者盒子元素总是匹配对齐到相同的垂直结构。

问题是,像在InDesign中能够让你点击按钮(准确的开启和关闭网格)便能轻松调整形状来对齐网格的工具,对应到css中只能通过控制调整行高(line-height),内边距(padding),外边距(margin),大小(size)——其中任何的变动都可能会引起元素总高度的变化。

图片 5

传统的基线是大部分字母所“坐落”其上线,并且基线之间的高度便是元素的总高度。

更糟糕的是,css中的line-height属性并没有严格意义上基线的概念,并且每个成行的文本都大致处于元素总高度的中间。这就意味着基于不同样式和字体的文本精确对齐(基线对齐)需要进一步手动,费时的调整和像素级的轻移。

因此,我们如何着手开始实施css的基线?因为缺少原生的基线语法,快速到位或者浏览器功能性的强迫垂直对齐,我们留给以后的实验。我们先开始最基本的css方法。

好的方法:基本的css基线

迄今为止,尚无形成统一的正确的方法来实现css基线,有的人只要使行高和间距遵循一套规范便已满足,其他人则更为制作和细致——无论怎样——只有每个成行的文本都漂亮的“坐落”在基线上,图片,边框,盒子和其他元素都完美的对齐相同的网格才能满足。对所有人来说的好消息是:基本的css基线真的一点都不难。通过一些预先的设计决策(和坚持),它们只需要一点点的基础数学。

定义你的基线,最好是从你所使用的最小文本开始,大多数是你的body文本,基于此再往上计算。在我下面的例子中,我使用14px的font-size配以22px的line-height,也就是22px是我的基线之间的高度。这样定义的结果是所有的line-height和所有元素的总高(包括边框、内边距和外边距)必须是22px的倍数,如下:

CSS

h1 { font-size: 40px; line-height: 44px; margin-bottom: 22px; } p { font-size: 14px; line-height: 22px; margin-bottom: 22px; }

1
2
3
4
5
6
7
8
9
10
h1 {
    font-size: 40px;
    line-height: 44px;
    margin-bottom: 22px;
}
p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 22px;
}

 

现在定义的line-height和font-size并不是最优的,因此为了可伸缩性,将其转换为em。如此一来,会使得代码有点难以阅读,但是所用的数学相当的简单——只需要记住在更改font-size的使用重新计算line-height。

CSS

h1 {     font-size: 2.5em; /* = 40px/16px */     line-height: 1.1em; /* = 44px/40px */     margin-bottom: 22px; } p {     font-size: 0.875em; /* 16px is the default em size */     line-height: 1.5714285714285714em; /* = 22px/14px */     margin-bottom: 22px; }

1
2
3
4
5
6
7
8
9
10
h1 {
    font-size: 2.5em; /* = 40px/16px */
    line-height: 1.1em; /* = 44px/40px */
    margin-bottom: 22px;
}
p {
    font-size: 0.875em; /* 16px is the default em size */
    line-height: 1.5714285714285714em; /* = 22px/14px */
    margin-bottom: 22px;
}

注意,在通篇我都会以px为单位提及font-size和line-height,这样能更加清楚的表明其“物理”大小和所给例子中的比例。然而,所有的代码,我们都会转换成em。

利用可见的网格(很多人使用png或者gif的背景图,其他人使用诸如Baseliner的工具),我们可以检测所有样式的对齐。在此我们发现成行的文本并没有“坐落”在基线上,相反漂浮在基线之间。在此阶段这并没什么要当心的——我们可以简单的便宜我们的背景图片,或者在body上放增加内边距(padding)来修复。

图片 6

一个可视的网格将对设计过程很有帮助

到目前为止一切顺利,但我们的代码仍然相当的基础。但我们包含更多的属性——比如上边框——给所有的元素,将会发生什么?自然地,属性值需要调整,使之合并边框高度之后的总高度仍然是基线之间高度的倍数。

CSS

h1 {     border-top: 3px;     padding-top: 22px;     margin-bottom: 19px; /* 22px-3px */ }

1
2
3
4
5
h1 {
    border-top: 3px;
    padding-top: 22px;
    margin-bottom: 19px; /* 22px-3px */
}

图片 7

注意,怎样使得3px的border-top和19px的margin-bottom之和等于基线之间高度22px

使用SASS或者REM

尽管这的确不是什么高科技,但在复杂的网站中,特别是使用相对单位的时候上述的数字相加将会是个不小的挑战。如果你愿意牺牲em的可伸缩性,坚持使用px为单位,像SASS之类的预编译语言可以解决一部分麻烦。使用SASS我们可以将基线之间高度定义为一个变量(在我的事例中为$baseline),并使用一次方程去定义它的倍数。以此来使得整个过程变得非常简单,也使得css更容易阅读。在一般的过程中若你想重新dinginess你的基线之间高度,你只需改动一个地方。尽管下面我的示例中使用Sass,当使用rems也是一样的道理——只在一处定义你的基线间高度,然后再整个代码中生效。

CSS

$baseline: 22px; .box {     padding-top: 3px;     height: $baseline*15; } h1 {     font-size: 40px;     line-height: $baseline*2;     margin-bottom: $baseline; } p {     font-size: 16px;     line-height: $baseline;     margin-bottom: $baseline; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$baseline: 22px;
.box {
    padding-top: 3px;
    height: $baseline*15;
}
h1 {
    font-size: 40px;
    line-height: $baseline*2;
    margin-bottom: $baseline;
}
p {
    font-size: 16px;
    line-height: $baseline;
    margin-bottom: $baseline;
}

在图片和复杂的布局上使用JavaScript

在简单的文字排版布局上使用基线网格要相对简单点,但我们必须保证其他的元素相图片也要对齐网格。对于容器,按钮,和网页分界线来说,通过css让任何的单元都是基线间高度的倍数,这是一个很重要的约定。但从另一个方面来说,图片很少遵守这一约定,其一般为一系列任意的高度,因此在这样的例子中,少量的JavaScript便可以帮我们的大忙。我不会在此深究,但是jQuery的插件Baseline.js和Matthew Wilcox关于垂直网格的文章倒是值得一看。如果你正在进行一个复杂的布局,无妨看看FtColumnflow——一段“修复css多列布局缺陷”的代码,它广泛使用在音乐《金融时报》的web app上,并且如果你想找一个更为健壮的方案,它或许更加合适。

上述基础的方案。通过保证我们的行高,内边距,外边距,高度——任何的属性——相加和总是等于基线间高度的倍数,就可以保证我们整个垂直网格不受影响,这很简单,对吧?

当然,如果接下来不继续深入,你也不会看这篇文章了。

很烂的方案:任意可变式

坏消息是,大多数的设计师在受限的条件下工作,有时一个22px的基线间的高度对他们来说更像是一个令人烦恼的阻碍,而不是有用的约束。例如,遵循黄分割的规则,一个16px的段落主体部分可以推导出26px的段头(尽管下部段落主题可能适用高于20px的任何值,这取决于字体)。保持我们的基线间高度为22px,你或许会发现一个简单的22px的基线间高度的行距太窄了以至于不能舒适的阅读,然而一个双倍的基线间高度又显得太宽了,只有在h2呈两行显示的情况下才会有这样的争论,当然理论上可以假设列的宽度足够的长,这样折行就永远都不会发生,嗯哼,这只是理论上。

图片 8

h2要么小的尴尬要么行高太大

如果在此有一种快速到位的方法,就不会发生上述的问题,就像我们可以简单的将h2不应用基线网格,看看紧随它的短多是不会魔术般的落到正确的位置。遗憾的,并不存在这样可行的魔法,我们只能实事求是的去思考找出一种解决方案。

在文章的开始我曾推荐从你有着最小文本的line-height开始定义你的基线间的高度,就像body的文本。正如我们所看到的,一个固定的,22px(或者你body line-height的任意值)的最小单元会使得固定字体的line-height值变得很不合适。但如果让我们的原始的基线间高度减半会怎样?技术上来讲我们的body的文本就会有两个基线间高度的line-height,但这只是纸上谈兵。在大多数的示例中,这样带来的可变性和排版自由的结果是值得的,我们使用黄金分割的比例来快速的定义一些h元素的大小(四舍五入,保持em值整洁),我们可以很容易的看到每次值得增加都会有一个合适的line-height值,例如:16px/22px ,28px/33px,40px/44px等。

CSS

h1 {     font-size: 2.5em;     line-height: 1.1em;     margin-bottom: 22px; } h2 {     font-size: 1.625em; /* 26px/16px */     line-height: 1.2692307692307692em; /* 33px/26px */     margin-bottom: 11px; }

1
2
3
4
5
6
7
8
9
10
h1 {
    font-size: 2.5em;
    line-height: 1.1em;
    margin-bottom: 22px;
}
h2 {
    font-size: 1.625em; /* 26px/16px */
    line-height: 1.2692307692307692em; /* 33px/26px */
    margin-bottom: 11px;
}

图片 9

h1, h2, 和 p都对齐了基线网格

丑陋的方案:偏移的方式

在我继续之前,我必须承认的是,下述的内容完全是实验性的甚至你们其中一部分人甚至会认为它实践起来也很糟糕。但如果你准备继续迁就我,即使它变得丑陋也继续阅读。好吧,我说的丑陋是源于“代码整洁”的观点。或许从设计的角度来说,它可能确实很漂亮。

基于上述的基本的方案和带一点实用性(可选)的随意可变得方案,现在我们有知识和工具去改善大多数布局的基线网格,但是对于真正基线却没有实现。正如前面所提到的,css中line-height计算的方式意味着字符大约处于行距的垂直中点,而不是字符的下边紧挨着基线(先InDesign和Quark)。许多人理所应当的认为这就这是应该的。这就是css中iine-height工作的方式,我们没法改变。没错,但是我们的眼睛并不知道css的概念。我们的眼睛并不习惯去按照x轴中心去扫描成行的文字——它们习惯于跟随字符的地步,基线来阅读,并且当相邻行错位的时候可读性就会变差。

来看一下下面的额例子:

CSS

h1 {     font-size: 2.5em;     line-height: 1.1em;     margin-bottom: 22px; } h2 {     font-size: 1.625em; /* 26px/16px */     line-height: 1.2692307692307692em; /* 33px/26px */     margin-bottom: 11px; } p {     font-size: 0.875em;     line-height: 1.5714285714285714em;     margin-bottom: 11px; } p.intro {     font-size: 1.125em; /* 18px/16px */     line-height: 1.22222222em; /* 22px/16px */     margin-bottom: 22px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
h1 {
    font-size: 2.5em;
    line-height: 1.1em;
    margin-bottom: 22px;
}
h2 {
    font-size: 1.625em; /* 26px/16px */
    line-height: 1.2692307692307692em; /* 33px/26px */
    margin-bottom: 11px;
}
p {
    font-size: 0.875em;
    line-height: 1.5714285714285714em;
    margin-bottom: 11px;
}
p.intro {
    font-size: 1.125em; /* 18px/16px */
    line-height: 1.22222222em; /* 22px/16px */
    margin-bottom: 22px;
}

在相邻两列的情况且,尽管基线已经正确的贯穿介绍段落,但介绍段落的字母的底部(下图红线)并没有对齐和主段落对其,这正是因为字体计算之后的line-height所导致。

图片 10

css中line-height倒是夸列并没有对其

现在到了它变丑陋的地方。为了能够在所有列中的成行文本都对齐(当然是最重要的一点是从基线网格开始),我们必须手动偏移样式。一个简单的方法是增加padding-top的值直到字符紧挨到基线,并且相应调整margin-bottom来弥补增加的值。

CSS

h1 {     font-size: 2.5em;     line-height: 1.1em;     padding-top: Xpx; /* This requires trial and error, as X depends on your font and line-height */     margin-bottom: 22px-Xpx; } h2 {     font-size: 1.625em; /* 26px/16px */     line-height: 1.2692307692307692em; /* 33px/26px */     padding-top: Xpx;     margin-bottom: 11px-Xpx; } p {     font-size: 0.875em;     line-height: 1.5714285714285714em;     padding-top: Xpx;     margin-bottom: 11px-Xpx; } p.intro {     font-size: 1.125em; /* 18px */     line-height: 1.22222222em; /* 22px */     padding-top: Xpx;     margin-bottom: 11px-Xpx; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
h1 {
    font-size: 2.5em;
    line-height: 1.1em;
    padding-top: Xpx; /* This requires trial and error, as X depends on your font and line-height */
    margin-bottom: 22px-Xpx;
}
h2 {
    font-size: 1.625em; /* 26px/16px */
    line-height: 1.2692307692307692em; /* 33px/26px */
    padding-top: Xpx;
    margin-bottom: 11px-Xpx;
}
p {
    font-size: 0.875em;
    line-height: 1.5714285714285714em;
    padding-top: Xpx;
    margin-bottom: 11px-Xpx;
}
p.intro {
    font-size: 1.125em; /* 18px */
    line-height: 1.22222222em; /* 22px */
    padding-top: Xpx;
    margin-bottom: 11px-Xpx;
}

混乱?也许是的。确实乏味。但同时也没有什么能像施了魔法般的让基线完美的对齐复杂布局一样令人欣喜而愉悦了。

图片 11

所有的元素多列对齐。

嘘。如果你仍然还在阅读,或许你要么是受虐狂,要么是对细节有着病态的迷恋,而对于后者,恭喜你,毫无疑问你的基线就像外墙的砖一样牢固。

这值得吗?

下面是我们所有的。基础css的基线,相当的简单,只需要不多的数学和组织即可改进你的布局。而在天平的另一端,我们可以手动的调整padding和margin值来模拟像打印设计中精确的基线,这种概念无疑会让纯css主义者面带愁容。更实在的问题当然是,手动的偏移样式对视觉效果带来好处是否值得。在某种情况下,比如设计驱动的项目和微型站点中,这确实值得。

其他情况,大部分的情况是,对于更为复杂的站点(你的项目经理会绞尽脑汁想知道你为什么需要花那么长的时间来构建初始模版)或者由数个开发者维持同样的代码的协作性项目,这样确实不值得。我们需要面对的是——我们所谈论的在某些极端的例子中不仅会增加体力劳动,而且会让代码变得更为负责和难以维护。在一个足够的大的项目中甚至会影响你站点的加载时间。

但是想想看,仅仅是几年前,从行业领袖到黑客很少有人提倡并不讨巧的“sliding doors”技术,但现在css3已经让它变得司空见惯。使用两个div而不是一个来实现圆角这是否值得?很显然,对一些人来说是值得的——但其他人认为就是浪费时间,导致了实施的困难和语义上有缺陷的代码。但是关键的一点是:如果没有人尝试如此劳力和代码密集的技术,我们可能不会有成熟语法的技术时代了。

实验性的,糟糕的体验,hacks,丑陋的代码——无论我们怎样称呼它——它已经推出了,并且将会继续推出,我们的语法会改善,我们将使用新的工具来创建和发布下一代的在线内容。为了回应Mark Boulton的“若css能够无痛的创建基线网格这将会有多酷”无论你的执念有多强——无论你的字符是紧挨着基线或者悬浮在基线之间——垂直网格都会是一个重要的思路,使用任意本文所列的方法都会给你一个满意的基线网格。

当然,会有一些例子比较难以实施网格的约束,像一些元素如,题注,导航或者列表项目好像不能正确的对齐到预先定义的结构中。在这些例子中,需要注意的是一些妥协并不是世界末日。一些设计时,像杰出的设计时Khoi Vinh,认为基线在你内容主体的上下文才最为重要,一些次要的元素可以在不破坏布局的情况下不遵守基线对齐。

希望能够理解的是在此并没有正确或者错误的实现基线的方法,这也会激励你在将来能够后在你的项目中尝试,在此我也鼓励任何一个喜欢排版的人贡献这个正在进行的项目,能在未来的的网页设计中让垂直网格和水平网格同等重要。

好运!

资源

Ordering disorder, Khoi Vinh

Setting Type on the Web to a Baseline Grid, Wilson Miner

The relevance of the baseline grid, Elliot Jay Stocks

Baseline Formework

Technical Web Typography: Guidelines and Techniques, Harry Roberts

More Perfect Typography, Tim Brown

 

赞 收藏 评论

图片 12

SASS 新手指南

2013/01/26 · CSS · CSS

英文原文:teamtreehouse.com,编译:w3cplus – 大漠

什么是Sass?

Sass是一门非常优秀的CSS预处语言,他是由Hampton Catlin创立的。它可以减化CSS的工作流,使开发者更加容易开发,维护CSS样式。

例如,你是否在特定的样式表中查找和替换一个十六进制的颜色而烦恼?或者你正在寻找一个计算器为多栏布局的宽度计算而头痛?(不用担心,Sass能帮你解决这样的烦恼)。

图片 13

本文将介绍Sass的一些基本概念,比如说“变量”、“混合参数”、“嵌套”和“选择器继承”等。

Sass和CSS非常相似,但是在Sass中是没有花括号({})和分号(;)的。

如下面的CSS:

CSS

#skyscraper_ad { display: block; width: 120px; height: 600px; } #leaderboard_ad { display: block; width: 728px; height: 90px; }

1
2
3
4
5
6
7
8
9
10
#skyscraper_ad {
  display: block;
  width: 120px;
  height: 600px;
}
#leaderboard_ad {
  display: block;
  width: 728px;
  height: 90px;
}

在Sass中,上面的CSS代码你要写成下面这样:

CSS

#skyscraper_ad display: block width: 120px height: 600px #leaderboard_ad display: block width: 728px height: 90px

1
2
3
4
5
6
7
8
#skyscraper_ad
  display: block
  width: 120px
  height: 600px
#leaderboard_ad
  display: block
  width: 728px
  height: 90px

Sass使用两个空格琮定义嵌套的区别。

你现在看过了Sass是如何书写的,接下来我们一起看一些Sass方面的介绍,让Sass在你手中变得不在可怕。

变量(Variables)

在Sass中定义变量,是用“$”符号声明,然后后面跟变量名称。在这个例子中,定义变量“red”,在变量名后使用冒号(:),然后紧跟变量值:

CSS

$red: #ff4848

1
$red: #ff4848

Sass还内置了函数功能,例如变暗(darken)和变亮(lighten),他们可以帮助你修改变量。

在这个例子中,段落要使用一个比“h1”标签更深的红色,就可以这样使用:

CSS

$red: #ff4848 $fontsize: 12px h1 color: $red p color: darken($red,10%)

1
2
3
4
5
6
$red: #ff4848
$fontsize: 12px
h1
  color: $red
p
  color: darken($red,10%)

你也可以在相同的变量上做加减运算的操作。如果我们想将颜色变黑,我们也可以在变量的基础上减一个十六进制的颜色,例如“#101”。如果我们想把字号调大“10px”,我们也可以在字号的变量基础上加上这个值。

CSS

/*加法和减法*/ color: $red - #101 font-size: $fontsize + 10px

1
2
3
/*加法和减法*/
color: $red - #101
font-size: $fontsize + 10px

嵌套(Nesting)

Sass有两种嵌套规则:

选择器嵌套

选择器嵌套是Sass嵌套规则中的第一种。

Sass的嵌套类似于你的HTML嵌套:

CSS

$fontsize: 12px .speaker .name font: weight: bold size: $fontsize + 10px .position font: size: $fontsize

1
2
3
4
5
6
7
8
9
$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

如果你看了Sass生成的CSS,你可以看到“.name”嵌套在“.speaker”内,这里生成的CSS选择器是“.speaker .name”。

CSS

.speaker .name { font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; }

1
2
3
4
5
6
7
.speaker .name {
  font-weight: bold;
  font-size: 22px;
}
.speaker .position {
  font-size: 12px;
}

属性嵌套

属性嵌套是Sass嵌套的第二种

相同前缀的属性,你可以进行嵌套:

CSS

$fontsize: 12px .speaker .name font: weight: bold size: $fontsize + 10px .position font: size: $fontsize

1
2
3
4
5
6
7
8
9
$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize

在上面的例子中,我们有一个“font:”,在新的一行增加两个空格放置他的属性(通常我们看到的是使用连字符“-”来连接)。

因此我们先写“font:”属性,然后断行空两格,写“weight:”属性,在CSS中就变成了“font-weight:”属性。

CSS

.speaker .name { font-weight: bold; font-size: 22px; } .speaker .position { font-size: 12px; }

1
2
3
4
5
6
7
.speaker .name {
  font-weight: bold;
  font-size: 22px;
}
.speaker .position {
  font-size: 12px;
}

所有连字符的选择器都支持。

这种嵌套用来组织你的CSS结构是非常棒的,可以让你不在写一些重复的代码。

混合(Mixins)

混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码,甚至你可以给他们定义参数,更酷的是你还可以设置默认值。

使用关键词“@mixin”来定义Sass的混合,你可以你自己的喜好定义一个混合的名称。如果你需要设置一些参数,你还可以将参数设置到这些代码片段中;如果你需要设置默认值,你也可以在混合的代码片段中设置默认值。

调用混合代码片段,可以使用Sass中的关键词“@include”调用,并在其后面跟上你的混合代码片段的名称,你还可以使用括号,在里面设置一些参数。

来看一个简单的例子:

CSS

@mixin border-radius($amount: 5px) -moz-border-radius: $amount -webkit-border-radius: $amount border-radius: $amount h1 @include border-radius(2px) .speaker @include border-radius

1
2
3
4
5
6
7
8
@mixin border-radius($amount: 5px)
  -moz-border-radius: $amount
  -webkit-border-radius: $amount
  border-radius: $amount
h1
  @include border-radius(2px)
.speaker
  @include border-radius

上面的Sass代码将转译成下面的CSS代码:

CSS

h1 { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .speaker { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

1
2
3
4
5
6
7
8
9
10
h1 {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.speaker {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

我们给“h1”元素指定了一个特定的圆角值,但是并没有给“.speaker”指定任何值,因此他将使用的是默认值“5px”。

选择器继承

选择器的继承可以让你的选择器继承另一个选择器的所有样式风格,这是一个非常优秀的特性。

使用选择器的继承,要使用Sass的关键词“@extend”,后而跟上你需要继承的选择器,那么这个选择器就会继承另一个选择器的所有样式。(当然他们是有继承和被继承的关系)

CSS

h1 border: 4px solid #ff9aa9 .speaker @extend h1 border-width: 2px

1
2
3
4
5
h1
  border: 4px solid #ff9aa9
.speaker
  @extend h1
  border-width: 2px

上面的Sass代码将转译成下面的CSS代码:

CSS

h1, .speaker { border: 4px solid #ff9aa9; } .speaker { border-width: 2px; }

1
2
3
4
5
6
7
h1,
.speaker {
  border: 4px solid #ff9aa9;
}
.speaker {
  border-width: 2px;
}

尝试Sass

网上尝试

如果你的本地电脑没有安装Sass,你可以在网上尝试使用。

在转译之前,你需要选择底部的“Indented Syntax”选项。

安装

Sass是一个Ruby gem。如果你的本地已经安装了Ruby gems,那么可以在你命令终端直接运行:

CSS

gem install sass

1
gem install sass

Sass也可以使用命令行工具将Sass文件转译成CSS文件。

你可以键入“sass –watch sass_folder:stylesheets_folder”,这个时候你的Sass文件(文件扩展名必须是.sass)stylesheets_folder就会把转译的样式文件保存在“sass_folder”目录,当然你的sass文件必须保存在这个文件目录中。“–watch”选项的意思就是将这个目录中的sass文件转译成样式文件。

CSS转换成Sass

在现有的项目中通过“sass-convert”使用sass。

在终端进入你的目录中,键入“sass-convert –from css –to sass -R .”。将CSS转换成Sass。其中“-R”表示递归,“.”表示当前目录。

Scss

在这里我们只介绍了Sass的语法,然后还有一个新的名称叫SCSS或者Sassy CSS。不同的是SCSS看起来更像CSS,但他也像Sass一样具有变量、混合、嵌套和选择器继承等特性。

总结

在你组织和管理CSS时,Sass真的很优秀。还有个项目Compass,它在CSS框架中使用混合模式,而不是去修改你的HTML结构或者重新定义你的类名。

那你还在等什么呢?在你的下一个项目中就尝试使用Sass吧。

赞 2 收藏 评论

图片 14

你需要知道的三个 CSS 技巧

2013/03/05 · CSS · CSS

英文原文:Three CSS features you need to know about ,翻译:外刊IT评论

图片 15

各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备,以一种更具交互性的方式来访问互联网。这意味着我们终于能够利用更强大更灵活的CSS来创造更简洁,更好维护的浏览器前端代码。现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能

在CSS中用attr()显示HTML属性值

attr()功能早在CSS 2.1标准中就已经出现,但现在才开始普遍流行。它提供了一个巧妙的方法在CSS中使用HTML标签上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。

要想使用这个功能,你需要用到三种元素:一个:before 或 :after CSS伪类样式, .content属性,和一个带有你想使用的HTML属性名称的attr()表达式。例如,想去显示<h3>标题上的data-prefix属性的值,你可以写成这样:

CSS

h3:before { content: attr(data-prefix) " "; } <h3 data-prefix="Custom prefix">This is a heading</h3>

1
2
3
4
5
h3:before {
    content: attr(data-prefix) " ";
    }
 
    <h3 data-prefix="Custom prefix">This is a heading</h3>

显然,这个例子并没有展示它有多大用处,只是展示了它的基本用法。让我们来试一个更有用的例子,attr()的一个极好的应用就是当用户打印页面时将页面链接显示出来。为了实现这个,你可以这样写:

CSS

@media print { a:after { content: " (link to " attr(href) ") "; } } <a href=" our home page</a>

1
2
3
4
5
6
7
@media print {
    a:after {
    content: " (link to " attr(href) ") ";
    }
    }
 
    <a href="http://example.com">Visit our home page</a>

一旦你知道了这个技巧,你就会吃惊于很多时候它能给你的工作带来的方便!

提示:在新版的CSS3标准中,attr()功能被扩展,可以用在各种CSS标记中。

使用counter()在列表中自动添加序号

另外一个在CSS 2.1在就已经支持的功能是counter(),使用它,你能方便的在页面标题,区块和其它各种连续出现的页面内容上添加序号。有了它,你就不必限制于只能使用<ol>来实现这个效果,你可以更灵活的在页面上使用自定义数字序列。

关键就是它真的很简单:在:before伪类里的content属性加入counter():

CSS

body { counter-reset: heading; } h4:before { counter-increment: heading; content: "Heading #" counter(heading) "."; }

1
2
3
4
5
6
7
8
body {
    counter-reset: heading;
    }
 
    h4:before {
    counter-increment: heading;
    content: "Heading #" counter(heading) ".";
    }

如果你想知道更多关于这个counter归零和自增方法的知识,请参考关于这个主题的Mozilla
Developer Network页面。里面有个极好的如何使用嵌套counter的例子。

使用calc()做算术

最后,但不是最不重要的,让我们来说说calc()功能。这个函数能让你执行简单的算术计算,例如计算元素的长宽,免去了你写不易维护的Javascript代码。这个函数支持所有简单的基本算术运算,包括加减乘除。

比方说,你想创建一个元素,使它的宽度占满它的父元素,但还要留出一部分像素宽做其它用处:

CSS

.parent { width: 100%; border: solid black 1px; position: relative; } .child { position: absolute; left: 100px; width: calc(90% - 100px); background-color: #ff8; text-align: center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
    width: 100%;
    border: solid black 1px;
    position: relative;
    }
 
    .child {
    position: absolute;
    left: 100px;
    width: calc(90% - 100px);
    background-color: #ff8;
    text-align: center;
    }

漂亮吧,不是吗?更详细的介绍请参考W3C CSS calc 规范。

我们可以越来越清楚的发现,CSS已经成熟到在某些方法可以替代javascript,极大的简化了web开发人员的工作。如果你还不开始利用这些功能,那只能说是在犯傻。

赞 1 收藏 评论

图片 16

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:你需要知道的三个,CSS基线之道

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文