经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTMLCSS » CSS » 查看文章
学习stylus笔记
来源:cnblogs  作者:tzzf  时间:2018/10/8 8:47:03  对本文有异议

最近在研究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稍微简单写,不需要加@
 
暂时就写这些把。
 
 
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号