Css预处理器

  1. 定义
    CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。
  2. 语法

在使用CSS预处理器之前最重要的是了解语法,我只写过stylus,就从网上找了下另外两种语法的格式,与大家对比分享。

首先Sass和Less都是用的是标准的CSS语法,因此你可以很方便的把已完成的CSS代码转为预处理器识别的代码,Sass默认使用 .sass扩展名,而Less默认使用.Less扩展名。

一下是两者的语法

/* style.scss or style.less */
h1 {
color: #0982C1;
}
你注意到Sass同时也支持老语法,就是不包含花括号和分号的书写格式。

/* style.sass /
h1
color: #0982c1
然而Stylus支持的语法就更多样性,它默认使用.styl的文件扩展名,下面是Stylus语法。
/
style.styl */
h1 {
color: #0982C1;
}

/* omit brackets */
h1
color: #0982C1;

/* omit colons and semi-colons */
h1
color #0982C1
复制代码

3.变量

你可以在CSS预处理中声明变量,并在整个样式单中使用,支持任何类型的变量,例如:颜色、数值(是否包含单位)、文本。然后你可以任意的调取和使用该变量。Sass的变量是必须$开始,然后变量名和值要冒号隔开,跟CSS属性书写格式一致。

复制代码
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;

body {
color: $publicColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}

而Less的变量名使用@符号开始:

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;

body {
color: @publicColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}
  Stylus对变量名没有任何限定,你可以是$开始,也可以是任意字符,而且与变量值之间可以用冒号、空格隔开,需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量,但其对应的值并不会赋予该变量,换句话说,在 Stylus 的变量名不要用 @ 开头。

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted

body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth

上面三种不同的CSS写法,最终将会生成相同结果:

body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}
  最容易体现它的好处的是,假设你在CSS中使用同一种颜色数十次,如果你要修改显色,需要找到并修改十次相同的代码,而有了CSS预处理器,修改一个地方就够了。

4.嵌套关系

如果你需要在CSS中相同的parent引用多个元素,你需要一遍一遍的去写parent。例如:

section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}

然而如果用CSS预处理器,就可以少些很多单词,而且父节点关系一目了然。

section {
margin: 10px;

nav {
height: 25px;

a {
  color: #0982C1;

  &:hover {
    text-decoration: underline;
  }
}

}
}

stylus还可省略花括号,书写更加方便,根据个人喜好还可删除中间冒号。

section
margin: 10px;
nav
height: 25px;
a
color: #0982C1;
&:hover
text-decoration: underline;
最终生成CSS结果是:
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值