stylus

Stylus not allowing basic subtraction

こ雲淡風輕ζ 提交于 2019-12-24 03:24:06
问题 Noticed an issue when using semantic grids stylus. *width total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)-correction is processing to something along the lines(read different numbers) *width: 89.5833333333333% -correction; So, I decided to performan an experiment. When running stylus -i I found subtraction there was also not operating (at all) To verify I wrote this in my file x=10 y=20 .something font-size y-x which process to .something { font-size:

express + stylus + jade, nothing gets compiled

痴心易碎 提交于 2019-12-24 03:16:08
问题 I cannot get this simple app.js to work: static files are served but jade and styl files are not compiled. Here the __dirname ls: damianomacbook:www damiano$ ls app.jade app.js app.styl config.xml johnd.jpg .jade and .styl files are served normally and plain. Here what happens when curling css and html files (which the middlewares functions are supposed to generate on the fly): damianomacbook:www damiano$ curl localhost:8080/app.css curl: (52) Empty reply from server damianomacbook:www

Conditionally Show Hash Values in Stylus

喜欢而已 提交于 2019-12-24 00:59:58
问题 I have the following hash: styles = { fontSize: { use: true, values: { sm: .875rem, base: 1rem, lg: 1.125rem, } }, fontWeight: { use: false, values: { light: 300, normal: 400, bold: 700, } } } I would like to create a for in loop that processes the values only if use is set to true. I have this code which will loop through the different style types: for style in styles items = styles[style] for item in items {item} for property, value in items[item] {property} value What I can't figure out is

表析LESS、Sass和Stylus的异同

元气小坏坏 提交于 2019-12-24 00:19:34
/*--> */ /*--> */ . 首页 博客园 联系我 前言:CSS预处理语言 . 基本差别 . 基本语法 . 变量与作用域 . 混合(Mixins) . 嵌套实现后代选择器 . 继承 . 条件语句 . 循环语句 . 综合对比 . 留言评论 返回顶部 前言: CSS 预处理语言 CSS 预处理语言可为 CSS 增加更多编程特性,以 CSS 作为目标生成文件。 这些语言可有效提高编程效率,使 CSS 更加简洁、适应性更强、可读性更加,并使项目更易于维护。 本文将在开发者角度使用表格横向对比的方式客观分析目前主流的 CSS 预处理语言 LESS 、 Scss 、 Stylus 的异同之处。 不介绍这些语言的安装、编译等内容。默认读者已熟悉CSS并可能已用过以上至少一种CSS预处理语言。 鉴于目前 Sass 语言有分别以“ .sass ”和“ .scss ”为文件名后缀的两套语法规则,本文只介绍 Sass3 之后的版本,即以 Scss 表示。 基本差别 LESS Scss Stylus/staɪləs/ 后缀名 *.less *.scss *.styl 编译方法 均可以通过各自方式在本地编译成 *.css 文件 有很多第三方编译工具可以将这些格式的文件编译为 *.css 文件 特别项 可以在 HTML 文件中引入 less.js 文件与像引入 *.css 文件一样的方式引入 *

in node.js, how to pass variables to :stylus filter from jade?

笑着哭i 提交于 2019-12-23 18:18:36
问题 creating a variable within jade that I wish the stylus filter to use. using #{var} does not appear to work. for example, this code: - var color1 = 'blue' stylus: div background-color pink color #{color1} gives resulting error: /home/data/tnt/server/node/www/tech/cool.jade:2 1| div 2| background-color pink > 3| color #{color1} 4| expected "indent", got "outdent" how do I get the jade variable color1 visible within the stylus filter? 回答1: Filters (like stylus, markdown etc.) are executed during

Design patterns for writing multiple themes in Stylus/Sass?

£可爱£侵袭症+ 提交于 2019-12-23 14:40:39
问题 I'm writing a stylesheet for a web site where I need to support multiple skins/themes. For example, one theme might be black-on-white with red as the primary color, and another theme might be white-on-black with maroon as the primary color. Almost all of the CSS from one theme translates over to the other theme, except for things like foreground and background color. As an illustrative example, say we have a div. The size and position of that div is fixed between themes, but the color might

LESS - what is the purpose of “&” AFTER a nested selector [duplicate]

随声附和 提交于 2019-12-23 12:58:35
问题 This question already has answers here : Ampersand (parent selector) inside nested selectors [duplicate] (3 answers) Closed 5 years ago . Less .list a{ .landscape&{ height: 100%; } } Outputs .landscape.list a { height: 100%; } Which means "all a tags whose parents have both .landscape and .list" Less .list a{ &.landscape{ height: 100%; } } Outputs .list a.landscape { height: 100%; } Which means "all a tags which have class 'landscape' and whose parents have .list" And that makes sense. But if

Load variables into LESS CSS preprocessor from JSON file

有些话、适合烂在心里 提交于 2019-12-20 17:05:11
问题 Is it possible to load variables into LESS CSS preprocessor from a JSON file like you can do with Stylus? With contents of file myvars.json { "color1": "#112345", "color2": "#667890" } In Stylus I do... json('myvars.json') body{ background-color: color1; } Is it possible to do this in LESS? I want to keep the file as JSON, so I can easily re-use it in javascript. 回答1: In less.js you can make use of javascript interpolation (using the back-ticks). And call a function that loads the json object

卸载stylus 安装stylus 查看版本stylus @的意义~波浪号 ../目录怎么算

核能气质少年 提交于 2019-12-20 15:42:20
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 这是小编第一次写技术博客,供大家参考使用,不喜勿喷啊。(∩_∩) 卸载 stylus : npm uninstall stylus 安装 stylus : npm install stylus-loader css-loader style-loader --save-dev npm install stylus 查看 stylus版本: npm show style-loader version stylus基本语句介绍,就到这里啦。🙂 在项目的 样式里引入样式 ,就像这样: 有三点要补充说明一下哦。 样式里引入样式,需要用 @import这种开头。 还要在样式里引入样式,并且想要使用 @ 符号表示src目录, 在以上前提下,需要在 @前加上~波浪号。 可以看到,我没有写后缀名,那是因为vue会去寻找目录的mixins.styl文件哦,不影响使用。 目录路径问题: @import '../../../assets/styles/varibles.styl' 这条代码的意思是,从本目录 ---- 上一目录 ---- 上一目录 ---- 上一目录中的某某文件找到 varibles.styl文件。 最后,小编祝泥萌工作顺利,我们下期再见!😀 来源: oschina 链接: https://my.oschina

Stylus and Express - stylesheets are not re-compiled when modified

假装没事ソ 提交于 2019-12-18 11:28:08
问题 I am running latest version of Node on Mac OS X. I've installed Express together with Stylus. Also the latest versions. Stylus is not re-compiling my .styl files, when I modify them. How can I fix this? The only solution to getting my .styl files re-compiled, is to delete the compiled .css files... re-starting my application, or doing a clear-cache-refresh (CMD + Shift + R) is not resulting a re-compile. Here's a dump of my application configuration. It's basically the same as when you create