directorio
1.4 estilo menos directo puede ser heredado en otros selectores
1.5 valores predeterminados Mixin y parámetros inciertos
1.6 condición de determinación Mixin
2.2 utilizando ventaja anidada
1. Mix (Mixin)
1.1 Definición de Mixin
Mixin se define como sitio web menos oficial: mezcla (Mixin) A es un conjunto de atributos a partir de un conjunto de reglas que comprenden un método de acuerdo con otro conjunto de reglas (o mixta) a.
Pero me siento un poco difícil de entender este argumento, podemos entender fácilmente que la función se puede encapsular código CSS, llamado en otro selector, mejorar la reutilización y la mantenibilidad del código.
Mixins poco como una función, en la definición, por insultos. (También es compatible con la transmisión de parámetros dinámicos)
Usted puede mezclar una clase definida Una introducción relajado a otra clase B con el fin de lograr una clase simple hereda B todos los atributos de la clase A, también podemos tomar los parámetros de llamada, sólo tiene que utilizar la misma función
Mira un ejemplo sencillo:
.color {
background-color:#58a;
color:18px;
}La aplicación de esta clase (clase)
.box {
width:100px;
height:50px;
.color();
}
.wrap {
width:100px;
height:50px;
border:1px solid red;
.color();
}De esta manera, el color se puede aplicar a la clase de la .box y .Wrap ..
A continuación se detallan los métodos específicos definidos e invocados Mixins como mirada.
1.2 Definición de Mixin
Hay dos maneras de mezcla definidos, uno es para definir los parámetros, se definen los otros parámetros.
-
No hay parámetros definidos
Nombre mixta () {
paquete de código css
}
-
Definición de los parámetros
nombres compuesto (1 @ parámetros: valor predeterminado del parámetro, el parámetro @ 2: ...... valor predeterminado del parámetro). {
paquete de código css
}
1.3 llamadas mixta
gramática
selector {
Nombre mixta (@ parámetros)
}
// 使用混入
@baseColor: #369;
.box p {
.error(@baseColor, 30px)
}ejemplo llamadas
Es de destacar que, en ausencia de parámetros, también puede llamar sin paréntesis.
.size {
width: 100px;
height: 100px;
border:1px solid green;
}
#box{
.size(); //加括号调用
background-color: #58a;
}
.wrap {
.size; //没有参数的情况下不加括号也可以
background-color: skyblue;
}Si necesita parámetros dinámicos Mixin, debe pasar parámetros entre paréntesis:
.init(@width,@height,@color) {
width:@width;
height: @height;
color:@color;
}
@width:200px;
@height:200px;
@color:red;
.box1{
.init(@width, @height, @color);
background-color: skyblue;
}
.wrap {
.init(300px,100px,red);
border:1px solid blue;
}Los resultados son como sigue:
1.4 estilo menos directo puede ser heredado en otros selectores
.box {
width:100px;
height:100px;
color:white;
}
.wrap {
.box; //.wrap会直接继承.box中已写的样式
backgorund-color:blue;
}Mixin además de escribir selección de estilo, también puede escribir las variables
//Mixin里除了可以写样式,选择器, 还可以写变量
.mixin() {
@width: 100%;
@height: 200px;
}
.box1 {
.mixin();
width: @width;
height: @height;
border:1px solid red;
}Además Mixin a las variables que regresan también puede devolver Mixin.
// Mixins 里除了返回变量,还可以返回Mixins
#box(@color){
.wrap(){
width:500px;
height:100px;
background:@color;
}
}
.box1{
#box(red); // 执行第一个Mixin是为了能够使用里面的Mixin
.wrap(); // 第二个执行Mixin里面的Mixin
}3.5 selector se puede utilizar en el Mixin
.hover(@color){
&:hover{
background:@color;
}
}
.wrap{
width: 100px;
height: 100px;
background: red;
&:hover > span{ //注意在此处的&与冒号之间不能有空格,等价 于.wrap:hover >span
background:skyblue;
}
// .hover(skyblue) //如果只是当前元素添加hover效果,而不是给当前元素的子元素或兄弟元素添加,那么&可省略
}estilo complemento solo para vuelo estacionario elemento de caja
.hover(@color){
&:hover{
background:@color;
}
}
.box1{
width: 200px;
height: 200px;
margin-top:20px;
background: skyblue;
&:hover{
background:red;
}
// .hover(red); //上下两种弄方式等效
}1.5 valores predeterminados Mixin y parámetros inciertos
-
Por defecto:
mixin puede utilizar el valor por defecto, si en ausencia de argumentos pasados, entonces el valor por defecto.
Si no se establece el valor predeterminado, el valor se da en la Mixin sin parámetros, un valor predeterminado es igual al número de argumentos pasados y el número de parámetros debe ser proporcionado cuando el.
.size(@width : 100px, @height : 100px , @color : pink){
width: @width;
height: @height;
background-color: @color;
}
.box1 {
.size(50px,50px,#58a); //使用自己所传入的参数
border:3px solid pink;
}
.wrap {
.size; //使用已经设置的默认参数
color:#fff;
}-
parámetros inciertos
... se @reset parámetros restantes, se añadirán todos los parámetros a los restantes están en @arguments
// ... 就是@reset 剩余参数, 会将剩余的所有参数都加到@arguments里
.boxShadow(...){
box-shadow: @arguments;
}
.box1{
.boxShadow(1px,4px,30px,red);
}
// @arguments是处理第一个实参外的所有实参的集合
.boxShadow(@width,...){
box-shadow: @arguments;
}
.wrap{
.boxShadow( 50px,1px,4px,30px,red);
}Después de compilar los resultados en css:
.box1 {
box-shadow: 1px 4px 30px red;
}
.wrap {
box-shadow: 50px 1px 4px 30px red;
}
1.6 condición de determinación Mixin
Menos no es if / else, pero con una menor cuando, y no con "" sintaxis.
1. cuando se expresa cuando se utiliza Mixin Cuando se debe cumplir esta última condición
#box(@width, @height, @color) when (@width > 100px){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(101px,50px,pink)
}2. Si hay dos condiciones se deben cumplir, y el uso
// 这里必须满足传递的宽度和颜色必须同时同满足条件才能执行Mixin
#box(@width, @height, @color) when (@width > 100px) and (@color = pink){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(100px,50px,skyblue)
}3. Si necesita excluir ciertas condiciones con el fin de utilizar Mixin, no utilizar
// 这里排除颜色为pink ,除了pink颜色值都可以运行Mixin
#box(@width, @height, @color) when not (@color = pink){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(100px,50px,skyblue)
}4. Si se requiere una pluralidad de condiciones, siempre y cuando la aplicación Mixin, comas
// 虽然不满足宽度大于等于100px,但是满足为了颜色是skyblue 所以Mixin会执行
#box(@width, @height, @color) when (@width >= 100px),(@color = skyblue){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(50px,50px,skyblue)
}Coincidencia de 1.7 Patrón
Estilo de visualización de acuerdo a condiciones similares a JS en el interruptor, en algunos casos, queremos cambiar la representación predeterminada mezclar en base a los parámetros pasados.
Por ejemplo:
Equivalente a la misma definición de un nombre híbrido, dependiendo de la mezcla de otros nombres entrantes realizar diferentes puntos de mezcla, pero hay una rama común, se llamará ninguna rama
_ Representatividad de ajuste de todo, a menudo se utiliza para definir una parte común
sintaxis:
definiciones coincidencia de patrones
sección pública
.fun (@_, @color) {
// se ejecutará parte común de cualquiera de las ramas
}
.fun (s1, @ color) {
// rama s1 códigos únicos
}
Uso coincidencia de patrones
h1 {
.fun (s2, @color)
}
// 三角形公用代码
.sjx(@_, @color, @size) {
width: 0;
left: 0;
display: block;
border: @size solid transparent;
}
// 左三角形
.sjx(l, @color, @size) {
border-left-color: @color;
}
// 右三角形
.sjx(r, @color, @size) {
border-right-color: @color;
}
// 上三角形
.sjx(t, @color, @size) {
border-top-color: @color;
}
// 下三角形
.sjx(b, @color, @size) {
border-bottom-color: @color;
}
.trangle1 {
.sjx(t,#00a8ff, 20px) //通过传入不同的参数来产生不同方向的三角形
}
.trangle2 {
.sjx(b, pink, 20px)
}
.trangle3 {
.sjx(r, purple, 20px)
}
.trangle4 {
.sjx(l,#4cd137, 20px)
} 
2. Nesting (importante)
2.1 Definiciones anidados
estilos CSS tienen una relación jerárquica, la jerarquía CSS está determinada por la estructura de HTML.
2.2 utilizando ventaja anidada
-
Para su uso en la selección de la progenie que tiene la relación entre padres e hijos y la relación
-
Reducir la cantidad de código,
-
estructura de código más claro
Ejemplo 2.3
.border {
border:1px solid #58a;
}
.container {
width: 200px;
height: 300px;
.border();
ul {
list-style: none;
padding:0;
margin:0;
.border();
li {
width: 100px;
height: 80px;
background-color: khaki;
margin-top:20px;
span {
font-size: 20px;
color:green;
}
}
}
.box {
width: 200px;
height: 50px;
.border();
margin-top:30px;
background-color: lightcoral;
}
}Después de compilar el código CSS:
.border {
border: 1px solid #58a;
}
.container {
width: 200px;
height: 300px;
border: 1px solid #58a;
}
.container ul {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #58a;
}
.container ul li {
width: 100px;
height: 80px;
background-color: khaki;
margin-top: 20px;
}
.container ul li span {
font-size: 20px;
color: green;
}
.container .box {
width: 200px;
height: 50px;
border: 1px solid #58a;
margin-top: 30px;
background-color: lightcoral;
}
