stylus基础教程,stylus实例教程,stylus语法总结
stylus特点
- 富于表现力、具有健壮性、功能丰富、动态编码
- 不需要写CSS的冒号、分号、大括号
- 和LESS、SASS功能类似,会这些的入手很快
文章目录
- stylus特点
- 安装
- 使用
- stylus语法
- (一)选择器
- (二)变量
- (三)插值
- (四)运算符
- (五)内置函数
- (六)尾参数...
- (七)@extend继承
- 相关教程:[鑫空间,鑫生活](http://www.zhangxinxu.com/jq/stylus/)
安装
- 1.安装node+npm环境
- 2.命令行全局安装stylus
cnpm i stylus@latest -g
- 3.可以在命令行输入
stylus -h
查看有哪些可以用的命令
使用
- 1.想将
assets/css
目录下的所有.styl文件编译成css怎么办?
stylus -c assets/css/
- 2.只想将
assets/css/index.styl
编译成assets/css/index.css
?
stylus -c assets/css/index.styl assets/css/index.css
- 3.想将
assets/css/index.css
编译成assets/css/index.styl
?
stylus -C assets/css/index.css
- 4.不想这么麻烦的用命令怎么办?使用webstorm设置如图可以自动将.styl文件转成.css文件
- 4-1.注意第二张图是默认配置,无需修改,直接确定。
- 4-2.如果配置都是空的,可以安装我的配置填写。
- 4-3.如果Program项出现红色报错!是因为node环境有问题或者没有全局安装stylus
- 4-4.接下来只需要编写.styl文件就会自动编译出.css文件。如图
- 5.vue中使用stylus, 命令行中输入
cnpm i stylus --save-dev
- 5.1在 .vue文件中使用, 添加使用
scoped
属性表示样式只对当前组件有效
<style scoped lang="stylus">html,bodymargin 0padding 0divcolor #333
</style>
stylus语法
(一)选择器
- 1.冒号,分号,大括号可写可不写
- 2.后代关系用相同缩进表示
- 3.父子关系用
>
表示 - 4.伪类元素用
&
表示其宿主元素 - 5.属性写在前, 嵌套子元素样式写在后
- 6.分组选择器用相同缩进即可, 如
+a
+span
+span
(二)变量
- 1.定义变量并赋值(建议用 作 为 变 量 前 缀 ) , 如 ‘ 作为变量前缀), 如` 作为变量前缀),如‘width=3px`
- 2.定义函数(arguments为内置所有参数, 也可自定义参数),
border()
$width dashed #foo
- 3.函数参数可以写默认值,类似于es6的解构赋值, 如
padding(top=1px,right=2px)
- 3.方法名加
()
为调用函数,如border()
- 4.建议变量定义在最上面, 然后是函数, 然后才是代码. 最好的方式是变量和函数定义成单独的文件, 然后通过
@import variable.styl
导入 - 5.使用
@height
会冒泡查找值, 如自身有此属性则获取该属性值; 否则层层向上查找该属性, 如果都没有则报错 - 6.可以使用运算符进行计算
- 7.
z-index 1 unless @z-index
表示默认z-index=1
除非@z-index
存在
(三)插值
- 1.实现类似
autoprefixer.css
的效果给兼容属性加前缀 - 2.使用循环
for in
减少代码量 - 3.使用
if-else
判断逻辑
(四)运算符
[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= < >
in
== is != is not isnt
is a
&& and || or
?:
= := ?= += -= *= /= %=
not
if unless
(五)内置函数
函数实例 | 值 | 说明 |
---|---|---|
unit(14%,px) | 14px | 直接用第二个参数替换第一个参数的 |
abs(-5px) | 5px | |
ceil(2.3px) | 3px | 向上取整 |
floor(2.6px) | 2px | 向下取整 |
round(2.6px) | 3px | 四舍五入取整 |
min(1,2) | 1 | |
max(1,2) | 2 | |
even(3) | false | 是否为偶数 |
odd(3) | true | 是否为奇数 |
sum(1 2 3) | 6 | |
avg(1 2 3) | 2 | |
join(’,’,1 2 3) | 1 2 3 | 使用第一个参数为连接符将后面数组连接 |
length(1 2 3 4) | 4 | |
image-size(‘aa.png’) | 20px 30px | 获取图片宽高 |
(六)尾参数…
- 1.可以使用
args...
或者arr...
等接受所有参数; 前面也可以单个接受参数; 但是尾参数写法只能作为最后一个参数
- 2.也可以使用
args[0]
或者arguments[0]
这种下标的方式访问 - 3.
args...
会忽略,
;如果希望不忽略请使用arguments
(七)@extend继承
- 1.使用
@extend
将公共样式抽取, 用子类继承; 在html中可以少写一个类名 ,如class="btn btn-primary"
只需要写成class="btn-primary"
相关教程:鑫空间,鑫生活
stylus基础教程,stylus实例教程,stylus语法总结相关推荐
- C#基础教程-c#实例教程,适合初学者
C#基础教程-c#实例教程,适合初学者. 第一章 C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和W ...
- keyshot渲染图文教程_keyshot实例教程,keyshot汽车渲染图文教程
keyshot实例教程,keyshot汽车渲染图文教程 为什么产品渲染推荐keyshot呢?这是因为KeyShot不仅在电脑配置要求.表现效果.高效速度.学习使用上比较简单,解决了语言障碍,同时在资源 ...
- python程序实例教程基础-Python程序设计实例教程
图书简介 配套资源:电子课件,习题答案,教学大纲,源代码 本书特色: ★本书共14个项目,主要包括Python编程基础.网络爬虫.数据分析和数据可视化四大部分内容. ★全部代码适用于Python 3. ...
- 调音台docker教程_Docker实例教程[超详细](一)
Docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互 ...
- html绘制头像原样教程,CSS实例教程:创意CSS3头像展示教程
今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家.其中关于本示例的一些css样式呈现,个人认 ...
- 【转载】深入了解scanf()/getchar()和gets()等函数,C++系列教程,C++实例教程,C++
---------首先我们看一下scanf()读取字符串的问题: 程序2: #include <stdio.h> int main() { char str1[20], str2[20]; ...
- bdsup2sub java_蓝光原盘压制Remux和Rip、Re 图文实例教程
蓝光原盘压制Remux和Rip.Re 图文实例教程 转自 TTG yoboer 目录: 一.蓝光原盘压制Remux和Rip.Re的区别 二.蓝光原盘压制需要使用的软件 三.蓝光原盘Remux和Rip. ...
- 工作记录:Stylus基础教程及应用
前言 传统CSS的缺陷 css的可重用性差.代码冗余量大.不支持语言特性如变量循环及方法等(虽然css也在慢慢支持,比如现在的css变量等,但明显这些远远不够). 三大预处理 于是预处理器出现了: 2 ...
- 【CSS3教程】CSS3基础常用技巧实例集合
为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现 一.效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CS ...
- python基础实例教程 微课版-从零开始学Python(微课视频版)
基本信息 书名:从零开始学Python(微课视频版) :89.80元 作者:何明 编著 著 出版社:中国水利水电出版社 出版日期:2020_04_01 ISBN:9787517083818 字数:64 ...
最新文章
- pythondjango图书_Django基础教程
- java sqlite mybatis_Spring boot + Mybatis + SQLite 搭建blog API
- Java通过HighCharts导出图表
- python 3.* + Eclipse mar.2 +pydev 5.0 环境搭建
- 文理分科 (最小割问题)
- 学习笔记5-C语言-数组
- 2019最后一个月Python继续霸榜,想上车?看这份书单
- CPU使用率,Blender顶级视频教程,Python,Linux,Stratis,Pidgin等
- #pragma 是什么
- LCD1602字符串显示(STM32F103)
- 【在线SPSS】搞定数据分析,需要这样的思维方式
- 关于tensorflow版本更新
- 虚拟pc服务器 翻译,单机服务器配置文件;ServerSettings.ini【翻译】
- 平凡之路 | 科班小硕的2020年面试小结
- excel制作文件夹侧标签
- firefox装在linux_在 Linux 中安装 Firefox
- 数据结构与算法--递归(factorial)
- 英特尔RealSense激光雷达摄像头L515拆解分析
- 【Python】Python提取word表格,并保存在excel中
- 作为技术负责人,如何从0搭建公司后端技术栈
热门文章
- abaqus python_(大四)运用python语言在Abaqus中进行建模
- [日常]华为手机允许APP应用后台保持运行,并显示通知
- Docker出售企业业务后获得3500万美元融资并迎来新CEO
- l2tp lns设置chap和pap
- 【Selenium下】——全栈开发——如桃花来
- 跨部门沟通难题--高手项目经理和PMO如何解决?【可乐洞察】
- python - 参数检测isinstance
- 宏任务和微任务的总结(js队列执行顺序)+ 一点琐事(善待自己)
- xlsx如何查找替换_exc-excel里的查找和替换怎么用在excel – 手机爱问
- bzoj #4827 礼物(FFT)(HNOI2017)