变量让你轻松制作响应式网页,实例对比

CSS 变量让你轻松制作响应式网页

2018/03/07 · CSS · 响应式

原文出处: Per Harald Borgen   译文出处:白吟灵   

图片 1

如果你之前没有听说过CSS变量,那么现在我将告诉你:它是CSS的新特性,让你能够在样式表中使用变量的能力,并且无需任何配置。
实际上,CSS变量能够让你改变以往设置样式的老方法:

h1{ font-size:30px; } navbar > a { font-size:30px; }

1
2
3
4
5
6
h1{
    font-size:30px;
}
navbar > a {
    font-size:30px;
}

而使用了CSS变量之后:

:root { --base-font-size: 30px; } h1 { font-size: var(--base-font-size); } navbar > a { font-size: var(--base-font-size); }

1
2
3
4
5
6
7
8
9
:root {
  --base-font-size: 30px;
}
h1 {
  font-size: var(--base-font-size);
}
navbar > a {
  font-size: var(--base-font-size);
}

这样的词法有点奇怪,但它确实能够让你通过仅改变--base-font-size的值来改变app中所有原生的字体大小。

如果你想要学习CSS变量的知识,可以登录Scrimba看我的视频课程,或是阅读我在Medium上写的文章:如何学习CSS变量。

好了,现在让我们看看如何使用这个新知识来更加简单地制作响应式站点吧。

本文作者: 伯乐在线 - 追梦子 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

CSS Grid VS Flexbox:实例对比

2017/04/21 · CSS · Flexbox, Grid

原文出处: Danny Markov   译文出处:IT程序狮   

图片 2

  • DEMO 地址:【传送门】
  • 示例下载地址: 【传送门】

不久以前,所有 HTML 页面的布局还都是通过 tables、floats 以及其他的 CSS 属性来完成的。面对复杂页面的布局,却没有很好的办法。

然而Flexbox的出现,便轻松的解决了复杂的 Web 布局。它是一种专注于创建稳定的响应式页面的布局模式,并可以轻松地正确对齐元素及其内容。如今已是大多数 Web 开发人员首选的 CSS 布局方式。

现在,又出现了一个构建 HTML 最佳布局体系的新竞争者。(冠军头衔正在争夺中…)它就是强大的CSS Grid布局。直到本月月底,它也将在Firefox 52和Chrome 57上得到原生支持,相信不久也会得到其他浏览器兼容性的支持。

初始配置

让我们来把下面这个页面变成响应式的吧:图片 3

这个页面在PC端看上去很不错,不过你可以看到它在移动端的表现并不好。就像下面这样:
图片 4

在下面这张图中,我们在样式上做了一些改进,让它看起来更好一点:

  1. 重新排列整个网格布局,使用垂直排列取代固定两列布局。
  2. 将框架整体上移了一点。
  3. 对字体进行了缩放 。

图片 5

目光转到CSS代码中,下面是我们要修改的代码:

h1 { font-size: 30px; } #navbar { margin: 30px 0; } #navbar a { font-size: 30px; } .grid { margin: 30px 0; grid-template-columns: 200px 200px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
h1 {
  font-size: 30px;
}
#navbar {
  margin: 30px 0;
}
#navbar a {
  font-size: 30px;
}
.grid {
  margin: 30px 0;
  grid-template-columns: 200px 200px;
}

更具体地说,我们需要在一个媒体查询中做出以下调整:

  • 将h1的字体调整为20px;
  • 减少#navbar的上外边距为15px;
  • 将#navbar的字体大小减少到20px;
  • 减少.grid的外边距为15px;
  • 将.grid从两列布局变为单列布局。

注意:样式表里不仅仅是这些CSS声明,但是在这篇教程中我跳过它们,因为媒体查询并不影响它们的设置。你可以在这里获取完整的代码。

仅供参考

基本布局测试

要了解这两个体系构建布局的方式,我们将通过相同的 HTML 页面,利用不同的布局方式 (即 Flexbox 与 CSS Grid)为大家区分。

同时,你也可以通过文章顶部附近的下载按钮,下载演示项目进行对比,或者通过在线演示来察看它们:

图片 6

