zoukankan      html  css  js  c++  java
  • less03 混合

    less

    //基本混合
    .font_hn{
      color: red;
      font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
    }
    h1{
      font-size: 28px;
      .font_hn;
    }
    h2{
      font-size: 24px;
      .font_hn;
    }
    //不带输出的混合,类名后面使用()
    .font_hn(){
      color: red;
      font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
    }
    h1{
      font-size: 28px;
      .font_hn;
    }
    h2{
      font-size: 24px;
      .font_hn;
    }
    
    //带选择器的混合
    .my-hover-mixin {
      &:hover {        //&代表父级
        border: 1px solid red;
      }
    }
    button {
      .my-hover-mixin();
    }
    h1{
      .my-hover-mixin();
    }
    
    //带参数的混合,这个样式不输出
    .border(@color){
      border: 1px solid @color;
    }
    h1{
      &:hover{
        .border(green);
      }
    }
    h2{
      &:hover{
        .border(#000);
      }
    }
    /*带参数并且有默认值的混合*/
    //带参数并且有默认值的混合
    .border_you(@color:red){
      border: 1px solid @color;
    }
    h1{
      &:hover{
        .border_you();
      }
    }
    h2{
      &:hover{
        .border_you(yellow);
      }
    }
    /*带多个参数的混合*/
    //带多个参数的混合
    .mixin(@color; @padding:xxx; @margin: 2) {
      color-3: @color;
      padding-3: @padding;
      margin: @margin @margin @margin @margin;
    }
    .divmaizi{
      .mixin(red;)
    }
    
    
    .divmaizi {
      .mixin(1,2,3;something, ele;132);
    }
    .divmaizi {
      .mixin(1,2,3);    //3个参数
    }
    .divmaizi {
      .mixin(1,2,3;);    //一个参数
    }
    
    //如果传参的括号里面全部都是以“,”分割,那么会依次传给各个参数值,
    //如果传参的括号里面既有“,”又有“;”那么,会把“;”前面的看作一个整体,传给一个参数值
    
    /*定义多个具有相同名称和参数数量的混合*/
    .mixin(@color) {
      color-1: @color;
    }
    .mixin(@color; @padding:2) {
      color-2: @color;
      padding-2: @padding;
    }
    .mixin(@color; @padding; @margin: 2) {
      color-3: @color;
      padding-3: @padding;
      margin: @margin @margin @margin @margin;
    }
    
    .some .selector div {
      .mixin(#008000);
    }
    
    //命名参数
    /*命名参数*/
    
    .mixin(@color: black; @margin: 10px; @padding: 20px) {
      color: @color;
      margin: @margin;
      padding: @padding;
    }
    
    .class1 {
      .mixin(@margin: 20px; @color: #33acfe);
    }
    .class2 {
      .mixin(#efca44; @padding: 40px);//根据参数类型传值不根据位置传值
    }
    .class3{
      .mixin(@padding: 80px;)
    }
    
    /*@arguments所有可变参数*/
    .border(@x:solid,@c:red){
      border: 21px @arguments;
    }
    .div1{
      .border(solid);
    }
    
    //
    .border(all,@w: 5px){
      border-radius: @w;
    }
    .border(t_l,@w:5px){
      border-top-left-radius: @w;
    }
    .border(t_r,@w:5px){
      border-top-right-radius: @w;
    }
    .border(b-l,@w:5px){
      border-bottom-left-radius: @w;
    }
    .border(b-r,@w:5px){
      border-bottom-right-radius: @w;
    }
    
    footer{
      .border(t_l,10px);
      .border(b-r,10px);
      background: #33acfe;
    }
    
    //混合的返回值
    .average(@x, @y) {
      @average: ((@x + @y) / 2);
      @he:(@x + @y);
    }
    
    div {
      .average(16px, 50px);
      padding: @average;
      margin: @he;
    }

    css

    .font_hn {
      color: red;
      font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
    }
    h1 {
      font-size: 28px;
      color: red;
      font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
    }
    h2 {
      font-size: 24px;
      color: red;
      font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
    }
    h1 {
      font-size: 28px;
      color: red;
      font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
    }
    h2 {
      font-size: 24px;
      color: red;
      font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
    }
    .my-hover-mixin:hover {
      border: 1px solid red;
    }
    button:hover {
      border: 1px solid red;
    }
    h1:hover {
      border: 1px solid red;
    }
    h1:hover {
      border: 1px solid #008000;
      border: 21px #008000 #ff0000;
    }
    h2:hover {
      border: 1px solid #000000;
      border: 21px #000000 #ff0000;
    }
    /*带参数并且有默认值的混合*/
    h1:hover {
      border: 1px solid #ff0000;
    }
    h2:hover {
      border: 1px solid #ffff00;
    }
    /*带多个参数的混合*/
    .divmaizi {
      color: 1, 2, 3;
      margin: 10px;
      padding: 20px;
    }
    /*定义多个具有相同名称和参数数量的混合*/
    /*命名参数*/
    .class1 {
      color: #33acfe;
      margin: 20px;
      padding: 20px;
    }
    .class2 {
      color: #efca44;
      margin: 10px;
      padding: 40px;
    }
    .class3 {
      color: #000000;
      margin: 10px;
      padding: 80px;
    }
    /*@arguments;*/
    .div1 {
      border: 1px solid solid;
      border: 21px solid #ff0000;
    }
    footer {
      border: 21px t_l 10px;
      border-top-left-radius: 10px;
      border: 21px b-r 10px;
      border-bottom-right-radius: 10px;
      background: #33acfe;
    }
    div {
      padding: 33px;
      margin: 66px;
    }

     less

    //传统写法
    //header{
    //  width: 960px;
    //}
    //header h1 {
    //  font-size: 18px;
    //  color: green;
    //}
    //header .logo{
    //  width: 300px;
    //  height: 150px;
    //  background: darkred;
    //}
    //header .logo:hover{
    //  background: forestgreen;
    //}
    
    //less写法
    //header{
    //  width: 960px;
    //  h1{
    //    font-size: 18px;
    //    color: green;
    //  }
    //  .logo{
    //    width: 300px;
    //    height: 150px;
    //    background: darkred;
    //    &:hover{
    //      background: forestgreen;
    //    }
    //  }
    //}
    
    .a{
      .b{
        .c{
          color: 123;
        }
      }
    }
    .a{
      .b{
        .c&{  //把&放在所有父类的前面去
          color: 123;
        }
      }
    }
    
    p, a, ul, li {
      border-top: 2px dotted #366;
      &   & {
        border-top: 0;
      }
    }
    
    a , b ,c{
      &   &  & {
        border-top: 0;
      }
    }

    css

    .a .b .c {
      color: 123;
    }
    .c.a .b {
      color: 123;
    }
    p,
    a,
    ul,
    li {
      border-top: 2px dotted #366;
    }
    p p,
    p a,
    p ul,
    p li,
    a p,
    a a,
    a ul,
    a li,
    ul p,
    ul a,
    ul ul,
    ul li,
    li p,
    li a,
    li ul,
    li li {
      border-top: 0;
    }
    a a a,
    a a b,
    a a c,
    a b a,
    a b b,
    a b c,
    a c a,
    a c b,
    a c c,
    b a a,
    b a b,
    b a c,
    b b a,
    b b b,
    b b c,
    b c a,
    b c b,
    b c c,
    c a a,
    c a b,
    c a c,
    c b a,
    c b b,
    c b c,
    c c a,
    c c b,
    c c c {
      border-top: 0;
    }
  • 相关阅读:
    触发器
    自定义变量
    系统变量
    Interval 计时器
    Ajax 之 DWR
    cssTest
    Ajax之XMLHttpRequst对象
    添加页面元素
    jquery 基础
    jQuery 自定义动画效果
  • 原文地址:https://www.cnblogs.com/yaowen/p/6999954.html
Copyright © 2011-2022 走看看