zoukankan      html  css  js  c++  java
  • stylus使用文档总结:内置方法+参数+条件+迭代+导入+继承

    一、内置方法

      返回各种颜色的比重(如red(color)等)

      颜色函数是CSS预处里器中内置的颜色函数功能,这些功能可以对颜色值进行处理,例如颜色的变亮、变暗、渐变颜色等处理十分的方便。

    lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
    darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */
    saturate(color, 10%);   /* 返回的颜色在'color'基础上饱和度增加10% */
    desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */  

      keys(pairs)/values(pairs):返回给定pairs中的键/值

    pairs = (one 1) (two 2) (three 3)
    keys(pairs)
    // => one two three
    values(pairs)
    // => 1 2 3

      typeof(node):字符串形式返回node类型

    typeof(12)
    // => 'unit'
    typeof(#fff)
    // => 'rgba'

      反正很多,不细说,用到的时候再查

    二、其余参数(Rest Params)

    1、其余参数:Stylus支持name...形式的其余参数(rest风格参数)。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性,如-moz-webkit的时候很管用。下面这个例子中,所有的参数们(1px, 2px, ...)都被一个args参数给简单消化

    box-shadow(args...)
      -webkit-box-shadow args
      -moz-box-shadow args
      box-shadow args
    
    #login
      box-shadow 1px 2px 5px #eee

    2、参数们:arguments变量可以实现表达式的精确传递,包括逗号等等。这可以弥补args...参数的一些不足,见下面的例子:

    box-shadow(args...)
      -webkit-box-shadow args
      -moz-box-shadow args
      box-shadow args
    #login
      box-shadow #ddd 1px 1px, #eee 2px 2px 
    //结果并非称心如意:
    #login {
      -webkit-box-shadow: #ddd 1px 1px #eee 2px 2px;
      -moz-box-shadow: #ddd 1px 1px #eee 2px 2px;
        box-shadow: #ddd 1px 1px #eee 2px 2px;
    }
    //逗号给忽略了。我们现在使用arguments重新定义这个混合书写。
    box-shadow()
      -webkit-box-shadow arguments
      -moz-box-shadow arguments
      box-shadow arguments
    body
      box-shadow #ddd 1px 1px, #eee 2px 2px
    //于是,一下子雨过天晴了:
    body {
      -webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
      -moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
      box-shadow: #ddd 1px 1px, #eee 2px 2px;
    }

    三、注释

      单行和多行注释跟js一样

      多行缓冲注释:跟多行注释类似,不同之处在于开始的时候,这里是/*!,这个相当于告诉Stylus压缩的时候这段无视直接输出。

    /*!
     * 给定数值合体
     */
    add(a, b)
      a + b

    四、条件

      if / else if / else,没什么好说的

      除非(unless):熟悉Ruby程序语言的用户应该都知道unless条件,其基本上与if相反,本质上是(!(expr))

      后缀条件:Stylus支持后缀条件,这就意味着ifunless可以当作操作符;当右边表达式为真的时候执行左边的操作对象

    五、迭代(Iteration)

      Stylus允许你通过for/in对表达式进行迭代形式如下:for <val-name> [, <key-name>] in <expression>

    body
      fonts = Impact Arial sans-serif
      for font, i in fonts
        foo i font
    //生成为:
    body {
      foo: 0 Impact;
      foo: 1 Arial;
      foo: 2 sans-serif;
    }

      函数(Functions):Stylus函数同样可以包含for循环。下面就是简单使用示例:

    //求和:
    sum(nums)
      sum = 0
      for n in nums
        sum += n
    sum(1 2 3)// => 6
    
    //连接:
    join(delim, args)
      buf = ''
      for arg, index in args
        if index
          buf += delim + arg
        else
          buf += arg
    
    join(', ', foo bar baz)
    // => "foo, bar, baz"

      后缀(Postfix):就跟if/unless可以利用后面语句一样,for也可以。

    sum(nums)
      sum = 0
      sum += n for n in nums
    
    join(delim, args)
      buf = ''
      buf += i ? delim + arg : arg for arg, i in args

    六、导入(@import)

      在CSS中,并不喜欢用@import来导入样式,因为这样的做法会增加HTTP的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同,它只是在语义上导入不同的文件,但最终结果是生成一个CSS文件。如果你是通过“@import 'file.css'”导入“file.css”样式文件,那效果跟普通CSS导入样式文件一样。

      注意:导入文件中定义了变量、混合等信息也将会被引入到主样式文件中,因此需要避免他们的相互冲突

    /* file.{type} */
    body {
      background: #EEE;
    }
    
    @import "reset.css";
    @import "file.{type}";
    p {
      background: #0982C1;
    } 
    //转译后
    @import "reset.css";
    body {
      background: #EEE;
    }
    p {
      background: #0982C1;
    }  

    1、导入:Stylus支持字面@import CSS,也支持其他Stylus样式的动态导入。

    2、字面CSS:任何.css扩展的文件名将作为字面量。例如:

    @import "reset.css"
    //渲染如下:
    @import "reset.css"

    3、Stylus导入

      当使用@import没有.css扩展,会被认为是Stylus片段(如:@import "mixins/border-radius")。

      @import工作原理为:遍历目录队列,并检查任意目录中是否有该文件(类似node的require.paths)。该队列默认为单一路径,从filename选项的dirname衍生而来。 因此,如果你的文件名是/tmp/testing/stylus/main.styl,导入将显现为/tmp/testing/stylus/

      @import也支持索引形式。这意味着当你@import blueprint, 则会理解成blueprint.stylblueprint/index.styl。对于库而言,这很有用,既可以展示所有特征与功能,同时又能导入特征子集。

    4、js导入api:

    //下面语句:
    @import 'mixins/vendor'
    //等同于:
    .import('mixins/vendor')

    七、继承(@extend)

    1、继承:Stylus的@extend指令受SASS实现的启发,基本一致,除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。

    2、混合书写下的“继承”:尽管你可以使用混写实现类似效果,但会导致重复的CSS。 典型的模式是定义如下的几个类名,然后归结到一个元素中,例如"warning message",该技术实现是没什么问题,但是维护就比较麻烦了。为了应对这个问题,CSS预处理器可以从一个选择继承另一个选择器下的所有样式。

    message,
    .warning {
      padding: 10px;
      border: 1px solid #eee;
    }
    .warning {
      color: #E2E21E;
    }

    3、使用__@extend__:使用__@extend__得到同样的输出,只要把对应的选择器传给@extend即可。然后.warning选择器就会继承已经存在的.message规则。

    .message {
      padding: 10px;
      border: 1px solid #eee;
    }
    .warning {
      @extend .message;
      color: #E2E21E;
    }

      这儿是个更复杂的例子,演示了__@extend__如何级联。

    red = #E33E1E
    yellow = #E2E21E
    
    .message
      padding: 10px
      font: 14px Helvetica
      border: 1px solid #eee
    .warning
      @extends .message
      border-color: yellow
      background: yellow + 70%
    .error
      @extends .message
      border-color: red
      background: red + 70%
    .fatal
      @extends .error
      font-weight: bold
      color: red

    4、Stylus与SASS不同之处在于SASS不允许__@extend__嵌套选择器。

    form
      button
        padding: 10px
    
    a.button
      @extend form button 
    Syntax error: Can't extend form button: can't extend nested selectors
    // 解析错误: 无法继承自 button: 不能继承嵌套选择器
            on line 6 of standard input
      Use --trace for backtrace.

      Stylus中,只要选择器匹配,就可以生效:

    form
     input[type=text]
       padding: 5px
       border: 1px solid #eee
       color: #ddd
    textarea
     @extends form input[type=text]
     padding: 10px
    //解析
    form input[type=text],
    form textarea {
      padding: 5px;
      border: 1px solid #eee;
      color: #ddd;
    }
    textarea {
      padding: 10px;
    }
  • 相关阅读:
    解析大型.NET ERP系统 权限模块设计与实现
    Enterprise Solution 开源项目资源汇总 Visual Studio Online 源代码托管 企业管理软件开发框架
    解析大型.NET ERP系统 单据编码功能实现
    解析大型.NET ERP系统 单据标准(新增,修改,删除,复制,打印)功能程序设计
    Windows 10 部署Enterprise Solution 5.5
    解析大型.NET ERP系统 设计异常处理模块
    解析大型.NET ERP系统 业务逻辑设计与实现
    解析大型.NET ERP系统 多国语言实现
    Enterprise Solution 管理软件开发框架流程实战
    解析大型.NET ERP系统 数据审计功能
  • 原文地址:https://www.cnblogs.com/goloving/p/8911450.html
Copyright © 2011-2022 走看看