CSS扩展语言

Wesley13
• 阅读 863

CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有!

// 语法
// <custom-preperty-name> 自定义属性名
// <declaration-value>声明值(回退值)
// var( <custom-preperty-name>, <declaration-value>? )

:root {
  --main-bg-color: pink;
}
body {
  background-color: var(--main-bg-color, blue);
}

它也同ES6一样存在浏览器未部署不兼容的情况,即便它给了var()来打造变量,它仍旧显得很笨重!我提一个组件样式,为了避免样式冲突每次就得在前面加上一个组件唯一标识,就像这样:

.my-content article h1 { color: #333 }
.my-content article p { margin-bottom: 1.4em }
.my-content aside { background-color: #EEE }

得亏CSS扩展语言出现了,它为CSS引入了变量、混合器等等语法,让CSS得到模块化发展。CSS扩展语言大体上差不多,具体使用哪个语言来工作取决于开发者个人喜好,这里以Sass/SCSS举例。先说下这两位的区别,SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter 语法。

.my-content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

这样感觉就好多了,层级结构清晰,编译后就达到人工手写的样子。Sass也可以配合CSS选择器:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
}

Sass的结构是呈父子级关系,有时需要引用同级(&):

article a {
  color: blue;
  body.ie & { color: green }
  &:hover { color: red }
}

如果你感觉CSS属性有时候也挺烦躁的,可以使用属性嵌套,把属性名从中划线的地方断开,紧跟{}块。

// 这个例子不恰当,CSS本身可以简写
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
// 编译后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
// 属性简写
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
// 编译后
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

Sass赋予CSS模块的能力,开发者可以将变量单独放在一些文件来方便自定义样式,可以根据需求分出不同的文件。这时就需要用到@import,CSS不常用的一个特性。通常会只想生成少数几个css文件来减少请求,Sass有一个特殊的约定:文件名以下划线开头。这样Sass就不会在编译时单独编译这个文件输出CSS,而只把这个文件导入,@import也不需要写全名。

// themes/_night-sky.scss
@import "themes/night-sky";

假如你定义了一个变量的文件来供使用者改变里面的默认值,然而反复声明一个变量只有最后一处会有效覆盖前边的值,这时需要!default。

$link-color: blue;
$link-color: red;
a {
  color: $link-color;  /* red */
}
// 修改:
$link-color: blue !default;

@import还允许写在CSS规则内,Sass会将局部文件的CSS规则插入到导入的位置:

// _blue-theme.scss
aside {
  background: blue;
  color: white;
}

// import
.blue-theme {@import "blue-theme"}
// 编译后
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

因为Sass完全兼容CSS,所以它支持原生的@import,如果要导入原生CSS,须将后缀.css改为.scss再导入。

CSS的样式通常是给开发者内部的样式说明并不希望浏览者能看到,Sass提供了静默注释/* .... */。

为了使得网站的风格得到统一,那么统一使用变量处理是非常不错的选择,但是当样式越来越复杂,有一大段的样式要重用,独立变量就没办法了。这时需要混合器@mixin,如border-radio的兼容:

// @mixin
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// @include
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
// 编译后
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

那么什么时候使用@mixin呢?当不断重复使用一段样式,尤其是这段样式本身是一个逻辑单元。@mixin可以嵌套css规则,还可以进行传参及缺省参数:

// @mixin
@mixin rounded-corners($value:5px) {
  -moz-border-radius: $value;
  -webkit-border-radius: $value;
  border-radius: $value;
}

// @include
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners(15px);
}
// 编译后
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
}

增加代码的复用的另一个方法就是继承@extend:

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

继承和混合器的区别:继承是基于类建立在语义关系上;混合器是展示性样式的重用。在Sass里,它们实际给人的感觉没有太大差别,用哪一个最后效果都一样,直观感受有差别。比如上面的.error,然后下面对不同的错误类进行细化,形成一种递进的关系,继承比混合器更适合。

(小声嘀咕:蛮喜欢Less的混合器写法,没有那么多的命令。)

这儿提到继承和混合,顺便说一下在面向对象的编程语言中,继承(Inheritence)和混入(Mixin)之间的区别。

继承描述了一个对象是什么,而混入描述了这个对象能做什么。比如柯基犬属于犬科动物类,犬科动物又属于动物类。将拥有共性的属性、行为的事物抽象归为一体就是父类,子类拥有父类的共性,这就是继承。柯基犬会吃,人也会吃,多啦A梦也会吃。多啦A梦还拥有飞的技能,小鸟也会飞,飞机也能飞。它们归属于不同的类,拥有一种共性行为,定义这些行为然后赋予拥有这些行为的对象,这就是混入。

好了,CSS扩展语言就说到这儿,具体的全看技术选型。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
2个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
8个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这