标签: stylus

使用语义网格手写笔时注意到一个问题.

*width total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)-correction

正在处理某些事情(读取不同的数字)

  *width: 89.5833333333333% -correction;

所以,我决定进行一项实验.在运行时stylus -i我发现减法也没有运行(根本)

要验证我在我的文件中写了这个

x=10
y=20
.something
    font-size y-x

哪个过程到

.something {
  font-size: y-x;
}

我疯了吗？我用手写笔错误地解释了操作符吗？等待结果在这里我可以在github上打开一张票.我找到了另一个围绕百分比问题的人,突出了-操作员没有按预期运作.但是,这似乎与我的问题无关.

Tldr:没有单位的基本数学似乎不起作用

我需要访问 stylus 生成的 CSS 样式的抽象语法树 (AST)，而无需再次解析它（通过 css-parse）。我想知道生成的样式的 AST 是否公开。

我从数据库中获取一些数值。该值是一个长十进制值。0.45345345或者1.2423432。我想将此值四舍五入到小数点后两位，如果该值是负数，我想以红色显示该值，如果该值是正数，我想以绿色显示它。

用CSS能得到想要的结果吗？

我有反应应用程序和 webpack 我有这个代码：

stylus: {
    use: [require('nib'), require('jeet')],
    import: [
        '~nib/lib/nib/index.styl',
        '~jeet/stylus/jeet/_jeet',
        '~rupture/rupture/index.styl'
    ]
}

如何将 myvariable.styl全局导入到每个组件？我需要添加这样的东西：

stylus: {  
    import: [
        './app/styles/variables.styl'
    ]
}

在这个 webpack 停止在 96% 之后，没有别的。

vue.js在我的webpack.config.js文件中的一个项目中，我确实有这个：

///...,
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.common.js',
    'assets': path.resolve(__dirname, './src/assets'),
    'components': path.resolve(__dirname, './src/components')
  }
},
// ....

这允许我在任何情况Vue component下使用其他组件，如下所示：

import 'component/path/to/MyComponent'

不必想知道我可能会在我的组件树中的哪个位置。

我希望你有同样的能力，styles特别是与`stylus`

假设我有一个stylus file' insrc/assets/funcs.styl：

add(a)
  a + a

和一个组件说src/components/a/very/long/path/MyComponent.vue：

<template>
  <div id="my-component">
    <h1>{{ msg }}</h1>
  </div
</template>

<script>

export default {
  name: 'my-component',
  data () {
    return {
      msg: 'A title'
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../../../../../assets/funcs.styl"

h1
 margin …

我如何使用文件名gulp.src,让我们说基于这些文件名在内存文件中创建,并将流管道传递给其他文件名？

假设我想获取所有*.styl文件并将找到的每个文件路径推送到内存文件前缀@import,然后将该流传输到stylus编译器.这样的事情:

gulp.src('./src/**/*.styl',{read:false})
.pipe(function(filename){
      return "@import '"+filename+"'"
 })
 .pipe(streamify())
 .pipe(stylus())
 .pipe( gulp.dest('./bin/combined.css'));

我找不到任何好的包装,让你阅读和组合手写笔文件,所以我想也许我可以解决这个问题？

可能我最终会遇到范围,样式优先和破坏特异性规则的问题,但我需要将我的样式合并到一个文件中

我试图在global.styl文件中放置媒体查询的变量赋值.

如果它在同一个文件中,则以下内容有效:

tablet = "all and (max-width: " + 768px+ ")" //variable assignment @media tablet { text-align: left; padding: 122px; }

但是,如果我尝试将变量赋值移动到global.styl文件,它就不起作用.

在我弄清楚为什么流星和/或手写笔没有从另一个文件中读取全局变量之后,我想避免不得不回来重构,所以任何帮助都非常感谢.谢谢!

我正在.styl使用JavaScript API 编译我的Stylus 样式表:http://learnboost.github.io/stylus/docs/js.html

  var stylus = require('../')
    , str = require('fs').readFileSync(__dirname + '/test.styl', 'utf8');

  stylus(str)
    .set('filename', __dirname + '/test.styl')
    .import('mixins/vendor')
    .render(function(err, css){
    if (err) throw err;
    console.log(css);
  });

它没有提到它使用的回调是同步还是异步.虽然根据我的经验,它似乎是同步的,但我不确定.是吗？

我正在制作一个站点地图.

结果需要这样的东西:

ul.site-map li[data-level="1"] {
  margin-left: 50px;
}
ul.site-map li[data-level="2"] {
  margin-left: 100px;
}
ul.site-map li[data-level="3"] {
  margin-left: 150px;
}

此Stylus代码不起作用:

ul.site-map
    li
        for $level in (1..3)
            &[data-level="{$level}"]
                margin-left ($level * 50)px

我该如何解决这个问题？

链接到codepen

我在我的网站上使用Jade,Stylus和Node JS.它在桌面Chrome,Firefox,IE和Edge上运行良好.它在Android Chrome和浏览器上运行良好.它在iOS Chrome或Safari上无法正常运行,两者都显示类似的失败.它也不适用于桌面上的Safari.它似乎适用于iOS9但不适用于iOS8或更低版本.

这是一个屏幕截图,显示Android上的移动Chrome和iOS上的移动Chrome之间的区别.http://imgur.com/a/kjU23

即使我明确地使用-webkit-,并且nib在编译的CSS中生成-webkit-前缀,为什么它不适用于移动iOS浏览器？这是我在Github上的完整CSS.https://github.com/Connorelsea/LSMSA-SGO-Website/tree/master/public/css

用于测试和演示的实时网站位于:http://www.lsmsaSGO.com

该网站的完整Stylus代码长达几千行,但一个例子如下.我的手写笔代码:

.addMore
    text-align center

    .multButtons
        width 100%
        display -webkit-flex
        display flex
        justify-content center
        -webkit-justify-content center
        align-items center
        -webkit-align-items center
        flex-direction column
        -webkit-flex-direction column

使用Stylus和Nib编译的CSS.

  .addMore {
    text-align: center;
  }
  .addMore .multButtons {
    width: 100%;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center; …