• Stylus基本使用


    介绍

    stylus,是 CSS 的预处理框架。

    CSS 预处理,预先处理 CSS。那 stylus 怎样预先处理?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件,执行这一套操作之后,这个文件可编译成 CSS 文件。

    安装

    安装 Stylus 很简单,前提是你已经安装了 Node.js。 到 Node.js 官网下载适合你的操作系统的安装包安装即可。还要检查一下 npm 是否也一并安装了。

    然后,在命令行中执行如下指令:

    $ npm install stylus -g

    安装之后,运行 stylus -h 可查看帮助。
    运行 stylus example.styl 可将 demo.styl 文件编译成 example.css 文件。

    基本使用

    一段简单的 stylus 代码:

    $background-color = lightblue
    add (a, b = a)
        a = unit(a, px)
        b = unit(b, px)
        a + b
    
    .list-item
    .text-box
        span
            background-color: $background-color
            margin: add(10)
            padding: add(10, 5)
        &:hover
            background-color: powderblue

    编译后生成的 CSS 代码:

    .list-item span,
    .text-box span {
      background-color: #add8e6;
      margin: 20px;
      padding: 15px
    }
    .list-item:hover,
    .text-box:hover {
      background-color: #b0e0e6;
    }

    由此我们看到了 stylus 代码以及由它编译而成的 CSS 代码

    变量

    $background-color = lightblue

    上面的代码声明了变量 $background-color,并为其赋值 lightblue
    声明之后,就可以使用这个变量了:

    span
        background-color: $background-color

    编译成 CSS 就是:

    span{
        background-color: lightblue;
    }

    函数

    add (a, b = a)
        a = unit(a, px)
        b = unit(b, px)
        a + b
    代码声明了函数 add, add 接受两个参数 ab,其中 b 的默认值是 a
    add 中调用了 stylus 的内置函数 unit,此处,unit 函数为 ab赋予了单位 px
    最后将 ab 相加,并返回结果,没有 return,但是返回了结果。
    return 是可以省略的。
    函数调用:
    span
        margin: add(10)
        padding: add(10, 5)

    编译成 CSS 就是:

    span {
        margin: 20px;
        padding: 15px;
    }

    选择器

    .list-item
    .text-box
        span
            background-color: $background-color
            margin: add(10)
            padding: add(10, 5)
        &:hover
            background-color: powderblue

    这一段没有了 CSS 的花括号,没有了 CSS 的分号,却多了一些奇奇怪怪的缩进,还有那个 & 是什么?还 &:hover ???

    符号,这里提到的花括号和分号在stylus中是可以省略的,不仅如此,冒号也是可以省略的,color: powderblue 你可以写成 color powderblue

    缩进,先提出两个有缩进关系的选择器,上面代码片段第二行的 .text-box 和第三行的 span,其实很容易理解,写到 CSS 里面是这样的:

    .text-box span{ ... }

    即 span 是 .text-box 的子选择器,stylus 中以缩进表示这种关系,更加清晰明了,好看。

    还有 &,这是个新鲜东西。它是父级的引用,还是来看代码。

    stylus这样写:

    .list-item
    .text-box
        &:hover
            background-color: powderblue

    编译成 CSS 是这样:

    .list-item:hover,
    .text-box:hover {
      background-color: #b0e0e6;
    }
    相信代码中已经能很明确地体现出 & 父级引用的角色了。
    同时,我们也不难看出,.list-item.text-box 这两个同一级的选择器在 stylus 中是可以换行写的,只要保证缩进相同,它们就属于同一级的选择器。当然,沿用 CSS 的方式,将同一级的选择器用逗号分隔开在 stylus 中也是可以的。
     

    来源:https://www.jianshu.com/p/5fb15984f22d
    有问题可直接留言,望各位与我都可以成为技术大牛。
  • 相关阅读:
    求最大公约数和最小公倍数,从文件输入数据,将结果输出到另外一个文件
    在CentOS系统中安装quota来管理磁盘配额
    The implementation details of the built thermal setup
    Task set generation
    利用FPGA加速实现高性能计算
    跨域名上传图片
    这几天基本是混过来的
    jQuery插件之Cookie
    jQuery on()方法
    CActiveForm提示中文化
  • 原文地址:https://www.cnblogs.com/xhxdd/p/12355887.html
Copyright © 2020-2023  润新知