简版静态页面布局

该页面的设计相对比较简单 – 它是由一个居中的容器组成,在其内部则包含了标头、主要内容部分、侧边栏和页脚。接下来,我们要完成同时保持 CSS 和 HTML 尽可能整洁的挑战事项:

  1. 在布局中将四个主要的部分进行定位。
  2. 将页面变为响应式页面;
  3. 对齐标头:导航朝左对齐,按钮向右对齐。

如你所见,为了便于比较,我们将所有事项从简处理。那么,让我们从第一个挑战事项开始吧!

旧方法

不使用CSS变量确实可以做到同样的效果,但这样会增加许多不必要的代码,因为上面大部分修改都需要将声明在媒体查询中重写一遍。就像下面这样:

@media all and (max-width: 450px) { navbar { margin: 15px 0; } navbar a { font-size: 20px; } h1 { font-size: 20px; } .grid { margin: 15px 0; grid-template-columns: 200px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@media all and (max-width: 450px) {
  
  navbar {
    margin: 15px 0;
  }
  
  navbar a {
    font-size: 20px;
  }
 
  h1 {
    font-size: 20px;
  }
  
  .grid {
    margin: 15px 0;
    grid-template-columns: 200px;
  }
}

前言

完成《CSS核心技术与实战》这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章没有写进去,但不管怎么说,多少了解一下还是有好处的,里面部分功能,有些浏览器已经实现了。

如果你对CSS预处理器感兴趣,那么本篇文章也许很适合你。

初学CSS预处理器,其实我是不太明白为什么需要用这种东西的,后来想明白一件事,一切都是为了可维护性。比如下面这幅图

图片 7

距离左边有一点点间距,而其他元素设置的间距往往也是一样的,但如果不使用预处理器,或许我们会这样写

CSS

.box{ padding:12px; } .footer{ padding:12px; } ....{ padding:12px; }

1
2
3
4
5
6
7
8
9
.box{
padding:12px;
}
.footer{
padding:12px;
}
....{
padding:12px;
}

但这种问题是,如果需要更改所有间距,你不得不诶个去替换,这样带来了很多不必要的工作量,如果使用预处理器就好办了,因为预处理器是允许你使用变量的,你可以像编程语言那样,定义一个全局变量,在需要的地方,引用这个全局变量,更改的时候,只需要修改一处就好了,假设代码如下:

CSS

var pad = 12px; .box{ padding:pad; } .footer{ padding:pad; }

1
2
3
4
5
6
7
var pad = 12px;
.box{
padding:pad;
}
.footer{
padding:pad;
}

也就是说预处理器很大一部分就是为了解决可维护性,本章讲解的是后处理器。

挑战 1:定位页面部分

Flexbox 解决方案

我们将从 Flexbox 解决方案开始。我们将为容器添加display: flex来指定为 Flex 布局,并指定子元素的垂直方向。

.container { display: flex; flex-direction: column; }

1
2
3
4
.container {
    display: flex;
    flex-direction: column;
}

现在我们需要使主要内容部分和侧边栏彼此相邻。由于 Flex 容器通常是单向的,所以我们需要添加一个包装器元素。

XHTML

<header></header> <div class="main-and-sidebar-wrapper"> <section class="main"></section> <aside class="sidebar"></aside> </div> <footer></footer>

1
2
3
4
5
6
<header></header>
<div class="main-and-sidebar-wrapper">
    <section class="main"></section>
    <aside class="sidebar"></aside>
</div>
<footer></footer>

然后,我们给包装器在反向添加display: flexflex-direction属性。

.main-and-sidebar-wrapper { display: flex; flex-direction: row; }

1
2
3
4
.main-and-sidebar-wrapper {
    display: flex;
    flex-direction: row;
}

最后一步,我们将设置主要内容部分与侧边栏的大小。通过 Flex 实现后,主要内容部分会比侧边栏大三倍。

.main { flex: 3; margin-right: 60px; } .sidebar { flex: 1; }

1
2
3
4
5
6
7
.main {
    flex: 3;
    margin-right: 60px;
}
.sidebar {
   flex: 1;
}

如你所见,Flex 将其很好的实现了出来,但是仍需要相当多的 CSS 属性,并借助了额外的 HTML 元素。那么,让我们看看 CSS Grid 如何实现的。

CSS Grid 解决方案

针对本项目,有几种不同的 CSS Grid 解决方法,但是我们将使用网格模板区域语法来实现,因为它似乎最适合我们要完成的工作。

首先,我们将定义四个网格区域,所有的页面各一个:

XHTML

<header></header> <!-- Notice there isn't a wrapper this time --> <section class="main"></section> <aside class="sidebar"></aside> <footer></footer>

1
2
3
4
5
<header></header>
<!-- Notice there isn't a wrapper this time -->
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>

header { grid-area: header; } .main { grid-area: main; } .sidebar { grid-area: sidebar; } footer { grid-area: footer; }

1
2
3
4
5
6
7
8
9
10
11
12
header {
    grid-area: header;
}
.main {
    grid-area: main;
}
.sidebar {
    grid-area: sidebar;
}
footer {
    grid-area: footer;
}

然后,我们会设置网格并分配每个区域的位置。初次接触 Grid 布局的朋友,可能感觉以下的代码会有些复杂,但当你了解了网格体系,就很容易掌握了。

.container { display: grid; /* Define the size and number of columns in our grid. The fr unit works similar to flex: fr columns will share the free space in the row in proportion to their value. We will have 2 columns - the first will be 3x the size of the second. */ grid-template-columns: 3fr 1fr; /* Assign the grid areas we did earlier to specific places on the grid. First row is all header. Second row is shared between main and sidebar. Last row is all footer. */ grid-template-areas: "header header" "main sidebar" "footer footer"; /* The gutters between each grid cell will be 60 pixels. */ grid-gap: 60px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.container {
    display: grid;
 
    /*     Define the size and number of columns in our grid.
    The fr unit works similar to flex:
    fr columns will share the free space in the row in proportion to their value.
    We will have 2 columns - the first will be 3x the size of the second.  */
    grid-template-columns: 3fr 1fr;
 
    /*     Assign the grid areas we did earlier to specific places on the grid.
        First row is all header.
        Second row is shared between main and sidebar.
        Last row is all footer.  */
    grid-template-areas:
        "header header"
        "main sidebar"
        "footer footer";
 
    /*  The gutters between each grid cell will be 60 pixels. */
    grid-gap: 60px;
}

就是这样! 我们现在将遵循上述结构进行布局,甚至不需要我们处理任何的 margins 或 paddings 。

新的方法

现在让我们看看使用CSS变量是如何起作用的。首先,我们要声明需要更改或复用的变量:

:root { --base-font-size: 30px; --columns: 200px 200px; --base-margin: 30px; }

1
2
3
4
5
:root {
  --base-font-size: 30px;
  --columns: 200px 200px;
  --base-margin: 30px;
}

然后,我们只需要在app中使用它们就可以了。非常简单:

#navbar { margin: var(--base-margin) 0; } #navbar a { font-size: var(--base-font-size); } h1 { font-size: var(--base-font-size); } .grid { margin: var(--base-margin) 0; grid-template-columns: var(--columns); }

1
2
3
4
5
6
7
8
9
10
11
12
13
#navbar {
  margin: var(--base-margin) 0;
}
#navbar a {
  font-size: var(--base-font-size);
}
h1 {
  font-size: var(--base-font-size);
}
.grid {
  margin: var(--base-margin) 0;
  grid-template-columns: var(--columns);
}

之后,我们可以在媒体查询中修改这些变量值:

@media all and (max-width: 450px) { :root { --columns: 200px; --base-margin: 15px; --base-font-size: 20px; }

1
2
3
4
5
6
@media all and (max-width: 450px) {
  :root {
    --columns: 200px;
    --base-margin: 15px;
    --base-font-size: 20px;
}

这样的代码是不是比之前要简洁多了?我们只需要专注于:root选择器就可以了。

我们将媒体查询中的4个声明减少到了1个,代码也从13行减少到了4行。

当然,这只是一个简单的例子。想象一下,在一个大中型网站中,有一个--base-margin变量控制着所有的外边距。当你想要在媒体查询时修改属性,并不需要用复杂的声明填充整个媒体查询,只是简简单单地修改这个变量值就可以了。

总之,CSS变量可以定义为未来的响应式。如果你想要学习更多的知识,我推荐你看我的免费教程。用不了多久你就能成为一个CSS变量大师。

查看更多我翻译的Medium文章请访问:
项目地址:https://github.com/WhiteYin/translation

1 赞 2 收藏 评论

图片 8

那么后处理器和预处理器有什么区别

你可以这样理解,后处理器就好比动态语言,而预处理器就好比静态语言。预处理器就是事先将结果编译出来,而后处理器则不同,值是在运行时才决定的。

挑战 2:将页面变为响应式页面

Flexbox 解决方案

这一步的执行与上一步密切相关。对于 Flexbox 解决方案,我们将更改包装器的flex-direction属性,并调整一些 margins。

@media (max-width: 600px) { .main-and-sidebar-wrapper { flex-direction: column; } .main { margin-right: 0; margin-bottom: 60px; } }

1
2
3
4
5
6
7
8
9
10
@media (max-width: 600px) {
    .main-and-sidebar-wrapper {
        flex-direction: column;
    }
 
    .main {
        margin-right: 0;
        margin-bottom: 60px;
    }
}

由于网页比较简单,所以我们在媒体查询上不需要太多的重写。但是,如果遇见更为复杂的布局,那么将会重新的定义相当多的内容。

CSS Grid 解决方案

由于我们已经定义了网格区域,所以我们只需要在媒体查询中重新排序它们。 我们可以使用相同的列设置。

@media (max-width: 600px) { .container { /* Realign the grid areas for a mobile layout. */ grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; } }

1
2
3
4
5
6
7
8
9
10
@media (max-width: 600px) {
    .container {
    /*  Realign the grid areas for a mobile layout. */
        grid-template-areas:
            "header header"
            "main main"
            "sidebar sidebar"
            "footer footer";
    }
}

或者,我们可以从头开始重新定义整个布局。

@media (max-width: 600px) { .container { /* Redefine the grid into a single column layout. */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer"; } }

1
2
3
4
5
6
7
8
9
10
11
@media (max-width: 600px) {
    .container {
        /*  Redefine the grid into a single column layout. */
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

CSS的未来

在未来的CSS中将会支持更多的属性以及函数,其中不乏有变量,嵌套,值计算等,这一章我们将会讲解它们。

注意:因为本节内容大部分需要CSS未来版本才支持,所以你的浏览器可能不一定有效果,不过有一个插件(cssnext)可以解决这个问题,关于这个插件的使用请到本节的最后一节中查看。

挑战 3:对齐标头组件

Flexbox 解决方案

我们的标头包含了导航和一个按钮的相关链接。我们希望导航朝左对齐,按钮向右对齐。而导航中的链接务必正确对齐,且彼此相邻。

XHTML

<header> <nav> <li><a href="#"><h1>Logo</h1></a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </nav> <button>Button</button> </header>

1
2
3
4
5
6
7
8
<header>
    <nav>
        <li><a href="#"><h1>Logo</h1></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </nav>
    <button>Button</button>
</header>

我们曾在一篇较早的文章中使用 Flexbox 做了类似的布局:响应式标头最简单的制作方法。这个技术很简单:

header { display: flex; justify-content: space-between; }

1
2
3
4
header {
    display: flex;
    justify-content: space-between;
}

现在导航列表和按钮已正确对齐。下来我们将使``

`内的 items 进行水平移动。这里最简单的方法就是使用display:inline-block`属性,但目前我们需要使用一个 Flexbox 解决方案:

header nav { display: flex; align-items: baseline; }

1
2
3
4
header nav {
    display: flex;
    align-items: baseline;
}

仅两行代码就搞定了! 还不错吧。接下来让我们看看如何使用 CSS Grid 解决它。

CSS Grid 解决方案

为了拆分导航和按钮,我们要为标头定义display: grid属性,并设置一个 2 列的网格。同时,我们还需要两行额外的 CSS 代码,将它们定位在相应的边界上。

header{ display: grid; grid-template-columns: 1fr 1fr; } header nav { justify-self: start; } header button { justify-self: end; }

1
2
3
4
5
6
7
8
9
10
header{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
header nav {
    justify-self: start;
}
header button {
    justify-self: end;
}

至于导航中的内链 – 这是我们使用 CSS grid 最好的布局展示:

图片 9

虽然链接为内链形式,但它们不能正确的对齐。由于 CSS grid 不具备基线选项(不像 Flexbox 具备的align-items属性),所以我们只能再定义一个子网格。

header nav { display: grid; grid-template-columns: auto 1fr 1fr; align-items: end; }

1
2
3
4
5
header nav {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    align-items: end;
}

CSS grid 在此步骤中,存在一些明显的布局上的缺陷。但你也不必过于惊讶。因为它的目标是对齐容器,而不是内部的内容。所以,用它来处理收尾工作,或许不是很好的选择哦。

CSS变量

结论

如果你已经浏览完整篇文章,那么结论不会让你感到意外。事实上,并不存在最好的布局方式。Flexbox 和 CSS grid 是两种不同的布局形式,我们应该根据具体的场景将它们搭配使用,而不是相互替代。

对于那些跳过文章只想看结论的朋友(不用担心,我们也这样做),这里是通过实例比较后的总结:

  1. CSS grids 适用于布局大画面。它们使页面的布局变得非常容易,甚至可以处理一些不规则和非对称的设计。
  2. Flexbox 非常适合对齐元素内的内容。你可以使用 Flex 来定位设计上一些较小的细节。
  3. 2D 布局适合使用 CSS grids(行与列)。
  4. Flexbox 适用于单一维度的布局(行或列)。
  5. 共同学习并使用它们。

感谢你的阅读。若你有所收获,欢迎点赞与分享。

1 赞 3 收藏 评论

图片 10

1. 变量的基本使用

在这些新增的功能中最喜欢的非CSS变量莫属,CSS变量名通过自定义属性来设置(要实现全局变量,需要在htmlbody也可以在:root伪类中声明),并且自定义属性必须以--开头,使用var()来访问。如下:

CSS

:root{ --colorRed:red; --size:16px; --h:35px; --l-h:35px; } a{ display:block; height:var(--h); line-height:var(--l-h); color:var(--colorRed); font-size:var(--size); outline:1px solid #666; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:root{
  --colorRed:red;
  --size:16px;
  --h:35px;
  --l-h:35px;
}
 
a{
  display:block;
  height:var(--h);
  line-height:var(--l-h);
  color:var(--colorRed);
  font-size:var(--size);
  outline:1px solid #666;
}

效果如图13.11

图片 11

图13.11 变量

以上我们通过:root在全局中定义了几个变量,然后在a元素中通过var函数来使用这些变量。

需要注意的是这些变量对大小写是敏感的,如:--color--Color是两个不同的变量。

另外这些变量也是可以继承的,如下这段:

CSS

:root{ --color-red:red; } .box{ color:var(--color-red); }

1
2
3
4
5
6
:root{
  --color-red:red;
}
.box{
  color:var(--color-red);
}

CSS变量

效果如图13.12

图片 12

图13.12 继承

这些变量也具有层叠性,如下这段代码:

:root{ --head-color:red; } .box{ --head-color:blue; } .box p{ color:var(--head-color); }

1
2
3
4
5
6
7
8
9
:root{
  --head-color:red;
}
.box{
  --head-color:blue;
}
.box p{
  color:var(--head-color);
}

如上这段,我们在全局声明了一个--head-color.box中又声明了一次,那么它最终会使用的是它父元素中定义的--head-color,就近原则,效果如图13.13

图片 13

图13.13 变量也具有层叠性

不过还得注意一下就是这些变量不支持!important,也就是说设置了和没设置是一样的,根本没用,如下:

CSS

:root{ --head-color:red !important; } .box{ color:var(--head-color); } .box{ color:blue; }

1
2
3
4
5
6
7
8
9
:root{
  --head-color:red !important;
}
.box{
  color:var(--head-color);
}
.box{
  color:blue;
}

CSS变量

效果如图13.14

图片 14

图13.14 变量不支持!important

看到了吧,虽然我们给--head-color设置了!important但还是被层叠了,如果是正常情况应该会像下面这段代码一样:

CSS

.box{ color:red !important; } .box{ color:blue; }

1
2
3
4
5
6
.box{
  color:red !important;
}
.box{
  color:blue;
}

效果如图13.15

图片 15

图13.15 如果可以的话应该是这个样子

这个var函数还支持一个很强大的功能,允许你传递一个默认的参数,当变量不存在的时候就会使用默认值,如下:

CSS

:root{ /*--head-color:red;*/ } .box{ color:var(--head-color,orange); }

1
2
3
4
5
6
:root{
  /*--head-color:red;*/
}
.box{
  color:var(--head-color,orange);
}

以上我们在var中使用了一个默认的值,当--head-color不存在就会使用orange,效果如图13.16

图片 16

图13.16 使用默认值

2.CSS变量的意义

如果你使用过一些编程语言,你不会忘记变量是多么的重要,如在Javascript中,我们经常会写这样一段代码:

JavaScript

var oBox = document.getElementById('box'); oBox.style.width = '100px'; oBox.style.height = '100px'; oBox.style.backgroundColor = 'red';

1
2
3
4
var oBox = document.getElementById('box');
oBox.style.width = '100px';
oBox.style.height = '100px';
oBox.style.backgroundColor = 'red';

在这段代码中我们通过oBox变量来引用.box元素,在下次的使用中就不需要重新去获取这个元素了,这样给我们带来了很大的便利。在CSS中变量也同样重要,不然你让LessSass等预处理情何以堪,正是因为它们支持在CSS中像编程语言一样编程,所以在之前的很长一段时间里它们是那样的让人着迷。在CSS中合理的使用变量,可以减轻不少的工作,以及可维护性。比如一个网站的主调色,它们基本都是固定的,那么我们完全可以使用变量来储存它们,另外一点就是当网站改版时,如果网站主调色改变时我们只需要改变相应的变量即可,这或许就是变量的最大好处吧。从另一个角度来讲使用变量的另一个好处就是,具有一致性,比如页面中所有元素的字体大小都是引用的同一个变量,那么当我们改变这个变量时,其他元素的字体大小都会相应的改变,我们来看一下,下面这段代码:

CSS

:root{ --main-size:12px; } .box{ font-size:var(--main-size); } .box2{ font-size:var(--main-size); } .box3{ font-size:var(--main-size); } @media screen and (min-width:600px){ :root{ --main-size:16px; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:root{
  --main-size:12px;
}
.box{
  font-size:var(--main-size);
}
.box2{
  font-size:var(--main-size);
}
.box3{
  font-size:var(--main-size);
}
 
@media screen and (min-width:600px){
  :root{
    --main-size:16px;
  }
}

以上当屏幕宽度大于600px时,这三个元素都会相应的改变字体大小,使用这个可以和rem媲美。也许你还想给其中一个元素单独指定一个比--main-size大一点的字体,那我们可以结合使用calc函数,如下:

CSS

:root{ --main-size:12px; } .box{ font-size:var(--main-size); } .box2{ font-size:calc(var(--main-size) + 2px); } .box3{ font-size:var(--main-size); }

1
2
3
4
5
6
7
8
9
10
11
12
:root{
  --main-size:12px;
}
.box{
  font-size:var(--main-size);
}
.box2{
  font-size:calc(var(--main-size) + 2px);
}
.box3{
  font-size:var(--main-size);
}

效果如图13.17

图片 17

图13.17 单独设置某个样式

calc允许你使用计算功能,不过需要注意的是中间需要一个空格。

虽然以上只是几个很简单的例子,但这些也足以说明CSS变量是多么的重要,在以后的CSS写作中不要忘了使用它。

应用规则集(@apply)

我想你如果体验过组件化,那么你对@apply肯定会爱不释手,简单来说@apply可以实现更小的组合。如下:

CSS

:root{ --overflow-ellipsis:{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }; } .title{ width:200px; @apply --overflow-ellipsis; }

1
2
3
4
5
6
7
8
9
10
11
:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

在以上我们定义了一个用来实现当元素溢出时隐藏文字的代码段--overflow-ellipsis,当我们需要时只需要通过@apply来引用即可,真的是很实用的一个功能,不由想起来了Javascript中的函数。

如果某段代码是重复的,你不妨试试@apply

未来的媒体查询

1.自定义媒体查询

使用自定义的媒体查询使之更加语义化,使用如下:

CSS

@custom-media --big-viewport (max-width:1100px); @media (--big-viewport) { body{ background-color:red; } }

1
2
3
4
5
6
7
@custom-media --big-viewport (max-width:1100px);
 
@media (--big-viewport) {
  body{
    background-color:red;
  }
}

通过@custom-media来设置一个媒体规则。感觉没什么用?好吧,来看下一个功能。

2.限制媒体查询范围

以前如果我们想实现一个限制媒体查询的范围也许是这样的:

CSS

@media (min-width: 320px) and (max-width: 640px) { body{ background-color:red; } }

1
2
3
4
5
@media (min-width: 320px) and (max-width: 640px) {
  body{
    background-color:red;
  }
}

以上我们限制屏幕的宽在320到640之间时让页面背景变成红色,但现在我们可以这样:

CSS

@media (width >= 320px) and (width <= 640px) { body{ background-color:red; } }

1
2
3
4
5
@media (width >= 320px) and (width <= 640px) {
  body{
    background-color:red;
  }
}

是不是更加一目了然了,当然它还可以结合@custom-media来使用,如下:

CSS

@custom-media --noly-mobile (width >= 320px) and (width <= 640px); @media (--noly-mobile) { body{ background-color:red; } }

1
2
3
4
5
6
7
@custom-media --noly-mobile (width >= 320px) and (width <= 640px);
 
@media (--noly-mobile) {
  body{
    background-color:red;
  }
}

自定义选择器

想过自己来定义选择器吗,接下来我们就来实现一个,如下:

CSS

@custom-selector :--title h2,h3; .main :--title{ font-size:18px; font-weight:normal; }

1
2
3
4
5
6
@custom-selector :--title h2,h3;
 
.main :--title{
  font-size:18px;
  font-weight:normal;
}

自定义选择器通过@custom-selector来定义,后面跟随一个:--接着是自定义选择器的名称,后面是你需要定义的选择器,多个用逗号隔开,如果你不理解的话,可以看下面这段代码,以上和下面这段代码效果是一样的。

CSS

.main h2, .main h3{ font-size:18px; font-weight:normal; }

1
2
3
4
5
.main h2,
.main h3{
  font-size:18px;
  font-weight:normal;
}

要说,上面这两段代码的区别,可能就是自定义选择器更加灵活以及方便吧。

选择器嵌套

选择器嵌套是我非常喜欢的一个功能,话说当初我使用预处理器就是因为它有这个功能,小二来一段不加盐的代码:

CSS

div { & h2 { font-size:16px; &.title{ color:red; } & span{ color:pink; } } }

1
2
3
4
5
6
7
8
9
10
11
div {
  & h2 {
    font-size:16px;
    &.title{
      color:red;
    }
    & span{
      color:pink;
    }
  }
}

它的效果和下面这段代码一样:

CSS

div h2 { font-size: 16px } div h2.title { color: red } div h2 span { color: pink }

1
2
3
4
5
6
7
8
9
div h2 {
    font-size: 16px
}
div h2.title {
    color: red
}
div h2 span {
    color: pink
}

有没有一种再也不想用预处理器的冲动,另外对于媒体查询我们不需要用&来引用,直接在大括号中使用即可,如下:

CSS

div { @media (max-width:1100px) { background-color:red; } }

1
2
3
4
5
div {
  @media (max-width:1100px) {
    background-color:red;
  }
}

效果和下面这段代码一样:

CSS

@media (max-width:1100px) { div { background-color: red } }

1
2
3
4
5
@media (max-width:1100px) {
    div {
        background-color: red
    }
}

它还支持比较复杂的嵌套(规则嵌套),如下这段:

CSS

a{ @nest p &{ color:red; } }

1
2
3
4
5
a{
  @nest p &{
    color:red;
  }
}

规则嵌套需要使用关键字@nest,效果和下面这段一样:

CSS

p a{ color: red }

1
2
3
p a{
    color: red
}

颜色函数

颜色函数通过color使用,如下:

CSS

body{ background-color:color(pink a(30%)); }

1
2
3
body{
  background-color:color(pink a(30%));
}

这段代码的意思是说给body添加了一个背景为pink的颜色并且透明度为30%,和下面这段代码一样:

CSS

body{ background-color:rgba(255, 192, 203, 0.3); }

1
2
3
body{
  background-color:rgba(255, 192, 203, 0.3);
}

当然你也可以使用其它的颜色表示法,如:

CSS

body{ background-color:color(#666 a(30%)); }

1
2
3
body{
  background-color:color(#666 a(30%));
}

这个还是比较方便的。

更多这方面的功能可以到

初始值

我们知道一个div默认是块元素,那么如果你不想它默认变成块元素可以通过initial将它设置成初始值。如下:

CSS

div { display: initial; }

1
2
3
div {
  display: initial;
}

我才是真正的DIV,T_T

我才是真正的DIV,T_T

效果如图13.18所示

图片 18

图13.18 初始值

这里它之所以在一排了,是因为display的初始值就是inline,而为什么不将divdisplay设置成initial它默认是block是因为浏览器给div设置了默认样式,也就是说initial可以去掉浏览器默认样式。

如果你想去掉一个元素中的所有浏览器默认样式,可以这样:

CSS

div{ all:initial; }

1
2
3
div{
  all:initial;
}

但不是特别建议你这样,最好还是根据需求来。

cssnext插件使用

cssnext插件允许你在CSS中写未来版本的CSS,它会将这些代码转换成浏览器兼容的代码,不过要使用cssnext我们还得下载一个postcss,那么postcss是什么呢?官方是这样说的:

使用JavaScript来转换CSS的工具

1
使用JavaScript来转换CSS的工具

这里并不想详细的讲解postcss是什么,更多关于postcss的说明可以到

  1. 安装postcss-cli

npm install postcss-cli -g

1
2
npm install postcss-cli -g
 
  1. 下载完以后,我们接着下载cssnext如下:

npm install postcss postcss-cssnext -g

1
npm install postcss postcss-cssnext -g

为了方便我们这里使用的是命令行工具,如果想在命令行工具中使用postcss需要下载postcss-cli,这里我们是通过npm来下载的,npm是一个包管理工具,这里不做讲解,如果你不知道npm是什么,我想,你应该是前端新人,建议如果遇到不懂的通过搜索引擎来搜索。npm官网

这些都成功安装完以后我们就可以开始使用它了,如下:

postcss styles.css -u postcss-cssnext -d dist

1
postcss styles.css -u postcss-cssnext -d dist

效果如图13.19所示

图片 19

图13.19 输入这段代码

以上这段代码的意思是用postcss-cssnext这个插件将styles.css里面的代码转换成兼容的代码,-d表示要输出到哪个目录,-w可以用来监听文件的变化,当文件变化时会自动输出文件,如下:

postcss styles.css -u postcss-cssnext -w -d dist

1
postcss styles.css -u postcss-cssnext -w -d dist

更多方法可以访问

具体效果如下:

源代码:

CSS

:root{ --main-color:red; } div{ display:flex; } span{ color:var(--main-color); }

1
2
3
4
5
6
7
8
9
:root{
  --main-color:red;
}
div{
  display:flex;
}
span{
  color:var(--main-color);
}

转换后的代码:

CSS

div{ display:-webkit-box; display:-ms-flexbox; display:flex; } span{ color:red; }

1
2
3
4
5
6
7
8
div{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
span{
  color:red;
}

完。

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 20 图片 21

1 赞 2 收藏 评论

关于作者:追梦子

图片 22

快乐一直在我们身边,不管你身处何地何时,只要心是快乐的,一切都是快乐的。是那一秒,也是那一秒,都不会改变。 个人主页 · 我的文章 · 8 ·    

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:变量让你轻松制作响应式网页,实例对比

相关阅读