stylus特点
富于表现力、具有健壮性、功能丰富、动态编码
不需要写CSS的冒号、分号、大括号
和LESS、SASS功能类似,会这些的入手很快
stylus特点
安装
使用
stylus语法
(一)选择器
(二)变量
(三)插值
(四)运算符
(五)内置函数
(六)尾参数…
(七)@extend继承
相关教程:鑫空间,鑫生活
安装
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,body
margin 0
padding 0
div
color #333
</style>
1
2
3
4
5
6
7
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(五)内置函数
函数实例 值 说明
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"

---------------------
作者:漫疏狂
来源:CSDN
原文:https://blog.csdn.net/lyt_angularjs/article/details/80457099
版权声明:本文为博主原创文章,转载请附上博文链接!

stylus基础教程,stylus实例教程,stylus语法总结的更多相关文章

  1. Windows 8实例教程系列 - 自定义应用风格

    原文:Windows 8实例教程系列 - 自定义应用风格 在Windows 8 XAML实例教程中,曾经提及过应用风格设计方法以及如何创建可复用样式代码.本篇将深入讨论如何创建自定义Windows8应 ...

  2. git命令行的操作实例教程

    Git 常用命令常用命令 创建新仓库 创建新文件夹,打开,然后执行 git init 1 以创建新的 git 仓库. 检出仓库 执行如下命令以创建一个本地仓库的克隆版本: git clone /pat ...

  3. Silverlight实例教程 - Validation数据验证基础属性和事件(转载)

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...

  4. AutoCAD ObjectARX(VC)开发基础与实例教程2014版光盘镜像

    AutoCAD ObjectARX(VC)开发基础与实例教程2014,最新版,光盘镜像 作者:张帆 朱文俊 编著 出版社:中国电力出版社 出版时间:2014年6月 点击一下

  5. Windows 8实例教程系列 - 数据绑定基础实例

    原文:Windows 8实例教程系列 - 数据绑定基础实例 数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Stor ...

  6. 前端基础功能,原生js实现轮播图实例教程

    轮播图是前端最基本.最常见的功能,不论web端还是移动端,大平台还是小网站,大多在首页都会放一个轮播图效果.本教程讲解怎么实现一个简单的轮播图效果.学习本教程之前,读者需要具备html和css技能,同 ...

  7. Python导出Excel为Lua/Json/Xml实例教程(一):初识Python

    Python导出Excel为Lua/Json/Xml实例教程(一):初识Python 相关链接: Python导出Excel为Lua/Json/Xml实例教程(一):初识Python Python导出 ...

  8. python迭代器与iter()函数实例教程

    python迭代器与iter()函数实例教程 发布时间:2014-07-16编辑:脚本学堂 本文介绍了python迭代器与iter()函数的用法,Python 的迭代无缝地支持序列对象,而且它还允许程 ...

  9. 《HTML5与CSS3实例教程》

    <HTML5与CSS3实例教程> 基本信息 作者: (美)Brian P. Hogan 译者: 卢俊祥 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:97871153634 ...

  10. Silverlight实例教程 - Validation数据验证开篇

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...

随机推荐

  1. CPU Stepping

    http://baike.baidu.com/view/16839.htm?fr=ala0_1_1 步进 编辑   步进(Stepping)是CPU的一个重要参数,也叫分级鉴别产品数据转换规范,“步进 ...

  2. linux中select网络通信

    //ser.cpp #include <iostream> #include <fcntl.h> #include <sys/socket.h> #include ...

  3. linux 输入子系统(3) button platform driver

    button platform driver 一般位于driver/input/keyboard/gpio_keys.c /*用于按键事件的上报,它将在按键的中断发生后被调用.其中逻辑就是获取到按键类 ...

  4. Java小日历

    自己写的一个小小日历.执行程序是柯自己主动定位到当前年月日,当点击下个月button是会定位到下个月的这一天,就是说天数不会变.当在一个月中点击某一天时,以下的时间也会随时变化. import jav ...

  5. npm WARN uninstall not installed in /Users/hrt0kmt/node_modules: "xxx"

    You may meet this error on home directory. % npm uninstall appium npm WARN uninstall not installed i ...

  6. java File文件操作共用方法整理

    package org.jelly.util; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io ...

  7. Java WebSocket库:https://github.com/TooTallNate/Java-WebSocket

    https://github.com/TooTallNate/Java-WebSocket 以下是简单示例: import com.google.gson.JsonObject; import com ...

  8. LCS的几种求法

    \(LCS:\) 对于两个长度均为 \(N\) 的数列 \(A\) 和 \(B\) ,存在一个数列 \(C\) 使得 \(C\) 既是 \(A\) 的子序列有事 \(B\) 的子序列,现在需要求这个数 ...

  9. 有奖试读&amp;征文——我们在互联网上奋斗的故事 获奖名单发布

    互联网是一个年轻的行业,同一时候也是一个推陈出新.不断进化的行业. 中国互联网行业在近期的十五年里.以如何的方式在"进化".我相信非常多奋斗在互联网战线上的你们最深有感触.读一读& ...

  10. [翻译]Unity中的AssetBundle详解(三)

    构建AssetBundles 在AssetBundle工作流程的文档中,我们有一个示例代码,它将三个参数传递给BuildPipeline.BuildAssetBundles函数.让我们更深入地了解我们 ...