标签: stylus

我有几个.list元素都需要红色.在这些.list元素中,具有类的元素.foo需要更大的字体,而.bar需要更小的字体.

在CSS中,它将遵循:

.list {
  color: red;
}

.list.foo {
  font-size: 150%;
}

.list.bar {
  font-size: 75%;
}

在没有使用.list三次的情况下,Stylus有没有办法获得这个？我知道这有效:

.list
  color red

.list.foo
  font-size 150%

.list.bar
  font-size 75%

我想要类似下面的内容,以便更清楚地知道所有属于.list元素的东西,并为特定属性添加了某些约束(.foo,.bar).但是,以下选择后代:

.list
  color red

  .foo
    font-size 150%

  .bar
    font-size 75%

Stylus中是否有一种语法允许这种结构,即过滤内部元素 .list,并将某些属性应用于每个"分支"(.list.foo,.list.bar)？

所以我有2部手机,一部Android Nexus One和一部便宜的简单Android设备,我买了100美元零售.

我正在尝试使用@media和CSS使我的网站移动设备友好(我实际上使用的是stylus和Node.JS,所以代码可能看起来有点好笑).

所以我在我的风格中添加了以下内容

//trial 1
@media (max-width:480px)
  display none
//Trial 2
@media (resolution: 163dpi)
    display none
//Trial 3
@media (-webkit-device-pixel-ratio:0.75)
  display none
//Trial 4
@media screen and (max-width:480px)
  display none

起初我以为我的屏幕只是超高分辨率,但这些都不能帮助那些便宜的设备.我的浏览器似乎一切正常,所以我很难过.

谢谢!

我有一组像这样的样式:

&.blue
  background #189cd8
  &:hover
    background lighten(#189cd8, 10%)

我想知道是否有可能不是第二次为悬停状态设置那种颜色,但不知何故从父母那里拿出它,比如background lighten(parent(background), 10%)？我知道我可以使用变量,但在这里我只想引用父颜色,所以不想使用它们.

我有这个手写笔文件:

@import 'nib'

div
  background linear-gradient(red, blue)

我npm install nib和@imported nib希望" 能够获得nib提供的所有东西 ",但是当我

> stylus file.styl

我得到的只是

failed to locate @import file nib.styl

少了什么东西？

如何告诉nib不为我不关心的浏览器生成前缀？

这很奇怪我只是在变量设置中进行更改以使用哈希代替...你知道:

black = #000

被替换为:

colors = {
    'black': #000
     // and so on...
}

然后,我替换代码(ofcourse)中的所有变量调用,并且所有模块编译得很好,除了一个,这是跟踪:

ParseError: ../../dopamine/components/_ui.styl:26
   22|     notice(clr: -colors['light-blue'])
   23|     color -colors['white']
   24|     font-weight bold
   25|     text-shadow 1px 1px 1px rgba(#000, .2)
 > 26|   
   27|   if type == "success"
   28|     notice(clr: -colors['green'])
   29|     color -colors['white']

expected "indent", got "outdent"

    at Parser.error (/usr/local/lib/node_modules/stylus/lib/parser.js:230:11)
    at Parser.expect (/usr/local/lib/node_modules/stylus/lib/parser.js:258:12)
    at Parser.block (/usr/local/lib/node_modules/stylus/lib/parser.js:741:12)
    at Parser.selector (/usr/local/lib/node_modules/stylus/lib/parser.js:1277:24)
    at Parser.property (/usr/local/lib/node_modules/stylus/lib/parser.js:1228:47)
    at Parser.ident (/usr/local/lib/node_modules/stylus/lib/parser.js:1183:25)
    at Parser.stmt (/usr/local/lib/node_modules/stylus/lib/parser.js:685:26)
    at Parser.statement (/usr/local/lib/node_modules/stylus/lib/parser.js:593:21)
    at Parser.block (/usr/local/lib/node_modules/stylus/lib/parser.js:753:21)
    at Parser …

我有一个文件mobile.styl,通过@import以下方式收集我需要的所有样式文件:

@import '../../common/styles/colors'
@import '../../common/styles/init'


@import 'landing'
@import 'faq'
@import 'vehicle'

我有两个'landing'样式文件,一个在当前文件夹中mobile.styl,另一个是这两个第一个导入文件的位置../../common/styles/.

如果我有进口秩序像第一如上图所示,然后手写笔进口colors和init文件,这是好的,但后来它加载landing从当前文件夹而不是文件的地方mobile.styl是,但../../common/styles/让我得到错误STYL文件,该文件是为桌面版本.

现在,如果我把那两个进口到文件的末尾,那么它首先加载landing,faq,vehicle正确,那么预期从正确的路径,这两个文件.

这是一个错误还是预期的行为？

我发现我无法使用花括号和冒号语法或括号和字符串语法将Stylus哈希值设置为使用逗号.用值包装值"或'将导致这些字符作为值的一部分输出.

目前,我有:

fonts-serif = Georgia, serif
fonts-sans-serif = Helvetica, Arial, sans-serif

fonts = {
    serif: fonts-serif,
    sans-serif: fonts-sans-serif
}

使用这些值:

font-family: fonts.serif

有没有更好的办法？

目前我有一个手写笔文件导入另一个手写笔文件.第二个文件使用这样的URL函数,我希望它被内联(例如,到base 64 data-url).但是,当通过我的gulp管道时,这不起作用

lines.styl:

vertical-img = 'vertical.svg';
@import "../tree";

tree.styl

background-image: url(vertical-img)

我想得到的结果是:

background-image: url('data:image/svg+xml;utf8,<svg>[...]</svg>');

但我明白了:

background-image: url("vertical.svg")

我的gulpfile如下:

return gulp.src('src/css/*/*.styl')
    .pipe(gstylus({
        set: ['resolve url']
    }))
    .pipe(rename(function (file) {
        file.dirname = "";
        file.extname = ".css";
    }))
    .pipe(gulp.dest(DEST))

基本上似乎'res url'选项没有传递给手写笔.我知道我需要它,因为它在Stylus Docs中说:

默认情况下,Stylus不会解析导入的.styl文件中的url,所以如果你碰巧有一个带有@import"bar/bar.styl"的foo.styl,它会有url("baz.png"),那么在结果CSS中也会是url("baz.png").

但是您可以使用--resolve-url(或者只是-r)CLI选项来改变此行为,以便在生成的CSS中获取url("bar/baz.png").

当它嵌套在伪选择器中时，我试图在手写笔中获取父选择器。因此，虽然我可以&-image在第一个嵌套中进行操作，但似乎无法在&:hover

.post-news
  &-image
    display: none
  &:hover
    &-image // this isn't working
      display: block

我了解为什么它不起作用，因为&不再引用.post-news。我尝试了http://stylus-lang.com/docs/selectors.html此处列出的选择器，例如：

../-image
/-image
^[0]-image

但是到目前为止，我无法使它工作。我不确定我需要哪一个。我想念什么？