精华内容
参与话题
问答
  • stylus

    2020-03-16 15:58:26
    vue项目中用stylus stylus 语法

    目录

    vue项目中用stylus

    stylus 语法

    stylus 安装

    变量

    函数

    选择器


     

    vue项目中用stylus

    stylus 语法

    stylus 安装

    npm install stylus
    stylus -h   #可查看帮助


    变量

    $background-color = lightblue


    函数

    add (a, b = a)
        a = unit(a, px)
        b = unit(b, px)
        a + b


    选择器

    •  id 选择器   class 选择器  标签选择器 伪类选择器  伪元素选择器
    • 花括号和分号在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

    2020-06-15 15:19:13
    stylus介绍 是基于Node.js的 CSS 的预处理框架。本质上做的事情与sass/less等类似。stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环等,之后,这个文件可编译成 CSS 文件...

    stylus介绍

    是基于Node.js的 CSS 的预处理框架。本质上做的事情与sass/less等类似。stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环等,之后,这个文件可编译成 CSS 文件。

    语法文档

    stylus文档链接

    展开全文
  • Grand stylus

    2019-10-28 13:14:34
    Grand stylus
  • Deftone Stylus

    2019-10-24 20:30:00
    Deftone Stylus
  • Stylus dependency

    2020-12-02 04:36:53
    In my project i uses <code>gulp-stylus</code> and <code>stylus</code> by itself. package.json: <pre><code> "dependencies": { "gulp-stylus": "^2.0.5", "stylus": "^...
  • stylus基础教程,stylus实例教程,stylus语法总结

    万次阅读 多人点赞 2018-05-26 01:33:27
    stylus介绍 富于表现力、具有健壮性、功能丰富、动态编码 不需要写CSS的冒号、分号、大括号 和LESS、SASS功能类似,会这些的入手很快 stylus介绍 安装 使用 stylus语法 (一)选择器 (二)变量 (三)插值 (四)...

    stylus特点

    • 富于表现力、具有健壮性、功能丰富、动态编码
    • 不需要写CSS的冒号、分号、大括号
    • 和LESS、SASS功能类似,会这些的入手很快

    安装

    • 1.安装node+npm环境
    • 2.命令行全局安装stylus

    cnpm i stylus@latest -g

    • 3.可以在命令行输入 stylus -h 查看有哪些可以用的命令

    使用

    • 1.想将assets/css目录下的所有.styl文件编译成css怎么办?

    stylus -c assets/css/

    • 2.只想将assets/css/index.styl 编译成assets/css/index.css

    stylus -c assets/css/index.styl assets/css/index.css

    • 3.想将assets/css/index.css 编译成assets/css/index.styl

    stylus -C assets/css/index.css

    • 4.不想这么麻烦的用命令怎么办?使用webstorm设置如图可以自动将.styl文件转成.css文件

      这里写图片描述
    • 4-1.注意第二张图是默认配置,无需修改,直接确定。
    • 4-2.如果配置都是空的,可以安装我的配置填写。
    • 4-3.如果Program项出现红色报错!是因为node环境有问题或者没有全局安装stylus
    • 4-4.接下来只需要编写.styl文件就会自动编译出.css文件。如图
      这里写图片描述
    • 5.vue中使用stylus, 命令行中输入cnpm i stylus --save-dev
    • 5.1在 .vue文件中使用, 添加使用 scoped 属性表示样式只对当前组件有效
    <style scoped lang="stylus">
      html,body
        margin 0
        padding 0
        div
    	   color #333
    </style>
    

    stylus语法

    (一)选择器

    • 1.冒号,分号,大括号可写可不写
    • 2.后代关系用相同缩进表示
    • 3.父子关系用 >表示
    • 4.伪类元素用 & 表示其宿主元素
    • 5.属性写在前, 嵌套子元素样式写在后
    • 6.分组选择器用相同缩进即可, 如 +a +span +span
      这里写图片描述

    (二)变量

    • 1.定义变量并赋值(建议用),作为变量前缀), 如`width=3px`
    • 2.定义函数(arguments为内置所有参数, 也可自定义参数), border() $width dashed #foo
    • 3.函数参数可以写默认值,类似于es6的解构赋值, 如 padding(top=1px,right=2px)
    • 3.方法名加() 为调用函数,如 border()
    • 4.建议变量定义在最上面, 然后是函数, 然后才是代码. 最好的方式是变量和函数定义成单独的文件, 然后通过@import variable.styl 导入
    • 5.使用@height 会冒泡查找值, 如自身有此属性则获取该属性值; 否则层层向上查找该属性, 如果都没有则报错
    • 6.可以使用运算符进行计算
    • 7.z-index 1 unless @z-index 表示默认 z-index=1 除非 @z-index 存在
      这里写图片描述

    (三)插值

    • 1.实现类似 autoprefixer.css 的效果给兼容属性加前缀
    • 2.使用循环 for in 减少代码量
    • 3.使用 if-else 判断逻辑
      这里写图片描述

    (四)运算符

    []
    ! ~ + -
    is defined
    ** * / %
    + -
    ... ..
    <= >= < >
    in
    == is != is not isnt
    is a
    && and || or
    ?:
    = := ?= += -= *= /= %=
    not
    if unless
    

    (五)内置函数

    函数实例 说明
    unit(14%,px) 14px 直接用第二个参数替换第一个参数的
    abs(-5px) 5px
    ceil(2.3px) 3px 向上取整
    floor(2.6px) 2px 向下取整
    round(2.6px) 3px 四舍五入取整
    min(1,2) 1
    max(1,2) 2
    even(3) false 是否为偶数
    odd(3) true 是否为奇数
    sum(1 2 3) 6
    avg(1 2 3) 2
    join(’,’,1 2 3) 1 2 3 使用第一个参数为连接符将后面数组连接
    length(1 2 3 4) 4
    image-size(‘aa.png’) 20px 30px 获取图片宽高

    (六)尾参数…

    • 1.可以使用 args... 或者 arr... 等接受所有参数; 前面也可以单个接受参数; 但是 尾参数写法只能作为最后一个参数
    • 2.也可以使用 args[0] 或者 arguments[0] 这种下标的方式访问
    • 3.args... 会忽略 , ;如果希望不忽略请使用 arguments

    这里写图片描述

    (七)@extend继承

    • 1.使用 @extend 将公共样式抽取, 用子类继承; 在html中可以少写一个类名 ,如 class="btn btn-primary" 只需要写成 class="btn-primary"
      这里写图片描述

    相关教程:鑫空间,鑫生活

    关注下再走呗 +_+

    展开全文
  • Stylus?

    2021-01-07 09:59:42
    Everything that stylus can do rework can be extended to do? Is there any exclusive benefit to stylus? I can't think of one other than more features <em>right-now</em>? What's your personal ...
  • use stylus

    2020-12-09 09:55:11
    <div><h2>stylusの導入 <p>#24 デザイン変更時に導入予定だそうなので、微妙であればcloseしてください・・・ ざっくり見た感じですがデザインの崩れはなさそうです 変更 <ul><li>cssファイルの削除、gitignoreに...
  • stylus set

    2020-12-02 18:51:09
    m using the stylus .set, it don't work in windows? gulp.task('compress', function () { gulp.src('stylus/*.styl') .pipe(stylus({set: ['compress']})) .pipe(gulp.dest...
  • Stylus图片

    2019-11-05 18:35:10
    Stylus图片

    Stylus图片


    韦德01
    韦德02

    展开全文
  • Stylus support

    2021-01-11 05:54:59
    <div><p>Adds stylus support</p><p>该提问来源于开源项目:JeffreyWay/laravel-mix</p></div>
  • Stylus ?

    2021-01-09 00:14:04
    <div><p>Hi, maybe, add stylus support ?</p><p>该提问来源于开源项目:fians/Waves</p></div>
  • stylusstylus-loader使用

    千次阅读 2019-11-29 12:16:24
    stylus:CSS的预处理框架,即将stylus转换为css使用 stylus-loader:让webpack理解stylus 安装 npm install stylus stylus-loader --save-dev 编写使用 1)完全通过缩进控制, 可不需要大括号、分号、冒号、逗号 2)...
  • Simplify Stylus

    2021-01-03 23:34:38
    <div><p>This uses npm scripts rather than grunt to do the stylus build. Removes quite a few dependencies and scripts to maintain.</p><p>该提问来源于开源项目:bigboringsystem/bigboringsystem</p>...
  • stylus-loader A Stylus loader for webpack. Compiles Styl to CSS. Getting Started To begin, you'll need to install stylus and stylus-loader: $ npm install stylus stylus-loader --save-dev Then add the ...

空空如也

1 2 3 4 5 ... 20
收藏数 5,340
精华内容 2,136
关键字:

stylus