Mark Otto（马克奥托）的BootStrap.less
作者：大漠 日期：2011-08-31 点击：564
前面在《CSS——Bootstrap From Twitter》和《CSS——LESS》中介绍了Mark Otto（马克奥托）写的《BootStrap from twitter》以及Alexis Sellier写的LESS。前者Mark Otto（马克奥托）给我们介绍了一种关于前端开发的一种全新的思维，让我们每个项目中减少很多重复性的工作，提高我们工作的效率，而且能更好的管理我们的代码，而Alexis Sellier的LESS能让我们的CSS代码更简洁，特别是针对于CSS3的样式，让我们不在需要为了每一个浏览器而加上他们的前缀了。那么今天我想把Mark Otto（马克奥托）写的另一个东西推荐给大家，那就是BootStrap.less。
下面我们就一起跟着Mark Otto（马克奥托）的思路把twitter中运用BootStrap.less的几大亮点呈现给大家
Mark Otto（马克奥托）介绍的Twitter中应用的bootstrap.less主要亮点有两部份：Mixins和Variables。下面我们先来看比较简单的一部分：
Variables
大家都知道，在CSS中是没有变量这么一个概念存在的，但在Less中，变量是一个很有用的库，前面在《CSS——LESS>》也对变量进行过详细的介绍。BootStrap中用了一组的完美变量用到一些项目中，用这个当实例来介绍如何使用Variables是很有意思的。当然真正的Bootstrap.less变量部分不单单是颜色这一块，我们先来看一下这里面的几个有典型 地方。
1、Links（链接）
链接颜色的样式对于大家来说很简单的，其实他就一个值，如：
//Links @linkColor: #8b59c2; @linkColorHover: darken(@linkColor,10%);
注：上面的“@linkColorHover”使用了Less中的另一个工具“function”，这样他能自动的为“a:hover”创建颜色。Less中对颜色的function包含了“darken”，“lighten”，“saturate”，“desaturate”，“fadein”，“fadeout”和“spin”。具体的大家可以点击这里。
2、Color Scheme（配色方案）
在你的Web项目中，使用Less的Variables更好的管理你的颜色。如：
//Gray @white: #fff; @grayLighter: #ccc; @grayLight: #777; @gray: #555; @grayDark: #333; @black: #000; //Accent Colors @blue: #08b5fb; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; @orange: #f89406; @pink: #c3325f; @purple: #7a43b6;
3、Baseline（基线）
在Bootstrap中并没有完全应用上这个Baseline，不过@baseline在任何项目中都有助于简化你的间距等控制，比如说width,height,padding,margin,line-height等，可以看看下在的实例：
@baseline: 20px;
使用@baseline很简单：
#exampleBlock {
width: @baseline * 20;//400px
margin-bottom: @baseline / 2;//10px
padding: @baseline; //20px
line-height: @baseline - 2; //18px
}
Mixins
Mixins是BootStrap应用Less的另一个亮点。Mixins在CSS的基础上，将样式进行嵌套，这样可以将一套样式合并成一个，这个用得最强最有亮点的地方就是使用在CSS3属性上，减少对浏览器版本的区别，下面我们一起跟着Mark Otto（马克奥托）学习Bootstrap.less是如何灵活的应用Less的Mixins。另外有关于Mixins更多介绍，大家可以去浏览前一篇《CSS——LESS》中的Mixins部分。
1、Rounding Corners（圆角）
CSS3中有一个属性border-radius可以让元素具有圆角效果，那么Bootstrap中了使用了一个".border-radius"来写圆角的样式，Bootstrap.less是这样写的代码：
.border-radius(@radius:6px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
//你还可不设置默认参数,这种方式在应用中一定要加上参数值，如.border-radius(5px);
.border-radius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
应用到元素中也很简单
#exampleBox {
.border-radius;
}
如果你想让你的圆角只在某个角有，还可以这样使用
#exampleBox {
.border-radius(3px 0 0 10px);
}
Compiled Css Code:
#exampleBox {
-moz-border-radius:3px 0 0 10px;
-webkit-border-radius:3px 0 0 10px;
border-radius:3px 0 0 10px;
}
2、Shadows（阴影）
阴影在CSS3中有两种，一种是text-shadow(文字阴影)，另一种是box-shadow（盒子阴影）。那么也可以像border-radius一样，我们使用一个“.text-shadow”和“.box-shadow”，有一点需要注意，为了更好的使阴影色容入到背景中，最好使用rgba色，具体如下：
.text-shadow(@shadow: 0 1px 0 rgba(0,0,0,0.25)){
text-shadow: @shadow;
}
.box-shadow(@shadow: 0 1px 0 rgba(0,0,0,0.25)) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
应用也是一样的，
#exampleBox {
.text-shadow(0 1px 2px rgba(125,125,125,0.3));
.box-shadow(0 1px 3px rgba(255,255,120,0.5));
}
Compiled Css Code:
#exampleBox {
-webkit-box-shadow: 0 1px 3px rgba(255, 255, 120, 0.5);
-moz-box-shadow: 0 1px 3px rgba(255, 255, 120, 0.5);
box-shadow: 0 1px 3px rgba(255, 255, 120, 0.5);
text-shadow: 0 1px 2px rgba(125, 125, 125, 0.3);
}
3、Gradients（渐变）
Gradients应用相对来说复杂一点，因为Gradients在CSS3中就是一个比较复杂的属性之一，特别是多色的使用，那么Bootstrap是怎么写的呢？大家一起来看代码将更清楚：
// Gradients
#gradient {
.horizontal (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
}
.vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@startColor, @endColor); // The standard
}
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: @endColor;
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -moz-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
}
}
接着我们来看如何运用到元素中：
#horizontalBox {
#gradient > .horizontal(#f36,#c36);
}
#verticalBox {
#gradient > .vertical(#f36,#36c);
}
#directionalBox {
#gradient > .directional(#369,#f36,30deg);
}
#vertical-three-colors {
#gradient > .vertical-three-colors(#00B3EE, #7553B6, 30%, #C3325F);
}
当然你也可以在这个基础上进行更多的颜色设置，只要不让他失控就行了。
4、Transitions
接着我们在来看看Transitions
.transition(@transition:all .5s linear 1s){
-webkit-transition: @transition;
-o-transition: @transition;
-moz-transition: @transition;
transition: @transition;
}
具体使用
a {
.transition(all 0.3s ease-in 1s);
}
5、其他CSS3写法
CSS3有很多种，大家完全可以按照这产的思路来写，下面在说几个常见的属性：
// Background clipping
.background-clip(@clip) {
-webkit-background-clip: @clip;
-moz-background-clip: @clip;
background-clip: @clip;
}
// CSS3 Content Columns
.content-columns(@columnCount, @columnGap: 20px) {
-webkit-column-count: @columnCount;
-moz-column-count: @columnCount;
column-count: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-gap: @columnGap;
column-gap: @columnGap;
}
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
有关于CSS3有很多属性，大家可以自己去写属于你的CSS3的less文件，我将会在后面针对CSS3写一份更详细的CSS3.less，感兴趣的朋友，可以观注本站的有关更新。
6。Simple Clearfix
这里需要介绍一种更简单的清除浮动方法，假如你在写html时，不记得在div中加入class="clearfix"，那么你也不用着急，Less中有一种更简单的方法让你实现：
// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix {
zoom: 1;
&:before, &:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
看一个简单的实例，如：
<div class="container"> <div class="box fl" id="horizontalBox">test</div> <div class="box fl" id="verticalBox">test</div> </div>
如上面的模板，里面的div.box都进行了左浮动，而在div.container又不记得了加上clearfix类，那么我们就可以这样应用Less中的.clearfix:
.container {
.clearfix;
}
6、制作透明色
大家都知道CSS3中用ＲＧＢ来制作透明色，但在Less中有一个更好的方法，他是将颜色转换成HSL色，然后在加上一个颜色通道，如：
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
.background(@color: @white, @alpha: 1) {
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
background-clip: padding-box;
}
}
具体使用，只要这样：
.container {
#translucent > .background(@blue, 0.5);
div {
#translucent > .background(#900, 0.5);
}
}
7、Font Stacks
设置sans-serif,serif,monospace等内置字体：
#font {
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
font-family: "Georgia", Times New Roman, Times, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
font-family: "Monaco", Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
}
8、Buttons制作
Less可以让我们制作出一种随时随地更换buttons的相关参数，从而制作出不同效果的buttons
// Buttons
.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @rounded: 6px) {
display: inline-block;
.gradient(@color,darken(saturate(@color,10),10));
padding: @padding;
text-shadow: @textShadow;
color: @textColor;
font-size: @fontSize;
line-height: 20px;
.rounded(6px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
.box-shadow(@shadow);
&:hover {
background-position: 0 -15px;
color: @textColor;
text-decoration: none;
}
}
这样我们就可以像下面这样创建不同的buttons
a.button {
.button();
&.purple {
.button(@purple,#fff,0 -1px 1px rgba(0,0,0,.4));
}
&.blue {
.button(@blue,#fff,0 -1px 1px rgba(0,0,0,.4));
}
}
9、Grids
网格具体的就不说了，我在前面说过好几回了，这里就要让大家一起看看Less如何制作Grids
// Grid System
@gridColumns: 16;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
.container {
width: @siteWidth;
margin: 0 auto;
.clearfix();
}
.columns(@columnSpan: 1) {
display: inline;
float: left;
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
margin-left: @gridGutterWidth;
&:first-child {
margin-left: 0;
}
}
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}
也可以根据上面的原理制作不同的grids
// Gimme a grid!
@gridColumns: 11;
@gridColumnWidth: 40px;
@gridGutterWidth: 20px;
div.grid {
.container;
div.span1 { .columns(1); }
div.span2 { .columns(2); }
...
div.span11 { .columns(11); }
}
上面就是BootStrap中使用Less的几大亮点，如果大家对这个感兴趣，可以下载BootStrap源码学习一下，下载可以点Bootstrap on GitHub »。如果你对BootStrap和Less还不知道是什么东西，我建议你先看看：《CSS——Bootstrap From Twitter》和《CSS——LESS》。希望读完以后你会喜欢上他们，并能应用他们到你的项目中。如果我有更好的想法，记得告诉我。
最后要非常感谢来自twitter的Mark Otto（马克奥托）给我们带来这么精彩的内容《Bootstrap.less》。
如需转载烦请注明出处：W3CPLUS
