Mark Otto（马克奥托）的BootStrap.less

破晓 · 发表于 2016-8-18 16:20:28

来源：http://www.w3cplus.com/blog/123.html

前面在《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

帐号		自动登录	找回密码
密码			立即注册

[LESS] Mark Otto（马克奥托）的BootStrap.less

Variables

Mixins

开源英雄

守望者

站长推荐 /4