stylus总结

最新推荐文章于 2023-07-06 23:05:00 发布

weixin_43900440

最新推荐文章于 2023-07-06 23:05:00 发布

阅读量225

点赞数

分类专栏： stylus 文章标签： css

本文链接：https://blog.csdn.net/weixin_43900440/article/details/119885623

版权

stylus 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

stylus总结

前言:
Stylus相对于Sass/Less,写法更接近于javascript;
此文章为需要读者对stylus有了解;
简单介绍了stylus的特殊规则,详细学习请前往stylus官网[https://www.stylus-lang.cn/]

1.简写

// stylus可以省略括号/冒号/分号/逗号
textarea
input
  border 1px solid #eee
编译:
textarea,
input {
  border: 1px solid #eee;
}

2.选择器

/ 根目录
~/ 第一级
& 上一级
^[n] 第n级
../ 向上级

.a
  ~/ .b 等于 & .b 等于 ^[0] .b 等于 ../ .b
    font-weight 20px
编译:
.a .b {
  font-weight: 20px;
}

3.变量

声明: [$]font = 14px 等于 define(font,'14px') // $可有可无
  is defined

.style
  width 100px
  height @width // 使用属性名为变量
编译:
.style {
  width: 100px;
  height: 100px;
}

4.插值

margin(prop) // 类似于ES6的字符串模板 | 生成不带引号的字符串
  margin-{prop} 10px

margin('top')
编辑:
margin-top: 10px;

5.变量类型

判定类型: typeof()/type-of()/type()/is a
颜色('rgba')
数值('unit')
字符串('string'[带引号]/'ident'[不带引号]) 
  unquote()[去除引号]/conert()[类型转换]
数组('list') 
  $array = 1 2 3 等于 $array = 1,2,3 // 引号可以省略
  range(1,3) 等于 1 2 3
  1..3 等于 1 2 3
  1...3 等于 1 2
  $array[-1] 可以使用-1获取末位值
  typeof('11' 1 2 3) == 'string' // 返回首值的类型
  length($array) 等于 3 // length()返回数组长度
对象('object')
  length()可用于对象
函数('function')
  name(args...[剩余的参数]) // arguments[函数参数]
  [return] value // return可有可无
  匿名函数: '@(){ }'
布尔('boolean')
null('null')

6.条件/循环

padding in padding margin 等于 true // in 用于判断元素是否在数组/对象中
if padding is a 'unit'
  margin 10px 
等于
margin 10px if padding is a 'unit' // if可以后置 | 只适用于单语句
margin 10px unless !(padding is a 'unit') // unless与if条件相反

循环: 与if一样可以后置
  sum = 0;
  sum+=n if n % 2 == 0 for n in 1..10 
  return sum // sum 等于 30

7.继承/嵌套

.a // 会编译到css文件
  padding 10px
.b
  @extend .a
  color #E2E21E
编译:
.b {
  padding: 10px;
  color: #E2E21E;
}

$a // 不会编译到css文件
  padding 10px
.b
  @extend $a
  color #E2E21E

嵌套:
.a 
  .b 
    padding 20px
编译:
.a .b {
  padding: 20px;
}