Stylus使用简介

最新推荐文章于 2024-08-23 07:53:11 发布
最新推荐文章于 2024-08-23 07:53:11 发布
阅读量1.3k 收藏 16
点赞数 21
分类专栏： 介绍篇 文章标签： stylus 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kang_k/article/details/138079024
版权

简介

Stylus 是一种 CSS 预处理器，类似于 Sass、Less 等，它允许开发者使用类似于 CSS 的语法来编写样式，并且提供了一些额外的功能和语法糖来增强 CSS 的编写和管理。

例子

  1. 用stylus编写
border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

div
  padding 5px
  border 1px solid #000
  border-radius 5px
  1. 编译后的css
div {
  padding: 5px;
  border: 1px solid #000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Stylus 特性

  • 冒号可有可无
  • 分号可有可无
  • 逗号可有可无
  • 括号可有可无
  • 变量
  • 插值
  • 混入
  • 算术
  • 强制类型转换
  • 动态引入
  • 条件表达式
  • 迭代
  • 嵌套选择器
  • 父级引用
  • 变量函数调用
  • 词法作用域
  • 内置函数（超过 60 个）
  • 内部语言函数
  • 压缩可选
  • 图像内联可选
  • 可执行Stylus
  • 健壮的错误报告
  • 单行和多行注释
  • CSS 字面量
  • 字符转义
  • TextMate 捆绑
  • 以及更多！

安装及使用

全局安装及使用

1. 安装

npm install stylus -g

2. 使用

stylus -w style.styl -o style.css

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

Vue项目中安装及使用

1. 安装

  • 手动安装
npm install -D stylus-loader stylus
  • 使用vue-cli安装

在创建项目的时候选择Stylus预处理器。

2. 使用

  • 在.styl文件中使用
div
  padding 5px
  border 1px solid #000
  border-radius 5px
  • 在.vue文件中使用
<style lang="stylus">
div
  padding 5px
  border 1px solid #000
  border-radius 5px
</style>

选择器

  • stylus

& 符号代表父级选择器。

textarea
input
  color #A7A7A7
  &:hover
    color #000
  • css
textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

变量

  • stylus

前置@字符在属性名前，可以访问该属性名对应的值。

$background-color = #000

#logo
  position absolute
  background-color $background-color
  top 50%
  left 50%
  width w = 150px
  height 80px
  margin-left -(w / 2)
  margin-top -(@height / 2)
  • css
#logo {
  position: absolute;
  background-color: #000;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 80px;
  margin-left: -75px;
  margin-top: -40px;
}

插值

  • stylus

Stylus支持通过使用{}字符包围表达式来插入值，该表达式会变成标识符的一部分。

// 私有前缀属性扩展
vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

button
  border-radius 6px

// 将多个选择器组合到一个变量中
mySelectors = '#foo,#bar,.baz'

{mySelectors}
  background #000
  • css
// 私有前缀属性扩展
button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

// 将多个选择器组合到一个变量中
#foo,
#bar,
.baz {
  background: #000;
}

运算符

以下是运算符优先级表，从高到低：

