美文网首页
Stylus基本使用

Stylus基本使用

作者: 木A木 | 来源:发表于2017-12-29 11:28 被阅读0次

Stylus [ˈstaɪləs] CSS预处理语言

  1. 安装到全局环境
$ npm install stylus -g
  1. 基本使用
stylus -w style.styl -o style.css

  1. Example
    border-radius()
        -webkit-border-radius: arguments
        -moz-border-radius: arguments
        border-radius: arguments
 
    body a
        font: 12px/1.4 "Lucida Grande", Arial, sans-serif
        background: black
        color: #ccc
 
    form input
        padding: 5px
        border: 1px solid
        border-radius: 5px

compiles to:

     body a {
        font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
        background: #000;
        color: #ccc;
     }
    form input {
        padding: 5px;
        border: 1px solid;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

学习地址:Stylus中文版参考文档

相关文章

  • Stylus基本使用

    介绍 在学习一个 Vue.js 项目的过程中,注意到源码中样式的部分并没有用熟悉的 .css 样式文件,而是发现了...

  • Stylus基本使用

    Stylus [ˈstaɪləs] CSS预处理语言 安装到全局环境 基本使用 Example compiles ...

  • 如何在wepy中使用stylus

    如何在wepy中使用stylus 第一步,安装wepy-compiler-stylus(以及stylus, sty...

  • sass、less、stylus的区别

    书写 stylus:使用缩进和突出来代替 { } 空格间隔替代:和; 声明变量: stylus: color-ff...

  • vue项目中使用stylus

    npm install stylus stylus-loader 可以直接在项目中使用,文件的后缀是styl 引入...

  • 移动端一像素方案

    以vue中使用stylus为例 mixin.stylus 同样的,在需要写1像素边框的地方引入这段代码,使用的时候...

  • tips: 同时使用stylus + tailwind

    tailwind 框架与 stylus 工具同时使用时,@apply 函数不生效,原因是 stylus 不支持。可...

  • vue-cli中使用stylus

    使用方法:1.在cmd命令行中输入npm install stylus-loader stylus --save2...

  • vue中使用stylus

    npm i stylus-loader stylus --save 安装完之后在vue2.0中不需要配置就可使用,...

  • Vue项目 --- stylus安装

    stylus安装 stylus使用 一、语法不再需要括号,相比之前语法简洁了很多。 二、可以创建.styl扩展名的...

网友评论

      本文标题:Stylus基本使用

      本文链接:https://www.haomeiwen.com/subject/lqligxtx.html