less

            @base-bg: #ddd;
            @base-text: red;
            @base-url: "http://assets.fnord.com";
            @base-font:14px;
            .headr{
                background-image: url("@{base-url}/images/bg.png");
            }
            .border-radius (@radius: 4px) {
                border-radius: @radius;
                -moz-border-radius: @radius;
                -webkit-border-radius: @radius;
            }
            .box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
                /* box-shadow: 2px 5px 1px #000; */
                box-shadow: @arguments;
                -moz-box-shadow: @arguments;
                -webkit-box-shadow: @arguments;
            }
            .margin(@t: 0px, @r: 0px, @b: 5px, @l:0px){
                margin:@arguments;
            }
            .transform(@l: 0px, @t: 0px, @ml: 0px, @mt: 0px) {
                position: absolute;
                left: @l;
                top: @t;
                translate(@ml, @mt);
                -moz-translate(@ml, @mt);
                -webkit-translate(@ml, @mt);
            }
            .btn-default(@bg: #f4f4f4, @color: #fff) {
                color: @color;
                background: @bg;
                .border-radius;
            }
            .btn {
              &-success {
                .btn-default(green);
              }
              &-danger {
                .btn-default(red);
              }
            }
            .base-columns(4);
            .base-columns(@n, @i: 1) when (@i =< @n) { 
              .column-@{i} {
                width: (@i * 100% / @n); 
              }
              .base-columns(@n, (@i + 1));
            }
            /*生成
               .column-1{width:25%}
               .column-2{width:50%}
               .column-3{width:75%}
               .column-4{width:100%}
            */
           
           .base-font(4);
           .base-font(@n,@i:0) when (@i =< @n ) {
               .font-@{i} {
                   font-size: (@base-font + @i);
               }
               .base-font(@n,(@i + 1 ));
           }
           /*生成
              .font-1{font-size:15px}
              .font-2{font-size:16px}
              .font-3{font-size:17px}
              .font-4{font-size:18px}
              .font-5{font-size:19px}
           */

 

 

 

        <script>
            less: https://www.bootcss.com/p/lesscss/
            嵌套属性:
                &表示父选择器 
                &:extend ,
                &.
                &+&表示？ 
            变量:@
                @color:#4D926F; (相同变量名不可重复定义)  //样式一样,值不一样【单个样式】
            计算:
            插值 @{}
              ->结合字符串 background-image: url("@{base-url}/images/bg.png")
            定义class属性集合,在其他class中引用   //样式一样,值不一样【混合样式】
              有带参数: .border-radius(@radius: 5px)
              无带参数: .border-radius()
              使用: .border-radius或.border-radius(50px)
            通过条件设置 :
            循环: 生成一系列%宽,
            .mixin :
        </script> 
        <script>
            sass:http://sass.bootcss.com/docs/sass-reference/#interpolation_
            嵌套属性:
            变量:$
                $color:#4D926F !default;
                变量默认值!default ;
            计算:
            插值:#{} 包裹,
               ->在选择器和属性名称p.#{$name} 
               ->计算#{$font-size}/#{$line-height};
               ->结合字符串 background-image: url("@{base-url}/images/bg.png")
            指令:
                @extend 继承样式
                @if , @else
                @for      ; @for $i from 1 through 3 { }
                @each     ; @each $animal in puma, sea-slug, egret, salamander {}
                @while    ; @while #i<7 { }
                 
                @mixin
                  1.定义css属性集合
                    有带参数:@mixin border-radius($radius) {},
                    无带参数:@mixin border-radius(){}
                  2.
                @include 使用@mixin
                    @include border-radius(0px 4px 5px #666)
                @content
                @function , @return
                
        </script>