- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端之路
Stylus in Vue
[CSS预处理器]Stylus in Vue 为什么选择Stylus做预处理呢? 那么在SaaS，Less和Stylus中，为什么选择后者呢？ 因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。 配置Stylus环境 npm install stylus 在vue项目中安装stylus和stylus-loader npm install stylus –save-dev npm install stylus-loader –save-dev .vue单文件中使用 html,bodu padding:0;margin:0; … (无需花括号) 单文件引入 .stylus / /assets/food.stylus”
67120发布于 2018-06-27 - 来自专栏方球
react 配置stylus
( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'stylus-loader ' ) }, 安装插件 // 安装 stylus npm i --save-dev stylus // 安装loader npm i --save-dev stylus-loader
1.4K40发布于 2019-08-21 - 来自专栏技术向
stylus语法知多少
本文由腾讯云+社区自动同步，原文地址 https://stackoverflow.club/article/how_to_use_stylus/ 在yarn项目中引入 stylus 新建styl文件，如 article.styl 安装 yarn add stylus stylus-loader 不安装无法在js文件中import非js文件 在入口js文件中 import1import '. /会认为是依赖库，需要安装 stylus特性 冒号可有可无 分号可有可无 逗号可有可无 括号可有可无 变量 插值（Interpolation） 混合（Mixin） 数学计算 强制类型转换 动态引入 条件表达式 迭代 嵌套选择器 父级引用 Variable function calls 词法作用域 内置函数（超过 60 个） 语法内函数（In-language functions） 压缩可选 图像内联可选 Stylus
56020发布于 2019-11-20 - 来自专栏前端之路
在vue 中使用Stylus
Stylus => 一个CSS预处理器 安装 cnpm install stylus 初始化项目 vue init webpack filename cd filename cnpm install cnpm install stylus –save-dev cnpm install stylus-loader –save-dev npm run dev 使用 vue中使用Stylus 引入 引入单独的.styl文件 新建stylus文件 filename.styl 编写样式后 通过script标签import引入 import ‘. /common/stylus/mixin.styl”
90220发布于 2018-07-17 - 来自专栏万丈高楼平地起
前端面试（4）less，sass，stylus
预编译：less，sass，stylus 预处理语言的诞生 其中 就我所知的有三门语言：Sass、Less 、Stylus 。 Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。 在网上讨论看来，Sass 与 Stylus 相比于 Less 功能更为丰富，但对于学习成本以及适应时间 ，Less 稍胜一筹，这也是我选择 Less 的原因。
1.7K20编辑于 2022-03-08 - 来自专栏vue的实战
在vue中使用stylus的混入
assets/styles/mixins.styl" /// 引入混入 直接在样式中使用 .icon-desc { ellipsis(); /// 直接使用 stylus
81620发布于 2019-08-28 - 来自专栏tongyao
vue Failed to resolve loader: stylus-loader问题
在项目运行中会出现如下图所示的问题，出现Failed to resolve loader: stylus-loade 问题原因，是因为在项目中使用了lang=“stylus”, 项目中并没有安装stylus-loade 执行代码如下： npm i stylus stylus-loader --save-dev COPY
57520编辑于 2022-06-09 - 来自专栏四楼没电梯
Stylus 浏览器扩展开发-Cursor AI辅助
这个简单的需求逐渐演变成了一个完整的浏览器扩展项目 —— Stylus。不仅实现了最初的护眼模式，还扩展出了更多实用的功能。 技术选型 在开发初期，我面临着技术栈选择的问题。 简化了扩展开发的复杂度 支持 React 等现代前端框架 完全兼容 Manifest V3 规范 技术栈概览： WXT 作为核心开发框架 React 18 构建用户界面 TypeScript 5 确保代码类型安全 Stylus 添加样式缓存机制 功能扩展 支持更多预设模板 添加样式分享功能 实现云端同步 社区建设 开源代码 建立用户反馈系统 完善文档和示例 总结 从一个简单的护眼需求，到一个功能完整的浏览器扩展，Stylus
26210编辑于 2024-12-20 - 来自专栏编程微刊
Sass、Less和Stylus之间有什么主要的区别？
Sass、Less和Stylus是三种常见的CSS预处理器，它们在功能和语法上有一些区别。 Less和Stylus使用类似CSS的语法，使用大括号和分号来表示规则和声明。 2：变量定义： Sass和Less都使用 $符号来定义变量。 Stylus使用$符号或@符号来定义变量。 3：嵌套规则： Sass、Less和Stylus都支持嵌套规则，使得在样式表中可以更好地组织和表示层级关系。 Stylus使用类似函数的方式来定义和调用可重用的代码块。 5：函数和运算： Sass和Less提供了一些内置的函数和运算符，可以进行数学计算和字符串操作等操作。 Stylus使用extend()函数来实现类似的功能。 这些区别主要体现在语法和一些特性的实现方式上。选择使用哪种预处理器取决于个人偏好、项目需求和团队协作等因素。
1K30编辑于 2023-10-29 - 来自专栏技术社区
vue：项目中Failed to resolve loader: stylus-loader问题
在项目运行中会出现如下图所示的问题，出现Failed to resolve loader: stylus-loade 问题原因，是因为在项目中使用了lang=“stylus”, 项目中并没有安装stylus-loade 执行代码如下： npm i stylus stylus-loader --save-dev
80520编辑于 2022-06-16 - 来自专栏四楼没电梯
轻松绕过网站复制限制，Stylus插件让复制更自由！
Stylus插件介绍 Stylus是一款浏览器插件，可以让你自定义网页的样式和行为，包括修改网站的CSS，甚至针对特定网站设置一些个性化的功能。 Stylus插件安装方法 点击以下链接进入插件的安装页面： Stylus插件 - Microsoft Edge商店 选择添加到浏览器，按照提示完成插件的安装。 安装完成后，你会看到浏览器右上角出现Stylus的图标，表示插件已经安装成功。 使用Stylus绕过禁止复制的限制 有些网站为了保护版权或防止内容被盗用，通常会禁用文字选择和复制。 Stylus插件可以帮助我们轻松解决这个问题，让你能够重新选择和复制网页上的内容。 快来试试Stylus插件，轻松解决复制问题，让你的浏览体验更顺畅！
1K10编辑于 2024-12-21 - 来自专栏程序那些事儿
scss,less,stylus这些css处理器该怎么选择
Stylus Stylus诞生于2010年。尽管它的用户群明显少于Sass或Less，但仍然值得研究。 Stylus是用Node.js编写的，因此对于那些已经熟悉nodejs环境的人来说是一个不错的选择。同时它也具有内置函数和mixin。 Stylus与众不同之处在于其灵活性：冒号，分号和逗号都是可选的。此外，我们不需要花括号来定义代码块：Stylus使用缩进代替符号。 用最少的代码写出样式是Stylus一直追求的，然而这也可能导致代码可能不易于阅读，但是这主要看个人，毕竟一些新事物的诞生，本身就需要花费一些时间。
1.1K10编辑于 2023-03-07 - 来自专栏前端布道
CSS预处理器的对比 — sass、less和stylus
stylus的语法花样多一些，它使用.styl的扩展名，stylus也接受标准的CSS语法，但是他也接受不带花括号和分号的语法，如下所示： /* style.styl */ h1 { color: 有一点需要注意的是，如果我们使用@符号开头来声明（0.22.4）变量，stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在stylus中不要使用@符号开头声明变量。 stylus：stylus和前两者也略有不同，他可以不使用任何符号，就是直接定义Mixins名，然后在定义参数和默认值之间用等号（=）来连接。 的颜色函数介绍，请阅读 stylus文档。 中text-shadow的样式写在一行，是因为stylus中省略了花括号｛｝和分号;。
5K70发布于 2018-04-11 - 来自专栏全栈程序员必看
CSS之 sass、less、stylus 预处理器的使用方式
72887490 使用变量： sass： 使用 符号定义变量，如： base_color: #efefef less： 使用 @ 符号定义变量，如：@base_font_size: 16px stylus ; } p { background: #092873; } 继承：当我们需要为多个元素定义相同的样式的时候，我们可以考虑使用继承的做法 sass继承：通过 @extend来实现代码组合声明（stylus 20px; margin: 4px; @include error(5px); /* 调用混入语法，传入一个参数得到 border:5px solid #cacaca*/ } stylus
1.1K40发布于 2021-04-07 - 来自专栏林德熙的博客
WPF Main thread gets a deadlock when stylus input thread is waiting for the window to close
The easiest way to reproduce this issue is to wait for the window in the main thread to close in the stylus Theory The stylus input thread gets the input event when the user touches the screen. There is a ThreadProc method running in the stylus input thread and this method has a loop inside which waiting for the stylus input thread remove PenContext. to remove the PenContext in the stylus input thread.
46810编辑于 2022-08-12 - 来自专栏finleyMa
react学习系列1 修改create-react-app配置支持stylus
默认情况下webpack配置文件不会暴露出来，这不满足我当前的需求，比如这里我喜欢用 stylus(一个类似less，sass的样式预处理器)。 stylus 和 sass 类似，支持变量，mixin，函数等功能，而且连括号，分号都不用写。用缩进区分。 官网的 readme 中有怎么添加 sass 和 less 的教程 没有讲如何添加 stylus 支持，其实这也难不倒咱。 具体步骤如下： 项目根目录执行 npm run reject，会发现多出来个 config 目录，里面的各个配置文件都带有详尽的注释 安装 stylus 相关依赖，执行 npm install stylus stylus-loader --save-dev 或 yarn add stylus stylus-loader 打开 config\webpack.config.dev.js 我们让webpack
1.5K20发布于 2018-09-10 - 来自专栏CSDN博客专家-小蓝枣的博客
Chrome 私人珍藏-stylus插件实现个性化百度界面定制
先看效果图：【如果不懂代码，没关系，YHWHCSDN-以后我会告诉你！】喜欢的登陆下点个赞，要不作者都没动力了。
2.7K20发布于 2020-09-25 - 来自专栏胡哥有话说
Vue中使用CSS预处理器 stylus以及配置全局变量的方法
今天呢，胡哥就以stylus在vue中的使用为例， 为大家分享css预处理器的基本使用方式，以及全局变量的定义和便捷使用方式。 三种CSS预处理器在vue中的使用原理是相同的， 希望大家能触类旁通… 一、stylus的基本使用 下载安装stylus、stylus-loader包 npm i stylus stylus-loader 会自动检测如果使用了stylus语法，会自动调用stylus-loader进行解析处理 stylus文件和在vue组件中使用stylus a. none b. vue组件中的使用 <style lang="<em>stylus</em>"> // 使用stylus语法书写即可 </style> vue中加载stylus文件 a. : generateLoaders('stylus', stylusOptions), styl: generateLoaders('stylus', stylusOptions) } 修改配置文件后
3.7K10发布于 2019-07-25 - 来自专栏大前端全栈开发
利用径向渐变radial-gradient封装stylus、sass函数制作半圆透明切角效果
true, 30rpx, , , 60rpx, pink, , blue, red)对应的 sass 版本sass 封装函数需要用到 @mixin，使用时需要用 @include，注意 sass 中不能像 stylus 还有就是中间的参数不能像 stylus 一样可以直接省略，sass 中参数连续写多个逗号会报错，所以只能省略后面的参数。
35830编辑于 2023-11-17 - 来自专栏大前端全栈开发
利用css径向渐变radial-gradient封装stylus、sass函数制作半圆透明切角效果
30rpx, , , 60rpx, pink, , blue, red) 对应的 sass 版本 sass 封装函数需要用到 @mixin，使用时需要用 @include，注意 sass 中不能像 stylus 还有就是中间的参数不能像 stylus 一样可以直接省略，sass 中参数连续写多个逗号会报错，所以只能省略后面的参数。
33330编辑于 2023-11-17
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号