这是什么？

目前这只是一个想法。CSS已经存在一段时间了，并且是网页视图布局的标准。我一直好奇为什么这没有应用到移动端。

这个特定的库旨在将类似SCSS的语法转换为布局约束。希望提供一个强大且易于布局视图的方法，无需使用Storyboard。

用法

• 步骤1：将.css或.scss文件添加到您的包中
• 步骤2：设置您的视图（您可以使用Storyboard或程序化地完成此操作）
  • 不要在您的任何视图中设置约束。这是一个全有或全无的框架，并将清除您已有的任何约束
• 步骤3：将类或ID添加到视图中（ID == accessibilityIdentifier）。这也可以通过Storyboard或程序化地完成
• 步骤4：将superview传递给CSS解析器 示例

    import iOSCSS

    //... general view controller setup, class definition etc...

    override func viewDidLoad() {
        super.viewDidLoad()
        view.className = "master"
        Parser.shared.setup(view)
        // Do any additional setup after loading the view, typically from a nib.
    }

支持的类似SCSS语法

类/ID嵌套示例

.outer {
    background-color: blue;
    .inner {
        height: 20pt;
        width: 20pt;
    }

    #findme {
        height: 200pt;
    }
}

支持的CSS术语

颜色

颜色值支持缩写十六进制、十六进制、rgb、rgba、hsl、hsla和100多个命名字符，与CSS相同

background-color: #fc0;
background-color: #00ff00;
background-color: rgb(120, 120, 255);
background-color: rgba(255, 255, 255, 0.8);
background-color: hsl(120, 100%, 100%);
background-color: hsla(120, 100%, 100%, 1);
background-color: blue

尺寸值

由于像素在iOS中并不是一件真正的事情，这个框架主要关心数字而不是任何其他字符，请随意使用以下语法

left: 100pt;
left: 100;

背景颜色

背景颜色支持缩写十六进制、十六进制、rgb、rgba、hsl、hsla和100多个命名字符，与CSS相同

边框颜色

边框颜色支持缩写十六进制、十六进制、rgb、rgba、hsl、hsla和100多个命名字符，与CSS相同

边框颜色

边框颜色支持缩写十六进制、十六进制、rgb、rgba、hsl、hsla和100多个命名字符，与CSS相同

此处输入的数字将被转换为像素。

定位

此处输入的数字将被转换为像素。当直接指定时，将在视图和其父视图之间制作约束。

或者，您可以指定一个特定的视图，该视图 wish to have a margin against。请注意：这将会与它找到的第一个具有该类/ID的视图进行匹配。

示例

.test {
    left: from(#someID, 10); /* gives a left-margin of 10 points from the view with an ID of "someID"*/
    left: from(.someClass, 10); /* gives a left-margin of 10 points from the view with an className of "someClass"*/
}

center-<x|y>

您可以指定一个特定的视图，该视图 wish to have a margin against。请注意：这将会与它找到的第一个具有该类/ID的视图进行匹配。

示例

.test {
    center-x: with(#someID); /* gives a center horizontal constraint with the new view that matches the ID of "someID"*/
    center-y: with(.someClass); /* gives a center horizontal constraint with the new view that matches the class of "someClass"*/
}

<height|width>

为视图创建高度和/或宽度约束。