标签: stylus

理想情况下,我想设置一个文件"colors.styl",我可以在其中定义网站上使用的所有颜色,如下所示:

// --------------- GENERAL VARIABLE DEFINITIONS
$beige        = #F2F2F2
$darkGrey     = #282828
$errorRed     = #B94A48

当我尝试在其他文件中访问这些变量时,我只返回变量名而不是已解析的值:

body {
  background-color: $beige;

我正在按顺序编译文件,所以colors.styl先于其余部分.变量是否会在Stylus中的文件中丢失范围？

我常常遇到同样的问题,

如果我需要添加一个包装器(另一个元素来包装元素),我必须手动选择子选项卡等...

我想知道是否有任何东西用于崇高的文本3,以识别你是缩进父母,因此所有的孩子应该自动缩进？

编辑 我觉得手写笔,较少和其他基于标签的层次结构语言可能会遭受相同的症状.

干杯.

Repository Stylint表示linter适用于:

• 原子
• 崇高文本
• WebStorm/PhpStorm/IntelliJ IDEA
• Visual Studio代码

在Atom中它完美运行.也来自CLI.

从存储库到vscode扩展的链接:Stylint.从市场链接到github存储库 - 404.扩展不提供任何描述或命令(很可能它被删除或损坏).

我如何lint手写笔？

这里的新人.我一直在寻找使用Stylus(编译CSS)客户端的好解决方案.

现在,我知道有关不使用已编译的CSS客户端的提示,因为:

1. 如果JS没有使用它就会中断.
2. 在实时客户端环境中编译需要额外的时间.
3. 它需要在每个客户端重新编译,这不是绿色的.

但是,我的环境是Chrome和Opera的扩展.它在JS环境中工作,并且脱机工作,因此1,2或3都不适用.我真正想要的是一种更有效地编写CSS的方法,减少头痛,更多变量,嵌套和混合.

我尝试了Less,这是三人组Less,Sass和Stylus中唯一一个目前在客户方面工作得很好的人.那么,有没有人知道Stylus的好解决方案？

考虑使用CSS类aa,bb和cc的 HTML :

<div class='aa'>
<div class='bb'>
<div class='cc'>
</div>
</div>
</div>

我可以这样选择class=cc标签:.aa > .bb > .cc.但是,在我的情况下,有时.bb标签不存在,也就是说,HTML看起来像这样:

<div class='aa'>
<div class='cc'>
</div>
</div>

因此,要选择所有.cc接近a .aa,我需要指定两个CSS路径:

.aa > .bb > .cc,
.aa > .cc { .... }

这有效,但是,有没有更短的方法？与此类似的东西:

.aa > (.bb >)? .cc { ... }   /* ? means "optional" */

使用CSS或类似Stylus或LESS的东西？

动机:在现实世界中,"aa","bb"和"cc"的名称有点长,而且"aa"和"cc"之前和之后都有更多的东西,不需要复制就更好了那东西.

请注意:在我的情况下,这不起作用:.aa .cc因为.cc在页面的其他位置匹配太多s.该.cc的需要是可以立即低于.aa或低于.aa > .bb.

我在Stylus中有一些HEX颜色值,类似于以下内容

$my-background ?= #123456
$my-foreground ?= #ABCDEF

并且想在rgba值中使用它们来获得不透明度,这样

.my-class
    background rgba($my-background, .5)
    foreground rgba($my-foreground, .5)

或者将另一种语法编译成CSS

.my-class {
    background rgba(18, 52, 86, .5);
    foreground rgba(171, 205, 239, .5);
}

有没有一种快速简便的方法在使用Stylus或Stylus插件(如nib)的rgba中使用HEX颜色值？

手写笔如何处理变量范围？

-

1-所有变量都是全局的吗？

$foo = red // is $foo global?

2-与commonJS模块类似,是否有exports/ require等效？

$foo = @import 'foo'

body { color: $foo }

3-如果在CSS块中声明的变量,可能使用mixins:

$foo = green

bar()
  $foo = yellow // is it the same $foo ?
  $baz = blue.  // local or implied global?

ul {

  background: $foo // green or yellow? red?

  $foo = red

  li {

    $foo = pink 

  }

  color: $foo // pink?

  bar() // what about …

编译时我不断收到这个奇怪的错误信息.很难调试.(顺便说一句:示例中的不透明度是混合)

但我坚持下去

> 59| .red { opacity 0.4 }

expected "indent", got "eos"

我试过了

.red { opacity(0.4) }
.red { opacity(0.4); }

没别的了.

我很难用手写笔来处理webpack 2.我正在尝试将手写笔加载器模块添加到我的webpack.config中,但我不知道如何做到这一点.我不是,我没有阅读文档:

https://github.com/shama/stylus-loader

乍一看这个示例代码看起来像一块蛋糕(请记住,我在这里谈论Webpack 2,而不是Webpack 1):

module: {
  rules: [
    {
      test: /\.styl$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'stylus-loader',
          options: {
            use: [stylus_plugin()],
          },
        },
      ],
    }
  ],
},

这里的问题是函数stylus_plugin,根据文档,需要通过以下方式来满足:

var stylus_plugin = require('stylus_plugin');

但是在npm repo中没有像stylus_plugin这样的npm模块.

所以,也许有人可以帮助我在webpack上运行手写笔,也许有人甚至可以提供配置示例.

附录,2017年2月9日.这对我有用(使用手写笔):

module: {
    rules: [{
        test: /\.styl$/i,
        use: [
            'style-loader',
            'css-loader',
            'stylus-loader'
        ]
    }]
}

为了明确起见:每个单独的加载器代表一个单独的插件.所以你必须通过yarn/npm在这三个插件上添加每个插件.

例如:

<script>
    export default {
        data() {
            return{
                varinjs: 1,
            }
        }
    }
</script>
<style lang="stylus">
    varincss = varinjs

    body
      if varincss  == 0
        background-color red
      else varincss == 1
        background-color blue
</style>

有没有办法在css中访问javascript变量？可以使用sass或更少,但我更喜欢手写笔.