css预处理技术有哪些 mixin

html-css016

css预处理技术有哪些 mixin,第1张

css预处理技术有哪些 mixin

<div class="control-group">

<label class="control-label" for="inputPassword">密码</label>

<div class="controls">

<input type="password" id="inputPassword" check-type="required" required-message="密码不能为空!" ></div>

</div>

<div class="control-group">

<div class="controls">

<button type="submit" class="btn">登录</button>

</div>

</div>

</form>

</div>

在bootstrap基础上,在input中

check-type 为需要验证的规则,可以绑定多个规则,之间用空格隔开。

required-message 为验证为通过显示的信息,在这里 required-message 的’-'之前为前面定义的验证规则名称。

在 Less 中, 我们可以定义一种叫 “mixins” 的东西 —— 和编程语言中的函数有一点的相似。

在 Less 中, 它被用来灵活的组件化 CSS 中可重复使用的 class。 Mixin 允许你把一个 class 的所有属性嵌入到另外的一个 class 中 —— 就像它的一个属性一样, 仅仅通过简单的 include class 的名字。 它仅仅是一个变量,但是拥有一个 class 的属性。 任何的 CSS class 和 id 规则都可以混在里面。

.round-borders {

border-radius: 5px

-moz-border-radius: 5px

-webkit-border-radius: 5px

}

#menu {

color: gray

.round-borders

}

// 输出

.round-borders {

border-radius: 5px

-moz-border-radius: 5px

-webkit-border-radius: 5px

}

#menu {

color: gray

border-radius: 5px

-moz-border-radius: 5px

-webkit-border-radius: 5px

}

function

函数是有计算逻辑,返回计算的结果,不输出css块

mixin

mixin主要是计算根据计算结果输出css块

使用场景可以以下面为原则:

extend 继承:管理样式

mixin :管理属性

function :管理(计算)值