[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= < >
in
== is != is not isnt
is a
&& and || or
?:
= := ?= += -= *= /= %=
not
if unless
  • 下标运算符[]
 list = 1 2 3
 list[0]
 // => 1

 list[-1]
 // => 3
  • 范围运算符… …
1..5
// => 1 2 3 4 5

1...5
// => 1 2 3 4
  • 相等与关系运算符：== != >= <= > <

只有精确值才匹配。例如，0 == false和null == false均返回false。

5 == 5
// => true

10 > 5
// => true

#fff == #fff
// => true

true == false
// => false

wahoo == yay
// => false

(foo bar) == (foo bar)
// => true

(1 2 3) == (1 2 3)
// => true

(1 2 3) == (1 1 3)
// => false

==    is
!=    is not
!=    isnt

…

混入

  • stylus
stripe(even = #fff, odd = #000)
 tr
   background-color odd
   &.even
   &:nth-child(even)
       background-color even

// 默认值
.table-default
  stripe()
  td
    padding 5px 10px

// 传值
.table
  stripe(#000, #fff)
  td
    padding 5px 10px
  • css
// 默认值
.table-default tr {
  background-color: #000;
}
.table-default tr.even,
.table-default tr:nth-child(even) {
  background-color: #fff;
}
.table-default td {
  padding: 5px 10px;
}
// 传值
.table tr {
  background-color: #fff;
}
.table tr.even,
.table tr:nth-child(even) {
  background-color: #000;
}
.table td {
  padding: 5px 10px;
}

函数

函数定义与混入相同；但函数可以返回值。

arguments是所有函数体都有的局部变量，包含传递的所有参数。

  • stylus
add(a, b = a)
  a + b

sizes()
 25px 20px

body 
  padding add(10px, 5px)
  div
    padding add(10px)
    margin sizes()
  • css
body {
  padding: 15px;
}
body div {
  padding: 20px;
  margin: 25px 20px;
}

关键字参数

Stylus支持关键字参数，或"kwargs". 允许你根据相关参数名引用参数。

下面这些例子功能上都是一样的。但是，我们可以在列表中的任何地方放置关键字参数。其余不键入参数将适用于尚未得到满足的参数。

body {
  color: rgba(255, 200, 100, 0.5);
  color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5);
  color: rgba(alpha: 0.5, blue: 100, red: 255, 200);
  color: rgba(alpha: 0.5, blue: 100, 255, 200);
}
// 等同于
body {
   color: rgba(255,200,100,0.5);
   color: rgba(255,200,100,0.5);
   color: rgba(255,200,100,0.5);
   color: rgba(255,200,100,0.5);
}

查看函数或混合书写中接受的参数，可以使用p()方法。

p(rgba)
// => inspect: rgba(red, green, blue, alpha)

内置函数

// 绝对值
abs(-5px)
// => 5px
abs(5px)
// => 5px

// 向上取整
ceil(5.6px)
// => 6px

// 向下取整
floor(5.6px)
// => 5px

…

其余参数

Stylus支持name…形式的其余参数。

  • stylus
box-shadow(args...)
  -webkit-box-shadow args
  -moz-box-shadow args
  box-shadow args

#login
  box-shadow #fff 1px 1px, #000 2px 2px
  • css
#login {
  -webkit-box-shadow: #fff 1px 1px, #000 2px 2px;
  -moz-box-shadow: #fff 1px 1px, #000 2px 2px;
  box-shadow: #fff 1px 1px, #000 2px 2px;
}

注释

Stylus支持三种注释，单行注释，多行注释，以及多行缓冲注释。

// 单行注释
body
  padding 5px // 5px的padding

/*
 * 多行注释
 */
add(a, b)
  a + b

/*!
 * 多行缓冲注释以/*!开头，Stylus压缩的时候这段无视直接输出。
 */
add(a, b)
  a + b

条件

  • stylus
box(x, y, margin-only = false)
  if margin-only
    margin y x
  else
    padding y x

body
  box(5px, 10px, true)
  • css
body {
  margin: 10px 5px;
}

迭代

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

for <val-name> [, <key-name>] in <expression>
  • stylus
table
  for row in 1 2 3 4 5
    tr:nth-child({row})
      height: 10px * row
  • css
table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}

导入

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

  • stylus
@import "reset.css"

// bar.styl
.bar
  width: 10px;

// @import不仅可以在根级别使用，而且可以嵌套在其他选择器或规则中。
.foo
  @import 'bar.styl'

@media screen and (min-width: 640px)
  @import 'bar.styl'
  • css
.foo .bar {
  width: 10px;
}
@media screen and (min-width: 640px) {
  .bar {
    width: 10px;
  }
}

媒体

  • stylus
.foo
  for i in 1..3
    @media (min-width: 2**(i+7)px)
      width: 100px*i
  • css
