学习stylus笔记
2024-09-09 07:53:41
最近在研究v-cli3.0,发现了一种新的预处理器,于是花了一些时间去学习下。
基本上这个网站上,讲的已经很详情。我下面把我在学习之中的笔记和觉得自己用的多方法贴出来。
1.缩排
使用缩排和凹排代替花括号{以及}
2.消除歧义
类似padding - n的表达式可能既被解释成减法运算,也可能被释义成一元负号属性。为了避免这种歧义,用括号包裹表达式. Paddig (- 10px)
3.变量
一种是在外面定义变量,可以用标志符开头,另一种是在css块区域内用@加变量名寻找变量。变量名可以和css属性名相同,变量名可以覆盖css属性名。
4.插值
一种是用函数的方式做浏览器兼容,另一种是选择器插值,用{}来转义变量
5.运算符
注意点是运算符有优先级的先后顺序。范围包含界线操作符(..)和范围操作符(...)。界限操作符是包含界限。
6.函数
函数参数可以有默认参数。函数可以有多个返回值,然后你取其中的值。条件直接用if…else if… else…
7.哈希写法
hash = (one 1) (two 2) (three 3)
get(hash, two) // 2
8.内置方法
(1) push
nums = 1 2
push(nums, 3, 4, 5) // 1 2 3 4 5
别名为append().
(2) nums = 4 5
unshift(nums, 3, 2, 1) // 1 2 3 4 5
别名为prepend()
(3) 针对哈希还有两个方法
keys(pairs) 获取键
keys(hash) // one two three
values(pairs) 获取值
values(hash) // 1 2 3
(4) even(unit) 是否为偶数
(5) add(unit) 是否为奇数
(6) sum(nums) 求和
9.其余参数
arguments 会比 args…更好。 args…会少一些符号。
10.注释
单行注释 转换不输出
多行注释 转换输出
多行缓冲注释 转换不输出
/*!
* 注释
*/
11.迭代
ss = 0
for n in nums
ss += n
12 继承
@extend .message
继承class message的样式
下面我就说下自己使用上scss和暂时学到的stylus两者之间的优缺点把。
stylus定义变量可以更多丰富,更有可读性,毕竟scss需要用$开头
stylus的缩排可以加快开发速度。
stylus的继承是可以嵌套选择器的,而scss是不可以的
stylus的条件判断会比scss稍微简单写,不需要加@
暂时就写这些把。
最新文章
- Linux ftp访问控制配置,包括访问ftp权限和访问ftp目录权限
- spring mvc 通过配置xml访问控制器的三种方式
- exam help
- html+css源码之实现登录弹出框遮罩层效果
- .net中的";异步";-手把手带你体验
- 《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口
- [記錄用]python py2app 檔案批次重新命名
- modelsim中的文件操作—— 大数据测试
- 提高SQL执行效率的16种方法
- 【Luogu1414】又是毕业季II(数论)
- 自建Nuget服务器
- python——在文件存放路径下自动创建文件夹!
- Ubuntu16.04安装使用wineqq
- windous----操作系统基础
- 【BZOJ4566】【HAOI2016】找相同字符
- docker swarm英文文档学习-5-在swarm模式中运行Docker引擎
- 解决 multiple definition of
- 转载:Remote Validation
- behavior
- MVC扩展DataAnnotationsModelMetadataProvider给model属性对应的页面元素添加任意属性和值