• 学习stylus笔记


    最近在研究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稍微简单写,不需要加@
     
    暂时就写这些把。
     
     
  • 相关阅读:
    Ubuntu 上安装MySql
    Vue中组件的使用
    Swagger在 NETcore 中的使用
    awk 中 fieldwidths使用方法
    3.BIND从服务器及缓存服务器配置
    2.BIND服务基础及域主服务器配置
    1.DNS基础及域名系统架构
    Linux防火墙iptables的策略
    inode占用100%时硬盘无法写入文件故障处理
    特殊计算方式(数组)
  • 原文地址:https://www.cnblogs.com/tzzf/p/9743967.html
Copyright © 2020-2023  润新知