-

CSS预处理工具Stylus简介

WEB前端

Stylus是一个CSS预处理器,提供一种高效、动态和富有表现力的方式来生成CSS。Stylus 比较激进,利用缩进、空格和换行来减少需要输入的字符。不过同时也兼容CSS语法。下面雷雪松详细的介绍一下如何使用预处理工具Stylus。

1、Stylus安装及使用

a、全局安装及使用
1. 安装

1
npm install stylus -g

2. 使用

1
stylus -w style.styl -o style.css

-w(watch): 监听文件的变化并重新编译,-o(out): 输出css文件

b、Vue 项目安装
手动安装

1
npm install -D stylus-loader stylus

使用vue-cli安装
在创建项目的时候选择Stylus预处理器。

2. 在.vue文件中使用

1
2
3
<style lang="stylus">
...
</style>

2、Stylus 用法
a、选择器
& 符号代表父级选择器。
Stylus selectors

b、属性变量
前置@字符在属性名前,可以访问该属性名对应的值。
Stylus variables

c、函数
函数定义与混入相同;但函数可以返回值。内置函数:颜色、文件路径、列表和哈希、单位、数学、字符串、工具等。
Stylus functions

d、条件
stylus 支持 if else判断。
Stylus if-else

e、迭代
Stylus允许你通过for/in对表达式进行迭代形式如下:

1
for <val-name> [, <key-name>] in <expression>

Stylus iteration

f、导入
Stylus支持字面@import CSS, 也支持其他Stylus样式的动态导入。
Stylus import

g、继承
Stylus支持@extends继承。
Stylus extends

来源:CSS预处理工具Stylus简介

CSS预处理工具Stylus简介” 评论

    江浙日报 评论:
    2020年6月4日 上午9:15

    你莫走,我不走,赌过咒,拉过勾。

发表评论

电子邮件地址不会被公开。 必填项已用*标注