CSS 的未來-css教學-PHP中文網

前言

如果你對CSS預處理器有興趣，那麼這篇文章也許很適合你。

初學CSS預處理器，其實我是不太明白為什麼需要用這種東西的，後來想明白一件事，一切都是為了可維護性。例如下面這張圖

CSS 的未來

距離左邊有一點點間距，而其他元素設定的間距往往也是一樣的，但如果不使用預處理器，或許我們會這樣寫

CSS

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

登入後複製

但這種問題是，如果需要更改所有間距，你不得不誒去替換，這樣帶來了很多不必要的工作量，如果使用預處理器就好辦了，因為預處理器是允許你使用變數的，你可以像程式語言一樣，定義一個全域變量，在需要的地方，引用這個全域變量，更改的時候，只需要修改一個就好了，假設程式碼如下:

CSS

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

登入後複製

也就是說預處理器很大一部分就是為了解決可維護性，本章講解的是後處理器。

那麼後處理器和預處理器有什麼區別

你可以這樣理解，後處理器就好比動態語言，而預處理器就好比靜態語言。預處理器就是事先將結果編譯出來，而後處理器則不同，值是在執行時才決定的。

CSS的未來

在未來的CSS中將會支援更多的屬性以及函數，其中不乏有變量，嵌套，值計算等，這一章我們將會講解它們。

注意：因為本節內容大部分需要CSS未來版本才支持，所以你的瀏覽器可能不一定有效果，不過有一個插件(cssnext)可以解決這個問題，關於這個插件的使用請到本節的最後一節中查看。

CSS變數

1. 變數的基本使用

在這些新增的功能中最喜歡的非CSS變數莫屬，CSS變數名稱透過自訂屬性來設定（要實現全域變量，需要在

html

或body也可以在: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;
}

登入後複製

效果如圖13.11

CSS 的未來圖13.11 變數

圖13.11 變數

圖13.11 變數 函數來使用這些變數。

需要注意的是這些變數對大小寫是敏感的，如：

--color

和

--Color是兩個不同的變數。

另外這些變數也是可以繼承的，如下這段：

CSS

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

登入後複製

效果如圖13.12

CSS變數

性性程式碼：

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">:root{ --head-color:red; } .box{ --head-color:blue; } .box p{ color:var(--head-color); }</pre><div class="contentsignin">登入後複製</div></div>如上這段，我們在全局聲明了一個--head-color在.box中又聲明了一次，那麼它最終會使用的是它父元素中定義的
-- head-color

，就近原則，效果如圖13.13

CSS 的未來

圖13.13 變數也具有層疊性不過還得注意一下就是這些變數不支援

!設定是一樣的，根本沒用，如下：

CSS

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

登入後複製

效果如圖13.14

CSS變數

CSS 的未來

圖13.14 變數

圖13.14 變數不支持!important head-color

設定了

!important但還是被層疊了，如果是正常情況應該會像下面這段程式碼一樣：

CSS

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

登入後複製

如果可以的話應該是這個樣子

CSS 的未來這個

var

函數還支援一個很強大的功能，允許你傳遞一個預設的參數，當變數不存在的時候就會使用預設值，如下：

CSS

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

登入後複製

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

CSS 的未來

图13.16 使用默认值

2.CSS变量的意义

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

JavaScript

var oBox = document.getElementById(&amp;#39;box&amp;#39;);
oBox.style.width = &amp;#39;100px&amp;#39;;
oBox.style.height = &amp;#39;100px&amp;#39;;
oBox.style.backgroundColor = &amp;#39;red&amp;#39;;

登入後複製

在这段代码中我们通过oBox变量来引用.box元素，在下次的使用中就不需要重新去获取这个元素了，这样给我们带来了很大的便利。在CSS中变量也同样重要，不然你让Less、Sass等预处理情何以堪，正是因为它们支持在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;
  }
}

登入後複製

以上当屏幕宽度大于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);
}

登入後複製

效果如图13.17

CSS 的未來

图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;
}

登入後複製

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

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

未来的媒体查询

1.自定义媒体查询

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

CSS

@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;
  }
}

登入後複製

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

CSS

@media (width &gt;= 320px) and (width &lt;= 640px) {
  body{
    background-color:red;
  }
}

登入後複製

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

CSS

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

登入後複製

自定义选择器

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

CSS

@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;
}

登入後複製

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

选择器嵌套

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

CSS

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

登入後複製

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

CSS

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

登入後複製

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

CSS

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

登入後複製

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

CSS

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

登入後複製

它还支持比较复杂的嵌套（规则嵌套），如下这段：

CSS

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

登入後複製

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

CSS

p a{
    color: red
}

登入後複製

颜色函数通过`color`使用，如下：
颜色函数

CSS

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

登入後複製

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

CSS

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

登入後複製

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

CSS

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

登入後複製

这个还是比较方便的。

更多这方面的功能可以到https://drafts.csswg.org/css-color/#modifying-colors中查看。

初始值

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

CSS

p {
  display: initial;
}

登入後複製

我才是真正的DIV，T_T
我才是真正的DIV，T_T

效果如图13.18所示

CSS 的未來

图13.18 初始值

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

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

CSS

p{
  all:initial;
}

登入後複製

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

cssnext插件使用

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

使用JavaScript来转换CSS的工具

这里并不想详细的讲解postcss是什么，更多关于postcss的说明可以到http://postcss.org/官网查看，接下来我们来安装一下postcss

安装postcss-cli

npm install postcss-cli -g

登入後複製

npm install postcss postcss-cssnext -g

登入後複製

下载完以后，我们接着下载cssnext如下：

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

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

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

登入後複製

效果如图13.19所示

CSS 的未來

图13.19 输入这段代码

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

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

登入後複製

具体效果如下：

源代码：

CSS

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

登入後複製

转换后的代码：

CSS

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

登入後複製

CSS 的未來

你可以這樣理解，後處理器就好比動態語言，而預處理器就好比靜態語言。預處理器就是事先將結果編譯出來，而後處理器則不同，值是在執行時才決定的。

在未來的CSS中將會支援更多的屬性以及函數，其中不乏有變量，嵌套，值計算等，這一章我們將會講解它們。

1. 變數的基本使用

在這些新增的功能中最喜歡的非CSS變數莫屬，CSS變數名稱透過自訂屬性來設定（要實現全域變量，需要在

2.CSS变量的意义

应用规则集(@apply)

未来的媒体查询

1.自定义媒体查询

2.限制媒体查询范围

自定义选择器

选择器嵌套

颜色函数通过color使用，如下：颜色函数

初始值

cssnext插件使用

颜色函数通过`color`使用，如下：
颜色函数