CSS3- Stylus使用

选择器

    传统css写法

body {
  color: #fff;
}

    stylus写法

body
  color white
父级引用

    字符&指向父选择器

input
  color #A7A7A7
  &:hover
    color #000
变量

    指定表达式为变量,然后在我们的样式中贯穿使用

$font-size = 14px
body {
  font: $font-size sans-serif;
}
混入
border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

div
  border-radius(5px)
导入(@import)

    任何.css扩展的文件名将作为字面量

@import "reset.css"
继承(@extend)
.message 
  padding 10px
  border 1px solid #eee


.warning 
  @extend .message
  color #E2E21E

    等同于

message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  color: #E2E21E;
}
属性查找

    Stylus有另外一个很酷的独特功能,不需要分配值给变量就可以定义引用属性。下面是个很好的例子,元素水平垂直居中对齐(典型的方法是使用百分比margin负值
在这里插入图片描述
    我们甚至可以不使用这里的变量w和h, 而是简单地前置@字符在属性名前来访问该属性名对应的值
也就是说@+属性名可以当做变量使用
在这里插入图片描述
    变量的向上冒泡查找
在这里插入图片描述

方法(函数)

    Stylus强大之处就在于其内置的语言函数定义。其定义与混合(mixins)一致,不同的是混合是引用是直接复用代码块,而函数引用则是将返回值返回。
举个简单的例子
在这里插入图片描述
函数的默认参数
在这里插入图片描述
Stylus还可以支持多个返回值,这个很强!
在这里插入图片描述
我们还可以把函数当作参数传
在这里插入图片描述

链接:https://juejin.im/post/5bbd7a7c6fb9a05cfd27f4c6

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值