Classy官方文档翻译:Properties

支持的属性

Classy 支持所有 UIAppearance 的属性和方法,还支持一些UIAppearence没有提到的属性. 因为Classy的属性名和OC中的是一致的,所以,其实你不用关心哪个属性对应哪个.

比如下面 UIPageControl的属性:

1 2	@property (nonatomic,retain) UIColor pageIndicatorTintColor; @property (nonatomic,retain) UIColor currentPageIndicatorTintColor;

在 Classy中的应用是这样子的:

UIPageControl {
  pageIndicatorTintColor black
  currentPageIndicatorTintColor purple
  }

你也可以用折线,两者是完全一样的:

UIPageControl {
  page-indicator-tint-color black
  current-page-indicator-tint-color purple
  }

参数

有时候, 你需要给UIApearence 传递参数来完成属性的设置. 比如下面的 UIToolBar :


- (void)setBackgroundImage:(UIImage *)backgroundImage 
        forToolbarPosition:(UIBarPosition)topOrBottom
                barMetrics:(UIBarMetrics)barMetrics;

- (void)setShadowImage:(UIImage *)shadowImage
    forToolbarPosition:(UIBarPosition)topOrBottom;

对应到 Classy 中,格式是:

1	<propertyName> [<argumentName> : <argumentValue>, ... ]

参数的顺序无所谓
删除前缀 for ,比如 forToolbarPosition 变成 toolbarPosition

例如:

UIToolBar
UIToolBar {
  background-image[barMetrics:landscape-phone, toolbarPosition:top] test_image_4
  shadow-image[barMetrics:landscape-phone, toolbarPosition:bottom] test_image_3
 }

如果你省略了枚举,那么将使用枚举的默认值:

UIToolBar {
  background-image[toolbarPosition:top] test_image_4
  shadow-image[barMetrics:landscape-phone] test_image_3
  }

变量

避免重复的做法总是好的. Classy允许定义变量来避免重复 .你可以在整个样式表中使用定义的变量.

变量的规则:

字母(大小写均可) 或者 $ 开头
数字字母 _ - 组成

前缀 $ 是帮助区分变量的, 你可以用或者不用, 比如

$brand-color = #e1e1e1
insets = 5, 10, 5, 10
UIButton {
  background-color $brand-color
  contentEdgeInsets insets
  background-image[state:selected] bg_button insets
  }

等式

变量和样式属性的值可以包含简单的数学表达式,例如:

$corner-radius = 2 + 2$insets = 5, 10, 5, 10UIButton {
  layer @{
    border-width 10 - 5
    corner-radius $corner-radius + 2
  }
  contentEdgeInsets $insets * 2
 }

嵌套

Classy允许使用嵌套的方式表达对象属性的嵌套关系,例如:
“view.layer.borderWidth” 或者 “navigationBar.titleTextAttributes.font”

为了避免选择器和嵌套属性的歧义, 我们需要在嵌套的属性名的后面添加 @ 符号.

例如:

UINavigationBar {
  title-text-attributes: @{
    font: HelveticaNeue 21
    foreground-color: magenta
    background-color: red
    ligature: 6
    kern: 0.6
    strikethrough-style: single
    underline-style: double
    stroke-color: blue
    paragraph-style: @{
      line-spacing: 20
      paragraph-spacing: 15
      line-break-mode:truncatingTail
      alignment:center
    }
    shadow: @{
      shadow-offset: 1,2
      shadow-blur-radius: 10
      shadow-color: purple
    }
  }
}

关于 TextAttributes的特别示例

如果一个属性是字典,并且这个属性有 “TextAttributes”后缀. 那么这个属性将被认为是
CASTextAttributes

{ 和 } 是可选的. 例如:

UIView
  background-color #A2A2A2
  layer @
    border-width   2
    border-color   #A1A1A1
    corner-radius  8
    shadow-color   black
    shadow-offset  9,3
    shadow-opacity 0.6
    shadow-radius  4