标签: stylus

我想用手写笔改变文本串中只有一个单词的颜色即

#copy
   h1 Our new site will be ready soon..

手写笔代码是

  h1
   font-weight bold
   color white

我只是想将h1短语"我们的"中的第一个字母的颜色改为黄色,我怎么能在手写笔中实现这一点,谢谢:)

我正在使用stylus 0.37.0运行express.js 3.4.0我试图让express和stylus一起工作所以当我请求一个css文件实际上是一个其他地方的手写笔文件时,表达触发器手写笔来编译它然后服务它(相当标准我猜,因为我看到它在许多教程中工作).

我的文件结构:

myApp
  resources
    stylus
      style.styl
  public
    css

我的app.js(只有相关的行):

app.use("/static", express.static(__dirname + "/public"));
app.use(stylus.middleware({
    src: __dirname + "/resources/stylus",
    dest: __dirname + "/public/css",
    debug: true,
    force: true,
}));

根据我的阅读,请求/static/css/style.css应该导致表达生成此文件resources/stylus/style.styl,然后提供它.这不起作用.有效的是,如果我请求文件正确生成/style.css文件/public/css/style.css,但我得到了404.之后,我可以通过/static/css/style.css身体现在请求它.

有人可以建议任何解决这个问题的步骤吗？我错过了什么吗？

我正在练习使用Bootstrap使我的表在我正在创建的搜索列表上响应,问题是我想要制作的两个列尽可能小而不是相同大小.在下图中,您可以看到日期和链接占用了他们需要的更多空间.我该怎么办呢？提前致谢!

HTML(剪辑):

<div class="table-responsive">
    <table class="table table-striped table-hover table-bordered table-condensed">
        <tbody>
            <tr class="active" ng-repeat="s in results">
                <!-- <td class="hidden-xs hidden-sm">{{$index}}</td> -->
                <td class="hidden-xs hidden-sm">{{s.provider}}</td>
                <td>{{s.title}}</td>
                <td>{{s.date}}</td>
                <td class="hidden-xs hidden-sm">{{s.cat}}</td>
                <td><a href="{{s.link}}">D/L</a></td>
            </tr>
        </tbody>
    </table>
</div>

手写笔:

table
    table-layout fixed
    word-wrap break-word

如何在没有SVG被Base64编码的情况下使用Stylus预处理器在CSS中嵌入SVG数据uri ？

像这样:

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

而不是这个:

background: url('data:image/svg+xml;base64,PD94bWwg[...]');

Normaly我曾经习惯stylus.url()嵌入图像,但它也会使用Base64编码SVG.

我想使用数据uris而不是外部文件来保存文件请求.我已经意识到Base64编码SVG实际上增加了字节而不是减小大小.

我找不到按原样嵌入SVG的方法.

我有一个Stylus文件,看起来像

@import init
@import typography
@import colors
@import 'components/*'

@import '3rdparty-stylesheet.css'

最后一行是我从第三方插件获得的CSS文件,我不想在编译成CSS时保持原样,但是要注入此文件的所有内容.我用Gulp.

我怎样才能实现它？

当我运行webpack uglify插件时,我收到了来自stylus loader/css-loader的大量警告.我该如何解决？webpack成功捆绑了它.

   Condition always true [./~/style-loader!./~/css-loader!./~/stylus-loader!./app/<filename>.styl:10,0]

我正在构建一个小节点应用程序,并使用Express with Jade和Stylus来呈现一些基本的HTMl页面.

我很好奇是否有办法让我将一些变量传递给从Node生成的.styl文件？我很清楚我可以在.styl文件中定义变量,但我需要更加动态.具体来说,我正在寻找一种简单的方法来存储数据库中的一些颜色,让节点获取这些值,然后将它们插入到.styl文件中,以便在页面呈现时传递这些变量.看起来应该这样做但是我缺乏细节.任何帮助表示赞赏.谢谢!

我有一个大型 Stylus 项目，需要从 vanilla Gulp 移植到 Laravel Mix 中。

其中app.styl包括另一个来自node_modules 的framework.styl内容@import。我无法在 Laravel Mix 中使用use和import标志（或者至少我不知道如何使用），因为

1. 对于某些依赖项，我只需要导入 node_modules 文件夹中的特定文件，而不是整个文件
2. 对于一个依赖项，我需要在导入 Stylus之前在其内部设置一长串变量。

主样式

@import "includes/framework.styl"

/* Other stuff */

包括/framework.styl

$variable = 1.5
$other = white
/* bunch more */

@import "jeet"
@import "foo/src/specific.styl"

ks-no-conflict = true
@import "kouto-swiss"

/* other stuff */

@import中的所有s 都framework.styl来自node_modules。这些依赖项和文件的加载顺序很重要，因为如果加载顺序错误，它们可能会相互冲突。

但是，当我运行时npm run dev，它抱怨无法在 中找到任何依赖项位置framework.styl。

我尝试@import在路径前加上~/, node_modules/ …

我在我的项目中使用了 stylus 和 scss。是否可以拥有一个可以同时使用的通用变量文件？

我努力了：

变量.scss

$primary: #00A9E0

主样式

@import 'variables.scss"

由于语法不同，这显然不起作用

我试过这个：

:root {
  --primary-color: $black
}

$secondary-color = "lighten(%s, 20%)" % var(--primary-color)

（我从这里拿来的：如何在 calc 中使用 Stylus 变量？）

我没有收到任何错误。但是，$secondary-color不渲染任何颜色。

这样做的最佳方法是什么？

结果是这样的：

background-color: lighten(var(--primary-color), 20%) 所以我认为有些东西渲染得不好。