@media (min-width: 256px) {
  .foo {
    width: 100px;
  }
}
@media (min-width: 512px) {
  .foo {
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .foo {
    width: 300px;
  }
}

关键帧

  • stylus
$keyframe-name = pulse
@keyframes {$keyframe-name}
  for i in 0..10
    {10% * i}
      opacity (i/10)
  • css
@keyframes pulse {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

继承

  • stylus
form
 input[type=text]
   padding 5px
   border 1px solid #000
   color #fff

textarea
 @extends form input[type=text]
 padding 10px
  • css
form input[type=text],
textarea {
  padding: 5px;
  border: 1px solid #000;
  color: #fff;
}
textarea {
  padding: 10px;
}

CSS字面量

如果遇到任何Stylus不能满足的特定需求，可以使用@css使其作为CSS字面量解决。

  • stylus
@css {
  body {
    font: 16px;
  }
}
  • css
body {
  font: 16px;
}

字符转义

Stylus可以字符转义。可以让字符变成标识符，或是渲染成字面量。

  • stylus
body
  padding 1 \+ 2
  font-size 16px/1.6
  font-size (16px/1.6) // 注意Stylus中/当作为属性使用的时候需要用括号括起来
  • css
body {
  padding: 1 + 2;
  font-size: 16px/1.6;
  font-size: 10px;
}
kang_k
关注
专栏目录
stylus的使用
weixin_46353442的博客
03-20 435
介绍 stylus，是 CSS 的预处理框架。 stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套操作之后，这个文件可编译成 CSS 文件 安装 安装 stylus（确保之前已经安装 nodejs ） 使用命令行工具 $ npm install stylus 在HBuilder中使用sty...
stylus 设置全局样式_Stylus插件 - 网页样式管理器
weixin_39647471的博客
12-20 893
Stylus插件背景介绍Stylus 和 Stylish 都是一个调整网页外观的用户样式管理器。他们之间有什么关系呢？在知名扩展 Stylish 停止开发后(后续接手者并非原作者)，我们在Stylish的分支 1.5.2 版本基础上开发了 Stylus。Stylus 重写并优化了大部分的代码以提高性能。相较于 Stylish 只是它新团队的私有软件，Stylus 为人民所创，为人民服务。Chrom...
Stylus基本使用
CcoooH的博客
09-13 297
安装 npm install stylus -g 编译
stylus样式插件.zip
09-05
适用于chrome内核的浏览器，里面包含样式。适用于chrome内核的浏览器，里面包含样式。适用于chrome内核的浏览器，里面包含样式。适用于chrome内核的浏览器，里面包含样式。适用于chrome内核的浏览器，里面包含样式。适用于chrome内核的浏览器，里面包含样式。适用于chrome内核的浏览器，里面包含样式。适用于chrome内核的浏览器，里面包含样式。
Nib - Stylus 的扩展库教程
最新发布
gitblog_00648的博客
08-23 320
Nib - Stylus 的扩展库教程 nibStylus mixins, utilities, components, and gradient image generation项目地址:https://gitcode.com/gh_mirrors/ni/nib 项目介绍 Nib 是一个为 Stylus 设计的强大扩展库，它提供了众多优雅且实用的混入（mixins）以及高级 CSS 特性支持，...
stylus入门使用方法
求知若渴，虚心若愚，努力前行，未来可期。
05-22 1万+
stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS
stylus的使用和基础知识
热门推荐
诗水人间
06-08 10万+
安装stylus npm install stylus stylus-loader -s stylus是主流的css预编译器 Less Sass Stylus 使用方法 <style lang="stylus" rel="stylessheet/stylus"> </style> 语法 中文文档 语法结构： 完全通过缩进控制，不需要 大括号和 分号，冒号可选。 .tab display:flex height 40px line-height 40px .tab-i
stylus的用法
weixin_34413357的博客
05-07 570
参考链接：预处器的对比——Sass、LESS和Stylus http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html 因为在vue.js项目（高仿饿了么app）中会用到stylus，所以本文重点关注stylus的用法 1.语法 Stylus的语法花样多一些，它使用“.styl”的扩展名，S...
Stylus 谷歌（Chrome）浏览器插件
03-03
【插件简介】 Stylus 是一个调整网页外观的用户样式管理器。它可让您轻松地为许多热门网站网站安装主题和皮肤。请注意我们的扩展名称是 Styl“us”而不是 Styl“ish”，在知名扩展 Stylish 停止开发后（后续接手者...
Stylus Beta | 谷歌（Chrome）浏览器插件
03-03
【插件简介】 Stylus 是一个调整网页外观的用户样式管理器。它可让您轻松地为许多热门网站网站安装主题和皮肤。 【插件网站】 https://add0n.com/stylus.html 【插件更新】 2021-03-01 09:52:25 【插件...
简约霸气个性化百度界面定制代码---stylus【私人珍藏】
11-15
#### Stylus 插件简介 Stylus 是一款强大的浏览器扩展程序，允许用户为任何网站自定义样式。通过编写 CSS 样式表，用户可以修改网页的外观、布局和颜色等，从而达到个性化的浏览体验。 #### 使用场景 在本案例中，...
secondhand-deal:一个基于vue.js + ts + stylus + koa2 + sequelize ORM + mysql的校园二手交易系统，还有typescript还在学习迁移:banana:
05-30
项目简介 本项目将买家端和卖家端合并为一个整体，分为五个主体功能——首页、推荐、发布、购物车及我的。 首页包括分类导航、搜索、物品列表。推荐包含推荐悬浮按钮、物品列表。发布包含一个表单，用户需要输入名称...
stylus 的使用
twenj1616的博客
01-30 172
安装 npm install stylus --save npm install stylus-loader --save 使用 Header.vue <style lang="stylus"> @import "~@/assets/styles/varibles.styl" .header background: $bgColor <style> varibles.styl $bgColor=#00bcd4 注意事项 stylus 版本过高会导致报错。 sty
Stylus的使用
weixin_33859231的博客
09-25 148
vue-cli项目安装使用stylus步骤:1. npm install stylus -D命令，在项目内安装stylus。（注意：命令结尾 -D 即是 --save-dev 的简写形式） 2.需要安装loader，通过 npm install stylus-loader css-loader style-loader --save-dev 命令。 3.找到 webpack.base.con...
CSS 预处理器：stylus运用详解
日常笔记/总结/系列知识梳理
05-08 1291
Stylus 是一个强大的 CSS 预处理器，它允许你使用更简洁、更易于维护和扩展的语法来编写 CSS。Stylus 的语法非常类似于 CSS，但它添加了许多有用的特性，如变量、嵌套、混合（mixins）、继承、操作符和函数等。下面我将为你详细介绍 Stylus 以及如何在项目中引入它。Stylus 是一个功能强大的 CSS 预处理器，它可以帮助你更高效地编写 CSS 代码。
Stylus基础入门使用方法总结
chenwt_gentle的博客
04-16 485
Stylus 是一个强大的 CSS 预处理器，它支持CSS和JavaScript的所有功能。它使用类似 JavaScript 的语法来编写样式，然后编译成普通的 CSS 代码。Stylus 允许开发者们以更简洁和强大的方式编写样式表，它具有变量、混合（mixins）、操作和函数等功能。
Stylus入门使用方法
weixin_39108752的博客
04-20 609
Stylus是由TJ Holowaychuk开发的一种CSS预处理器，它允许使用更动态、更富表达力的方式来编写CSS。Stylus可以帮助开发者编写更加简洁和强大的CSS代码，支持变量、混合、函数等功能，极大地增强了CSS的功能性和复用性。
stylus
josehan的博客
05-09 460
stylus格式  指将css中{} ；去掉即可
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值