stylus系列 | 普通Html页面如何使用stylus语法

最新推荐文章于 2023-07-06 23:05:00 发布
最新推荐文章于 2023-07-06 23:05:00 发布
阅读量1.8k 收藏 2
点赞数 2
分类专栏： 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37930716/article/details/95936840
版权

 

stylus介绍

stylus是一个css预处理框架。来自node社区，主要用来给node项目进行css预处理支持
stylus文件后缀是 .styl

 

stylus安装

比如可以在CSS文件夹中，按住shift键+右击，在命令行工具中输入

$ npm install -g stylus

 

自动化编译

  1. 新建example文件夹
  2. 新建css文件夹
  3. 新建css/style.styl文件
  4. 打开命令行界面
  5. css目录下输入 stylus -w style.styl -o style.css
    -w 是自动监视文件 -o 是将编译后的CSS文件输出到指定文件中
  6. 在style.styl里面写内容，保存即可
前端杂记
关注
专栏目录
html引入stylus,stylus 导入(@import)
weixin_34530164的博客
06-15 859
本文是《CSS框架》系列文章第 32篇 (共 41 篇)导入Stylus支持字面@import CSS, 也支持其他Stylus样式的动态导入。字面CSS任何.css扩展的文件名将作为字面量。例如：@import "reset.css"渲染如下：@import "reset.css"Stylus导入当使用@import没有.css扩展，会被认为是Stylus片段(如：@import "mixins...
vue 使用Jade模板写html,stylus写css的方法
11-30
本文主要介绍如何在Vue项目中使用Jade作为HTML模板语言，以及使用Stylus作为CSS预处理器。 首先，要启用Jade（现称为Pug）和Stylus，你需要安装相应的依赖包。如果你的项目是通过Vue CLI创建的，那么Stylus已经默认...
stylus_安装与自动编译
Tang
07-09 2847
stylus介绍stylus是一个css预处理框架。来自node社区，主要用来给node项目进行css预处理支持stylus文件后缀是 .stylstylus安装$ npm install -g stylus 运行stylus -h 可以获得相关的命令行支持自动化编译新建example文件夹新建css文件夹新建css/style.styl文件打开命令行界面example目录下输入 $ stylus...
stylus通过node监听文件变化实现自动编译
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
09-11 455
近日在学习 stylus ,由于没有使用webpack，需要手动编译，在网上找了，通过 -w 和node中间件实现自动化，奈何手动操作一番，都未果，遂自己用node实现了一个，如下 const fs = require('fs') const filePath = './' var exec = require('child_process').exec; function execute(...
css 预编译处理器 - Stylus
小书包大梦想的博客
05-19 919
stylus 是三大css预编译处理器之一！ 一、基础语法 1、语法特性 stylus是一个提倡简洁写法的语言，代码可省略花括号{}，冒号 ：，引号 ；，当没有使用花括号，需使用缩进进行编写，成为‘python’式书写。 2、变量 变量可以是一个值，也可以是一个表达式。 color = red // 直接赋值定义变量 border = 1px solid grey // 赋值一个表达式作为变量值 h1 border border // 引用变量 // 编..
webpack 编译stylus_Stylus系列——webpack-spritesmith配合stylus使用示例
weixin_27303545的博客
01-17 251
一、前言基于Webpack的CSS Sprites实现方案，若是直接在html中调用雪碧图图标已经很方便，但是实际开发过程可能遇到需要在伪元素中使用雪碧图，或者需要hover切换另一个图标，这种情况下就无法在css中直接调用图标类名。这时，就需要css预处理器，当然不限于stylus，less、sass都是可以的，本文介绍stylus方案。二、项目配置1. 目录结构预览+ node_modules...
解决vue-cli中stylus无法使用的问题方法
08-30
Stylus是一种流行的CSS预处理器，它提供了更丰富的语法和功能，如变量、嵌套、函数等，以提升CSS的编写效率。下面我们将详细探讨这个问题的原因及解决方案。 首先，当在Vue CLI项目中尝试使用Stylus时，如果出现...
详解vue中引入stylus及报错解决方法
08-29
Stylus 支持缩进语法，上面的代码会编译成标准的 CSS。 **引用 .styl 文件** 除了在 `.vue` 文件内部使用 Stylus，还可以通过引用外部 `.styl` 文件。这通常适用于大型项目，以保持代码组织和可维护性。例如，在 `...
stylus css 框架使用方法深入解析
09-24
在使用Stylus时，首先需要了解其基本概念、安装步骤、编写Stylus语法、编译过程以及一些高级功能。 首先，Stylus需要经过编译后才能被HTML文件调用。这与传统的CSS文件不同，后者可以直接在HTML文件中通过标签进行...
stylus
josehan的博客
05-09 452
stylus格式  指将css中{} ；去掉即可
使用vscode创建vue项目，首次使用stylus安装方法
lgbzxy的博客
01-10 962
PS E:\vue-music> npm run dev 然后解决了！
stylus第二步：生成css
VLilyLUE的博客
11-20 4139
第一步安装请看stylus的安装 我也刚开始学啦作为学习过程的记录，如果有什么差错请用力拍打评论和私信，谢谢各位大神。项目目录如下： 在项目目录下执行命令： stylus –compress src/ 看好项目目录，不要运行错位置。 没有问题的话会输出 compiled src\style.css，就是生成好的css啦。 然后在style.styl中写样式，把css文件链到页面
stylus的用法
weixin_34413357的博客
05-07 565
参考链接：预处器的对比——Sass、LESS和Stylus http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html 因为在vue.js项目（高仿饿了么app）中会用到stylus，所以本文重点关注stylus的用法 1.语法 Stylus的语法花样多一些，它使用“.styl”的扩展名，S...
stylus语法
weixin_30668887的博客
10-09 260
stylus 支持缩进写法 h1 color: #ffaff; 变量 /*定义变量*/ maincolor = #090032 siteWidth = 1024px borderStyle = dotted body color maincolor border 1px borderStyle mainColor max-wid...
stylus用法
_being_的专栏
05-09 1万+
stylusstylus是一款 CSS 的预处理器，使用它可以创建健壮的、动态的、富有表现力的CSS。用法# install npm install stylus -g# watch and complie stylus file from command line stylus -w style.styl -o style.css语法 注释 // 单行 /多行,压缩后不输出/ /!压缩后
stylus语法中将一个或多个变量传入calc等方法中
热门推荐
诗水人间
09-05 11万+
如果是传入一个变量 需要安装下面这种形式传参即可 headHeight=50px /*stylus语法中定义一个变量*/ height 'calc(100% - %s)' % headHeight 如果再stylus语法中直接使用是没有问题的！出现问题地方就在于使用内置函数，或者自定义的函数，然后将这个变量传入是如果按照下面的写法是错误的，因为他会认为headHeight是值，而不是变量，需要按上面的方法传参即可，这样在进行stylus编译后就会将变量值传入替换 headHeight=50px /
stylus入门学习笔记
不营养、的博客
09-06 1142
学习到 vue， 有人推荐使用 stylus 这个 css 预处理器。而之前也只是停留在听说过 stylus，并没有实际操作过。现在正好抽空来学习一下呗；如果会 less，sass之类的 css 预编译器，学 stylus 也是 so easy！ 学习来源：张鑫旭个人博客，这是个 css 界大牛哦 话不多说，先来段代码比较一下吧。 body color: white te...
拥抱简洁：探索Stylus的简洁语法与CSS预处理器之美
最新发布
你若盛开，清风自来
07-06 1123
同时，Stylus 提供了丰富的功能和语法，使得样式表的编写更加简洁、灵活和可维护。通过这个示例，展示了如何使用变量、嵌套规则、Mixin、继承和运算符等 Stylus 的功能来提高代码的可维护性和重用性，同时保持代码的简洁性和可读性。通过使用 Extend 语法，我们可以将一个选择器的样式继承到另一个选择器上，从而避免在多个选择器中重复写相同的样式，提高了代码的重用性和可维护性。Stylus 的 Mixin 是一种可以重复使用的代码块，可以在不同的选择器中引用，并且支持参数传递，提供了更好的代码复用性。
Stylus的基础用法
weixin_34245082的博客
12-03 252
介绍 在学习一个 Vue.js 项目的过程中，注意到源码中样式的部分并没有用熟悉的 .css 样式文件，而是发现了代码长得和 CSS 相像的 .styl 文件。这个 .styl 以前没见过啊，你是谁？于是开始一顿搜索。 发现文件后缀是. styl 的这个哥们儿学名叫 stylus，是 CSS 的预处理框架。 CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？st...
Stylus预处理框架深度学习教程
安装完成后，可以使用Stylus编译`.styl`文件到CSS： ``` $ stylus input.styl -o output.css ``` 或者在项目中局部安装并配置构建工具，如Gulp或Webpack，自动处理Stylus文件的编译。 **Stylus与其他预处理器的对比...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值