less命名空间示例

gistfile1.txt

@import "mixins.less";
// Prefix
@che300-prefix : che300;
@che300-prefix-css :~"@{che300-prefix}-css";
@che300-prefix-btn :~"@{che300-prefix}-btn";
@che300-prefix-tag :~"@{che300-prefix}-tag";
@che300-prefix-pricing :~"@{che300-prefix}-pricing";

// Color
@primary-color : #f6f7fb;
@grey-color-1 : #E4E7EC;

// Button
.@{che300-prefix-btn}-primary {
    width: 112px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.@{che300-prefix-btn}-primary {
    width: 112px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
}

.@{che300-prefix-btn}-minor {
    width: 112px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    border-color: #7a8999;
    color: #7a8999;
}

.@{che300-prefix-btn}-minor:hover {
    border-color: #7a8999;
    background-color: #7a8999;
    color: #fff;
}

.@{che300-prefix-btn}-grey {
    width: 112px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #fff;
    border-color: #a3b6cc;
    background-color: #a3b6cc;
}

.@{che300-prefix-btn}-grey:hover {
    background-color: #adc2d9;
    border-color: #adc2d9;
    color: #fff;
}

.@{che300-prefix-btn}-grey:focus {
    background-color: #adc2d9;
    border-color: #adc2d9;
    color: #fff;
}

// Tag
.@{che300-prefix-tag}-base {
    font-size: 12px;
    color: #7a8899;
    display: inline-block;
    background: #e9eef5;
    border: 1px solid #e9eef5;
    cursor: default;
}

// Css
.@{che300-prefix-css}-relative {
	position: relative;
}

// Pricingcontent
.@{che300-prefix-pricing}-title {
	font-size: 25px;
}