zoukankan      html  css  js  c++  java
  • less中混合

    @charset "UTF-8";
    //1 普通混合
    //2 不带输出的混合:加()
    .font_hx(){
        font-size: 28px;
        color: red;
    }
    h1{
        font: "微软雅黑";
        .font_hx;
    }
    h2{
        font-size: 16px;
        .font_hx;
    }
    //3 带选择器的混合
    .font_hx(){
        font-size: 28px;
        color: red;
        &:hover{
            border: 1px solid blue;
        }
    }
    h1{
        font: "微软雅黑";
        .font_hx;
    }
    h2{
        font-size: 16px;
        .font_hx;
    }
    //4 带参数的混合/并且有默认值
    .font_hx(@color:black){
        color: @color;
    }
    h1{
        font: "微软雅黑";
        .font_hx(green);
    }
    h2{
        font-size: 16px;
        .font_hx(red);
        &:hover{
           border: 3px solid saddlebrown; 
        }
    }
    //5 带多个参数的混合
    .font_hx(@color;@padding:xxx;@margin:2){
        color-3: @color;
        padding-3:@padding;
        margin: @margin;
    }
    h1{
        font: "微软雅黑";
        .font_hx(red);
    }
    h2{
        font-size: 16px;
        .font_hx(blue);
    }
    //6 命名参数
    .font_hx(@color;@padding:xxx;@margin:2px){
        color-3: @color;
        padding-3:@padding;
        margin: @margin;
    }
    h1{
        font: "微软雅黑";
        .font_hx(@margin:1px;@color:red;@padding:10px);
    }
    h2{
        font-size: 16px;
        .font_hx(blue);
    }
    //7 @arguments变量,代表所有参数
    .font_hx(@color;@padding:xxx;@margin:2){
        color-3: @arguments;
        padding-3:@padding;
        margin: @margin;
    }
    h1{
        font: "微软雅黑";
        .font_hx(red);
    }
    h2{
        font-size: 16px;
        .font_hx(blue);
    }
    //匹配模式
    .border(all;@w:1px){
        border: @w;
    }
    .border(b-l;@w:1px){
        border-left: @w;
    }
    .border(b-r,@w:1px){
        border-right: @w;
    }
    h1{
        .border(b-l);//匹配不一样
    }
    //混合的返回值
    .average(@x,@y){
        @average:((@x+@y)/2);
        @sum:(@x+@y);
    }
    h1{
        .average(16px;10px);
        padding: @average;
        margin: @sum;
    }
  • 相关阅读:
    js手写弹框和按钮显示
    Java类加载机制、双亲委派、Java类加载过程
    Java集合:HashMap必知必会
    查看oracle是否锁表
    消息队列Rabbit MQ 学习第一篇
    数据库blob图片文件,多图片打包下载
    HttpDebug下载
    将博客搬至CSDN
    android事件拦截处理机制详解
    回调函数
  • 原文地址:https://www.cnblogs.com/by-dxm/p/6519293.html
Copyright © 2011-2022 走看看