通过bootstrap来学习less

前端开发作者： 2024-08-25 22:55:01

很早之前就听说过less了，但是一直拖着没去学习。最近抽空看了less，其实语法很简单，看一遍基本就知道怎么用了。平时自己写页面用less的话，感觉是方便了些，但是难道less的好处就只是这样？刚好

变量：

@color: #4D926F;

#header {
    color: @color;
}
h2 { @color;
}

#header { #4D926F;
} #4D926F;
}

混合（Mixins）

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius:
    -ms-border-radius:
    -o-border-radius:
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

 5px; 5px;
} 10px; 10px;
}

嵌套


    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px
            }
        }
    }
}

#header h1 {
    font-size:
    font-weight: bold;
}
#header p { 12px;
}
#header p a {
    text-decoration: none;
}
#header p a:hover {
    border-width: 1px;
}

函数和运算

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header { (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
} (@base-color + #003300);
    border-color: desaturate(@red,10%);
}

 #333; 1px; 2px;
} #114411; #7d2717;
}

// Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;

/*
.........省略部分.....................
*/

// Typography
// -------------------------
@sansFontFamily:        "Helvetica Neue",Helvetica,Arial,sans-serif;
@serifFontFamily:       Georgia,"Times New Roman",Times,serif;
@monoFontFamily:        Monaco,Menlo,Consolas,"Courier New",monospace;

@baseFontSize:          14px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        20px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    inherit; // empty to use BS default,@baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default,bold
@headingsColor:         inherit; // empty to use BS default,@textColor

// Base styles
// --------------------------------------------------

// Core
.btn {
  display: inline-block;
  .ie7-inline-block();
  padding: 4px 12px;
  margin-bottom: 0; // For input.btn
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  .buttonBackground(@btnBackground,@btnBackgroundHighlight,@grayDark,0 1px 1px rgba(255,.75));
  border: 1px solid @btnBorder;
  *border: // Remove the border to prevent IE7's black border on input:focus
  border-bottom-color: darken(@btnBorder,10%);
  .border-radius(@baseBorderRadius);
  .ie7-restore-left-whitespace(); // Give IE7 some love
  .box-shadow(~"inset 0 1px 0 rgba(255,.2),0 1px 2px rgba(0,.05)");

// Core variables and mixins
@import "variables.less";  Modify this for custom colors,font-sizes,etc
@import "mixins.less";

 CSS Reset
@import "reset.less" Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less" Base CSS
@import "type.less";
@import "code.less";
@import "forms.less";
@import "tables.less" Components: common
@import "sprites.less";
@import "dropdowns.less";
@import "wells.less";
@import "component-animations.less";
@import "close.less" Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less";  Note: alerts share common CSS with buttons and thus have styles in buttons.less

 Components: Nav
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less" Components: Popovers
@import "modals.less";
@import "tooltip.less";
@import "popovers.less" Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels-badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
@import "hero-unit.less" Utility classes
@import "utilities.less";  Has to be last to override when necessary