CSS Stylus 基础
介绍
CSS 预处理器是一种工具,它扩展了原生 CSS 的功能,提供了变量、嵌套、混合(Mixins)、函数等高级特性,使 CSS 代码更易于维护和扩展。Stylus 是其中一种流行的 CSS 预处理器,以其简洁的语法和强大的功能而闻名。
与 Sass 和 LESS 相比,Stylus 的语法更加灵活,甚至可以省略大括号 {}
和分号 ;
,这使得代码更加简洁。本文将带你从零开始学习 Stylus 的基础知识。
安装 Stylus
在开始编写 Stylus 代码之前,你需要先安装 Stylus。可以通过 npm(Node.js 包管理器)来安装:
npm install stylus -g
安装完成后,你可以使用以下命令将 .styl
文件编译为 .css
文件:
stylus style.styl -o style.css
基础语法
1. 变量
Stylus 允许你使用变量来存储颜色、字体、尺寸等值。变量以 $
开头,但也可以省略。
primary-color = #3498db
font-size = 14px
body
color primary-color
font-size font-size
编译后的 CSS:
body {
color: #3498db;
font-size: 14px;
}
变量名可以是任何有效的标识符,建议使用有意义的名称。
2. 嵌套
Stylus 支持嵌套规则,这使得代码结构更加清晰。
nav
ul
margin 0
padding 0
list-style none
li
display inline-block
a
text-decoration none
color #333
编译后的 CSS:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration: none;
color: #333;
}
过度嵌套可能会导致 CSS 选择器过于复杂,影响性能,建议适度使用。
3. 混合(Mixins)
Mixins 是一种将一组 CSS 属性打包并重用的方式。你可以将 Mixins 看作是一个函数。
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
button
border-radius(5px)
编译后的 CSS:
button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Mixins 可以接受参数,这使得它们更加灵活。
4. 函数
Stylus 支持自定义函数,可以用于计算值或生成复杂的 CSS。
add(a, b)
a + b
body
padding add(10px, 20px)
编译后的 CSS:
body {
padding: 30px;
}
5. 条件语句
Stylus 支持条件语句,可以根据条件动态生成 CSS。
theme = dark
body
if theme == dark
background-color #333
color #fff
else
background-color #fff
color #333
编译后的 CSS:
body {
background-color: #333;
color: #fff;
}
实际案例
假设你正在开发一个按钮组件,可以使用 Stylus 来简化样式代码:
button-style(bg-color, text-color)
background-color bg-color
color text-color
padding 10px 20px
border none
border-radius 5px
cursor pointer
&:hover
opacity 0.8
.button-primary
button-style(#3498db, #fff)
.button-secondary
button-style(#2ecc71, #fff)
编译后的 CSS:
.button-primary {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button-primary:hover {
opacity: 0.8;
}
.button-secondary {
background-color: #2ecc71;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button-secondary:hover {
opacity: 0.8;
}
总结
Stylus 是一种功能强大且灵活的 CSS 预处理器,通过变量、嵌套、Mixins、函数和条件语句等特性,可以显著提高 CSS 的开发效率和可维护性。本文介绍了 Stylus 的基础语法和实际应用场景,帮助你快速上手。
附加资源与练习
- 官方文档: Stylus 官方文档 是学习 Stylus 的最佳资源。
- 练习: 尝试使用 Stylus 重构你的 CSS 项目,体验其简洁和强大。
- 扩展阅读: 了解其他 CSS 预处理器,如 Sass 和 LESS,比较它们的异同。
Happy coding! 🎉