css预处理器-stylus 很少人用

VIP文章 于 2023-04-19 22:13:59 发布
阅读量344 收藏
点赞数
文章标签： css stylus 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangxinwang996/article/details/130254777
版权

stylus

Stylus由Node.JS编写，与JS堆栈完美匹配。Stylus深受Sass的逻辑能力和LESS的简单性的影响。与Sass或LESS版本相比，Stylus的一个优点是它具有极其强大的内置功能，并且能够处理繁重的计算。

Stylus在编写语法方面提供了很大的灵活性，支持本机CSS，并且允许省略括号、冒号和分号。另外，请注意，Stylus不使用@或$符号来定义变量。相反，Stylus使用赋值运算符来指示变量声明。

每个CSS预处理器都以自己独特的方式完成给定的任务，使开发人员能够使用极其强大的工具以极快的速度编写干净的代码。虽然Sass拥有最大的用户群和活跃社区，但LESS最容易编译和集成。另一方面，Stylus仍然是Node.JS开发人员的流行选择，因为它结合了Sass的广泛逻辑能力和LESS的简单性。最后，CSS预处理器的选择在很大程度上取决于开发人员的偏好和项目需求。如果你想了解更多关于CSS的信息，不妨报名参加Web前端培训，有理论和实践项目一起学习，学以致用，在项目中锻炼自己的思维能力和动手能力，获得快速成长。

官网（目前打不开）

Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理器 | Stylus 中文网

stylus文件的扩展名 是 .styl

index2.styl

stylus文件 如何 生成css文件？

在HBuilder X软件中

