Stylus 常用语法

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

传统 CSS 语法不够强大：无法嵌套、没有变量、没有合理的样式复用机制，造成后期很不好维护，所以就出现 CSS 预处理器。

本文只谈 Stylus~

Stylus Online Compiler

选择器（Selectors）

/* & 表示对父选择器的引用 */
.father
    font-size: 1.2em

    &:hover
        background: red
/* 为多个选择器同时定义属性 */
textarea
input
    border 1px solid #eee

变量（Variables）

  • 变量以一个美元符号开头
$error-color = #F33            /* 全局变量 */

.error
    $normal-size = 1.2em       /* 局部变量 */
    font-size: $normal-size
    color: $error-color

.big-error
    font-size: $normal-size    /* 错误用法，使用了别人的局部变量 */
    color: $error-color
  • 使用 @propertyName 进行属性查找
/* 属性查找 Property Lookup */
#logo
    position: absolute
    top: 50%
    left: 50%
    width: 150px
    height: 80px
    margin-left: -(@width / 2)
    margin-top: -(@height / 2)

插值（Interpolation）

Stylus 支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{'border' + '-radius'} 等同于 -webkit-border-radius

/* 选择器插值 */
table
    for row in 1 2 3 4 5
        tr:nth-child({row})
            height: 10px * row

运算符（Operators）

  • 使用除法运算时，需要给表达式加个括号，否则不能正常计算
/* 范围 .. */
1..5        // => 1 2 3 4 5

/* 加减乘除、取余运算 */
15px + 5px    // 20px
15px - 5px    // 10px
15px * 5px    // 75px
(15px / 5px)  // 3px
15px % 5px    // 0px

/* 相等不相等运算符 */
#FFF == #666  // false
#FFF != #666  // true

混入（Mixins）

  • 混入和函数定义方法一致，但是应用却大相径庭。

例如，下面有定义的 border-radius(n)方法，其却作为一个 mixin（如，作为状态调用，而非表达式）调用。

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

form
  border-radius(5px)

函数（Functions）

内置函数（Build-in Functions）

  • red(color)： 返回指定颜色中红色占的比重
  • green(color)： 返回指定颜色中绿色占的比重
  • blue(color)： 返回指定颜色中蓝色占的比重
  • alpha(color) 返回指定颜色中透明度占的比重
red(rgba(200, 100, 0, 0.5)); // 200
green(rgba(200, 100, 0, 0.5)); // 100
blue(rgba(200, 100, 0, 0.5)); // 0
alpha(rgba(200, 100, 0, 0.5)); // 0.5
  • dark(color)： 返回一个布尔值，判断指定颜色是否是暗色
  • light(color)： 返回一个布尔值，判断指定颜色是否是亮色
dark(#666)   // true
light(#666)  // false
  • unit(unit[,type])： 返回 unit 类型的字符串或空字符串，或者赋予 type 值而无需单位转换
unit(15deg)      // 'deg'
unit(15deg, px)  // 15px

条件（Conditionals）

  • 三个：if、else if、else
overload-padding = true

if overload-padding
  padding(y, x)
    margin y x

body
  padding 5px 10px

迭代（Iteration）

  • 使用 for/in 进行迭代
table
    for row in 1 2 3 4 5
        tr:nth-child({row})
            height: 10px * row

@import

  • 使用 @import 可导入相应的 CSS 文件或 Stylus 文件（*.styl）
/* 正常引入 */

@import './header.styl'

@import './main/*'

@import './footer.styl'
/* 在块儿内引入 */

.container
  @import 'pc.styl'

@media screen and (min-width: 640px)
  @import 'mobile.styl'

/* 上面代码将被渲染为 */

.container .warp{
  width: 50px;
}

@media screen and (min-width: 640px) {
  .warp {
    width: 20px;
  }
}

@media

/* 正常情况下的 @media */

@media screen and (min-width: 600px) {
    body
        width: 400px
}
/* 嵌套的 @media */

.widget
  padding 10px

  @media screen and (min-width: 600px)
    padding 20px

/* 上面代码将被渲染为 */
.widget {
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .widget {
    padding: 20px;
  }
}

@font-face

用法和普通 CSS 用法基本相同。

@font-face
    font-family userFont
    font-style normal
    src url(fonts/user-font.ttf)

@keyframes

$keyframe-name = animateName
@keyframes {$keyframe-name}
  for i in 0..5
    {20% * i}
      opacity (i/10)

/* 上面代码将被渲染如下 */
@keyframes animateName {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0.1;
    }
    40% {
        opacity: 0.2;
    }
    60% {
        opacity: 0.3;
    }
    80% {
        opacity: 0.4;
    }
    100% {
        opacity: 0.5;
    }
}

继承 @extend

.father
    font-size: 20px
    color: #000
.son
    @extend .father
    color: #666

/* 以上代码将被编译为 */
.father,
.son {
    font-size: 20px;
    color: #000;
}
.son {
    color: #666;
}

参考资料