WNS

wns ./examples/merge.wns -o ./tmp/styles.css --minify --reset

示例文件

page => page-name;

merge => ./some-file;

#foo => {
    display: flex;
    .bar => {
        display: block;
    }

    unsafe div => {
        background: red;
    }

    loose .baz => {
        text-align: center;
    }

    pseudo before => {
      background: #FFF;
    }
}

component => some;

.foo {
    text-align: left;
}

component => other {
    .floor {
        display: grid;
    }
    .ceiling {
        display: block;
    }
}

关键词

merge => ./relative; - 合并文件 ./relative.wns，合并内容始终在最后，只能在根作用域中声明

page => foo; - 所有选择器将以 #foo > 开始，这只能在根作用域中声明

component => foo; - 与页面类似，但不是设置前缀id，而是设置前缀类名

component => foo {} - 创建以类名作为标识符的新组，这只能在根作用域中允许

unsafe 选择器 {} - 关键字 unsafe 需要放在所有标签名之前

loose selector {} - 关键字 loose 将防止在父选择器和当前选择器之间放置 >，这对于类或id有效

pseudo selector {} - 关键字 pseudo 将选择器标记为伪类

rect: width height layourt; - 特殊规则，是 width、height 和可选的 display 的简写

WNS 到 CSS

main.wns

merge => landing;
merge => login;
merge => components;

着陆.wns

page => landing;

component => main {
    display: flex;
    
    .content {
        display: block;
    }
}

component => sidebar {
    rect: 160px auto block;
    background: rgb(156, 100, 23);
    color: white;
}

登录.wns

page => login;

component => form {
    rect: 180px auto block;
    margin: 10px auto;
}

组件.wns

component => input {
    padding: 5px;
    width: 160px;
    font-size: 16px;
    color: black;
}

component => label {
    padding: 5px;
    width: 160px;
    font-size: 16px;
    color: black;
}

输出.css

#landing > .main {
    display: flex;
}

#landing > .main > .content {
    display: block;
}

#login > .form {
    width: 180px;
    height: auto;
    display: block;
    margin: 10px auto;
}

.input {
    padding: 5px;
    width: 160px;
    font-size: 16px;
    color: black;
}

.label {
    padding: 5px;
    width: 160px;
    font-size: 16px;
    color: black;
}