CSS即将具备的6种处理器特性
来源:互联网 发布:汽车行业概况知乎 编辑:程序博客网 时间:2024/05/18 12:39
众所周知,CSS是不具备类似其他程序语言一样的特性,没有逻辑性而言。他就是一门描述性语言。
因此才会有各式各样的CSS处理器出来,比如较为流行的Sass,LESS和Stylus。当然还有近年最强大的PostCSS,在项目中使用PostCSS能将你带入到一个全新的CSS世界,至于原因是什么,暂不阐述。
使用过CSS处理器的同学应该知道,在CSS处理器中最常见的几个特性是变量、混合宏、扩展、嵌套、运算以及一些简单的逻辑运算。
经过多年的沉淀,这些特性开始尝试在CSS中使用。比如下面我们将要说的几个特性,就是CSS自身已具备或将要具备的类似于CSS处理器的特性。
变量
$size20:20px;.main{ margin-top:$size20; padding:$aize20;}
在Sass中通过$声明一个变量。在CSS中是这样来声明变量的:
:root{ --mary-color:blue;}nav.mary{ background:var(--mary-color);}
从上面的代码中可以看出。
在CSS中是通过前缀–来声明一个变量,如果将变量放置在:root中,代表其声明的是一个全局变量,如果将其放置在某个CSS代码块中,表示声明的局部变量。使用的时候,借助var()函数来调用已声明的变量。
在var()函数中可以接受两个参数:
div{color:var(--mar-var,red);}
第一个参数代表变量名,第二个参数指变量的默认值。也就是说,如果未显式的声明–my-var这个变量,那么通过var()临时声明了这个变量,而且这个变量的值是red。
CSS变量得到了众多主流浏览器的支持,而且使用的场景也特别的多,比如在动画中。
这里只是简单的介绍了一下CSS变量的简单使用,有关于这方面的详细介绍,大家可以百度一下。
混合宏
在CSS处理器中另一个特性就是混合宏。混合宏最强的特性就是可以方便你引用一个代码块。同样的我们先来看Sass中的混合宏。
在Sass中通过@mixin关键词来声明一个混合宏,然后通过@include来调用已声明的混合宏:
@mixin font-size($size,$base){ font-size:$size; font-size:($size/$base)* 1em;}body{ @include font-size(12,14);}
编译出来就是:
body{ font-size:12px; font-size:0.857rem;}
上面创建了一个font-size的混合宏,并且给这个混合宏传递了两个参数$size和$base
。
而这个混合宏的功能就是计算font-size的值。让不支持rem的浏览器采用px作为单位值,对于支持rem的浏览器采用rem的单位值。
CSS的混合宏声明有点类似于变量的声明,只不过在里他是一个代码块,然后使用@apply规则(类似于Sass中的@include关键词)调用已声明好的混合宏。
运算
在CSS处理器中可以进行简单的一些数学运算,比如说加减乘除之类。
那么在CSS中其实也有类似的计算功能。
此时,我想大家应该马上想到了calc()函数。如此说来,这个也算是CSS带有的CSS处理器特性之一的话,那它比CSS变量特性还要更早。
我想大家应该也在项目中或多或少的使用过:
nav{margin:calc(1rem-2px) calc(1rem-1px);}
这里咱们看不出计算出来的值是多少,其实浏览器会自动根据表达式计算出其值。特别是CSS具有变量的特性之后,calc()使用的越来越频繁。
colorful{ --translation:10; transform: translateX(calc(var(--translation)*1vw)) translateY(calc(var(--translation)*1vh)); fliter:hue-rotate(calc(var(--translation)*4.5deg)); will-change:transform,filter; transition:transform 500ms ease-in-out ,filter 500ms linter;}
嵌套
我想大家使用CSS处理器嵌套的时候,应该感觉到了非常的爽。当然嵌套要是没用好,反而得到不佳的效果。我看到过有同学无限层次的嵌套,结果编译出来的CSS简值无法让人接受。
同样的,先来看Sass的嵌套:
ul{ margin:10px auto; li{ padding: 0 10px; } a{ color:pink; }}
因为使用嵌套是有风险的,建议任何嵌套不要超过三级。当然,在Sass中可以通过@at-root跳出嵌套,或者通过自定义的函数也能实现跳出嵌套。
在此也希望在CSS的嵌套中也能具备类似的特性,如果一来,为了维护更好的代码块,就算是嵌套层级深,也能跳出层级关系。
大家也希望能在CSS中具备类似的嵌套特性吧。@Tab Atkins提出过CSS原生的嵌套。CSS的嵌套其实将有可能类似于Sass这样的嵌套。只不过Sass需要编译,而CSS的嵌套不需要编译就能直接被浏览器识别渲染。
扩展
在Sass中可以使用@extend扩展已声明的任何类代码块或者通过%声明的占位符:
.qiaoba{ margin:0 auto; padding:10px; font-size:16px;}.luo{ @extend .qiaoba; border-color:red;}.nvdi{ @extend .qiaoba; border-color:blue;}.qiwuhai{ @extend .qiaoba; border-color:pink;}
上面的代码编译出来是什么我想大家都知道了。不同状态继承了.qiaoba的基本样式,只不过在不同的状态重置了border-color。
同样的,到目前为止还没有任何浏览器支持类似Sass这样的扩展规则特性。但@Tab Atkins已提出相关的建议。或许有一天,CSS的扩展规则也类似于Sass中的扩展规则。
颜色函数
CSS处理器提供了很多个颜色函数。可能通过这些函数计算出颜色新值。在CSS中,也将具备这方面的特性。@Erik Jung写了一篇文章来介绍CSS Color Module Level 4特性。介绍color-mod()函数来计算颜色。另外@Ahmad Shadeed分享了如何使用rgba()模拟出color-mod()函数特性。
更为强大的是,@Tyler Gaw使用React写的ColorMe,演示了color-mod()函数如何基于一个颜色,在不同条件下的变化。
(哇~CSS将在也不无聊~~)
下面代码简单演示了color-mod()函数的使用方式:
nav{background:color-mod(#fff hue(360) saturation(100%))}
总结
从使用多年CSS处理器经验来说,CSS处理器的确帮助我解决了很多问题,也让自己编码效率得到提高。
如果能将CSS处理这些优秀的特性移植到CSS规范中来,而不需要工具来编译的话,我们会更喜欢。当然这些CSS处理器的发展给CSS规范提供新思想和方法。
最后我希望向大家呈现这些新特性,能激发你在自己的工作中使用它们。
- CSS即将具备的6种处理器特性
- 即将到来的Android N,将具备这些新特性
- ESB应该具备的特性
- 即将来到: CSS Feature Queries (CSS特性查询)
- 即将来到: CSS Feature Queries (CSS特性查询)
- 数据库查询处理器的特性
- 即将上市的国行iphone4S具备Siri原生功能
- 数据库事务必须具备的ACID特性
- 数据库事务必须具备的ACID特性
- 数据库事务必须具备的ACID特性
- 测试技术专家需要具备的特性
- CSS 同时具备两个class的样式
- CSS的继承特性
- CSS的特性
- 优秀的工作流平台应具备的基本特性
- 后台服务所应该具备的非业务特性。
- 移动应用应具备的 13 个特性
- 想要成为富人所必须具备的特性
- 之江决赛补题
- CSS知识点个人总结(不断更新)
- 转 使用迅雷下载百度云盘大文件方法
- 结构体实现通讯录文件流版
- Virtual-Box Ubuntu 16.04 你应该这样来安装Chrome google 浏览器
- CSS即将具备的6种处理器特性
- java.io.CharConversionException: isHexDigit
- Codeforces 762C Two strings (前缀与后缀)
- HDU 2605 Snake(DFS+BFS+技巧+细节)(好题)
- Mysql优化4-合适的索引
- [LeetCode]202. Happy Number(判断正整数是不是Happy Number)
- Android-service之aidl
- 编写qt程序的流程
- x86 中32位寻址模式