最低0.47元/天 解锁文章
wangxinwang996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习CSS预处理器:Sass和less进行对比
12-13
什么是CSS预处理器？Css可以让你做很多事情，但它毕竟是给浏览器认的东西，对开发者来说，Css缺乏很多特性，例如变量、常量以及一些编程语法，代码难易组织和维护。这时Css预处理器就应运而生了。Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。 “我应该选择哪种css预处理器？”是最近网上的一大热门话题，很多人为此争论不休。相比过去我们对是否应该使用Css预处理器的话题，这已经是很大的进步了。目前比较流行的两种预处理器是Sass和Less。至于他们谁更优秀一些：简短的答
stylelint-plugin-stylus:Stylus 的 stylelint 插件
08-04
stylelint-plugin-stylus 插件。 此插件仍处于实验状态 :name_badge: 介绍 插件。 这个插件允许我们使用检查 。 使用的规则查找选择器、声明、at-rule 等的许多错误用法。 查找编码风格违规。 使用自动修复许多风格违规。 可以禁止和自动修复 Stylus 特定的语法。 。 stylelint 编辑器集成对于实时检查您的代码很有用。 您可以查看在线演示。 :optical_disk: 安装 通过npm ： npm install --save-dev stylelint stylelint-plugin-stylus :open_book: 用法 stylelint-plugin-stylus是一个插件stylelint ，所以它是利用stylelint 。 如果您不使用stylelint ，请从使用stylelint开始。 自定义语法 设置用于解析Stylus 的自定义语法。 通过以下设置，
suitcss-with-stylus:SUIT CSS 与 Stylus 和 PostCSS
06-13
SUIT CSS with Stylus & PostCSS 这是编写与触笔SUIT组分，然后使用的示例和处理工具 通过将 SUIT 与 Stylus 相结合，它允许返回功能和嵌套等功能，同时还可以利用 SUIT 提供的工具。 最重要的是，有一整套可用于进一步处理。 为什么是手写笔？ Stylus 与--自定义属性前缀配合得很好，还允许使用 @import进行转义 这些是使用 SUIT 预处理器的关键特性。 另外它真的很快并且允许最少的语法 这个怎么运作 使用将 SUIT 组件（编写为 Stylus 文件）编译成 CSS，使用 SUIT 一致性工具进行检查，然后使用和。 结果是单个文件。 可以轻松添加其他插件。 将 SUIT 视为全球 在这个 repo 中，每个组件的依赖项都列为@imports以便postcss-import可以计算出依赖项树。 另一种方法是将 SUIT 视为全局
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
10-14
主要介绍了在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
CSS预处理器Stylus.zip
07-19
Stylus 是一款 CSS 的预处理器，也就是我们常说的 CSS 框架，语法示例：body   font: 12px Helvetica, Arial, sans-serif; a.button   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   border-radius: 5px; 标签：Stylus  CSS框架
CSS预处理框架——Stylus
cai niaoyihao_的博客
04-19 2818
Stylus是一个CSS预处理框架，后缀为.styl 。 冒号可选、分号可选、逗号可选、括号可选、变量、插值、混合书写、算术、强制类型转换、动态导入、条件、迭代、嵌套选择、父级参考、变量函数调用、词法作用域、内置函数、内部语言函数、压缩可选、图像内敛可选、可执行Stylus、健壮的错误报告、单行和多行注释、CSS字面量、字符转义、TextMate捆绑、....
CSS预处理器stylus - 安装与使用
草巾冒小子的博客
11-07 893
CSS预处理器stylus 一、简介 （文章来源于网络总结） css预处理器有Less、Sass（Scss）及Stylus；它们各自的背景如下: 1.Sass： 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。 2.Less...
css预处理器--stylus
qq_39305942的博客
05-24 225
安装方法 1. 快速安装方法 package.json 文件 "devDependencies": { // 添加这两段 "stylus": "^0.54.7", // CSS的预处理框架，即将stylus转换为css使用 "stylus-loader": "^3.0.2", //让webpack理解stylus } 最后再终端输入命令 npm install 就安装好了 使用方法 /** * scoped CSS 表示css样式只作用于当前组件中的元素 * stylus c
CSS预处理工具Stylus
dream19921216的博客
09-28 949
CSS（层叠样式表，Cascading Style Sheet）是前端开发中最基本也是最必须的三个（HTML,CSS,JavaScript）技能之一。然而在传统的前端开发中，CSS的开发过于静态化，存在着一些制约开发效率的问题，例如，语法不够强大，无法嵌套书写，导致模块化开发中多次重复书写相同的选择器；没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致代码冗余、难
为什么使用Stylus
Goaread的博客
12-24 284
CSS预处理器的出现大大的提高了前端开发的效率和逼格，它让CSS可编程化。LESS和Sass/SCSS是两种最为常见的预处理器，拥有大量的用户基数，数目庞杂的第三方库。然而，还有一种预处理器并未引起足够的重视，Stylus。 现在，我们来说说为什么Stylus很棒，为什么使用它，为什么它将会变成你的首选预处理器。
sass、less和stylus的安装使用和入门实践
火星大熊猫
02-11 2257
刚开始的时候，说实话，我很反感使用css预处理器这种新玩意的，因为其中涉及到了编程的东西，私以为很复杂，而且考虑到项目不是一天能够完成的，也很少是一个人完成的，对于这种团队的项目开发，前端实践用css预处理器来合作，是一种很痛苦，即使不痛苦那也是需要花费非常多的时间来协调合作上的。对于预处理器的态度，目前是本着学习新技术和推动css向前进的思想来学习新玩意。下面这篇文章来自w3cplus，这是一篇
CSS基础：Less的使用以及注意项
u011863822的博客
04-01 5109
本篇主要聊的less的安装，以及使用过程中如果声明变量，方法。还有其继承，导入when和if关键字。
CSS经典面试题
Shivy_的博客
01-26 554
CSS3新增的属性有哪些？ RGBA颜色和透明度： rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A) a) 红色（R）0 到 255 间的整数，代表颜色中的红色成分 b) 绿色（G）0 到 255 间的整数，代表颜色中的绿色成分 c) 蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分 d) 透明度（A）取值 0~1 之间， 代表透明度 Background属性 a) background-image：设置元素的背景图像 b) background-origin：规定背景图片的定位区域
XMixins -- 一个兼容LESS、SASS、Stylus的超级mixin库！
hahaxiaolaohu的专栏
09-01 447
# Hello，XMixins！[![XMixins](https://raw.githubusercontent.com/mytcer/xmixins/master/images/icon.png)](https://github.com/mytcer/xmixins)### 一. 简介**[XMixins](https://github.com/mytcer/xmixins)**
Stylus—CSS预处理框架
沐枫
08-10 1116
随着项目越来越复杂，CSS的预处理越来越重要，css维护工作会越来越困难，造成这些困难的很大原因源于CSS 是一门非程序式语言，没有变量、函数、作用域等概念。为了更好的管理、维护CSS代码，可以使用stylus、sass、less等技术, 这里选择的的stylus。 参考网址：http://stylus-lang.com 开源地址：https://github.
样式处理——预处理器stylus
weixin_33946020的博客
08-30 112
前提说明 为了写样式方便快速，现在很多时候写样式都是使用预处理器了，预处理器有很多，包括 Sass、Less、Stylus 等。在这里选用的预处理器是 Stylus。 需要用到的模块： stylus stylus-loader 文件的后缀名：.styl 准备工作 首先，还是把需要的依赖安装一下 package.json： "scripts": { "webpack": "web...
sass，less，stylus
阿牛哥的博客
08-17 230
sass，less，stylus三者的用法
记录使用css预处理器框架stylus
qq_42750027的博客
09-05 160
开发工具：vscode 1.安装stylus npm install stylus -g 2.安装vscode插件 3.新建文件xxx.styl index.styl .k-title font-size 15px color red 4.输入命令转换css文件，注意文件路径是绝对路径 stylus -w index.styl -o index.css 5.自动生成css文件 in...
css预处理和css后处理器
最新发布
06-10
CSS预处理器和后处理器是两种用于增强CSS的工具，它们可以简化CSS编写、维护和扩展的过程。 CSS预处理器是一种将扩展的CSS语言编译成标准CSS语言的工具，常见的有Less、Sass和Stylus等。它们允许开发者使用变量、函数、嵌套、混合、继承等高级特性，使得CSS代码更加模块化、可复用和易于维护。使用预处理器可以提高开发效率，减少代码量，并且支持自定义函数和扩展语法。 CSS后处理器是一种对已有CSS代码进行处理的工具，常见的有PostCSS和Autoprefixer等。它们可以自动化完成一些CSS的兼容性处理和优化任务，例如添加浏览器前缀、压缩代码、移除重复代码等。使用后处理器可以让开发者更加专注于CSS的编写，而不用关心浏览器兼容性等问题。 总体来说，CSS预处理器和后处理器都可以提高CSS的开发效率和代码质量，但是需要额外学习和配置，同时可能会增加一定的编译时间和依赖库的体积。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值