“个人网站”开发实战 第三课
Stylus
讲师：翟路佳
| 教程二维码 | 本节课二维码 |
|---|---|
 |
 |
本节课程大纲
- CSS 预处理工具
- Stylus 简介
- 使用 Stylus 进行开发
CSS 预处理工具
CSS 本身的问题
- 没有变量、没有判断、没有循环、没有函数
- 浏览器兼容问题
- 缺少科学的组织方式
解决方案
CSS3
- 变量
attr() - 计算属性
calc() - 固定函数
count
预处理工具
- LESS
- SASS
- Stylus
Stylus 简介
安装
npm install stylus -g
编译 Stylus 为 CSS
stylus source/ -o to/
常见用法演示
Stylus
a
color #333
text-decoration none
CSS
a {
color: #333;
text-decoration: none;
}
层级嵌套
Stylus
.lead
font-size 1.25em
a
color #F90
CSS
.lead {
font-size: 1.25em;
}
.lead a {
color: #F90;
}
继承上一级
Stylus
a
color #333
&:hover
color #F60
CSS
a {
color: #333;
}
a:hover {
color: #F60;
}
变量，运算
Stylus
gap = 10px
p
margin-bottom gap * 2
padding 0 gap
CSS
p {
margin-bottom: 20px;
padding: 0 10px;
}
循环
Stylus
for deg in -5..5
.rotate-{deg * 5}
transform rotate(deg * 5deg)
CSS
.rotate--25 {
transform: rotate(-25deg);
}
.rotate--20 {
transform: rotate(-20deg);
}
....
.rotate-25 {
transform: rotate(25deg);
}
函数（mixin）
Stylus
border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
a.button
border-radius(5px)
CSS
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}