守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 379|回复: 0

[LESS] Mark Otto(马克奥托)的BootStrap.less

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51789
    钢镚
    1422

    开源英雄守望者

    发表于 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 SellierLESS能让我们的CSS代码更简洁,特别是针对于CSS3的样式,让我们不在需要为了每一个浏览器而加上他们的前缀了。那么今天我想把Mark Otto(马克奥托)写的另一个东西推荐给大家,那就是BootStrap.less。

    下面我们就一起跟着Mark Otto(马克奥托)的思路把twitter中运用BootStrap.less的几大亮点呈现给大家

    Mark Otto(马克奥托)介绍的Twitter中应用的bootstrap.less主要亮点有两部份:MixinsVariables。下面我们先来看比较简单的一部分:

    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中用RGB来制作透明色,但在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》。希望读完以后你会喜欢上他们,并能应用他们到你的项目中。如果我有更好的想法,记得告诉我。

    最后要非常感谢来自twitterMark Otto(马克奥托)给我们带来这么精彩的内容《Bootstrap.less》。

    如需转载烦请注明出处:W3CPLUS

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-11-19 02:26 , Processed in 0.042539 second(s), 31 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表