首页 > 其他 > 详细

通过开源文档学LESS(草稿)

时间:2014-02-07 17:03:40      阅读:386      评论:0      收藏:0      [点我收藏+]

1.引言

今天开始一个系列教程,通过一些国外开源LESS文档来学习LESS。这些开源http://的文档一般都是前端开发实际项目经验的总结,从中可以看出LESS的基本语法和日常使用,也可以从中管窥大牛开发者的智慧。

首先,我们来看一个开源项目Preboot,大家可以看看他的官方网站,或者到github中学习、下载中学习、下载本项目。作者Mark Otto,大家可以关注他的github

A collection of LESS mixins and variables for writing better CSS.

好的,言归正传。

2.代码解析

来吧,先看注释,注释的习惯要养成,要学会尊重别人的成果。有的时候灵感来源也可以一并写上,表示感谢。
/*!
 * Preboot v2
 *
 * Open sourced under MIT license by @mdo.
 * Some variables and mixins from Bootstrap (Apache 2 license).
 */
正文开始,首先是一些变量
//
// Variables
// --------------------------------------------------

// Grayscale
@black-10:                 darken(#fff, 10%);
@black-20:                 darken(#fff, 20%);
@black-30:                 darken(#fff, 30%);
@black-40:                 darken(#fff, 40%);
@black-50:                 darken(#fff, 50%);
@black-60:                 darken(#fff, 60%);
@black-70:                 darken(#fff, 70%);
@black-80:                 darken(#fff, 80%);
@black-90:                 darken(#fff, 90%);

// Brand colors
@brand-primary:           #428bca;
@brand-success:           #5cb85c;
@brand-warning:           #f0ad4e;
@brand-danger:            #d9534f;
@brand-info:              #5bc0de;

// Scaffolding
@body-background:         #fff;
@text-color:              @black-50;

// Links
@link-color:              @brand-primary;
@link-color-hover:        darken(@link-color, 15%);

// Typography
@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         @font-size-base * 1.25; // ~18px
@font-size-small:         @font-size-base * 0.85; // ~12px
@font-size-mini:          @font-size-base * 0.75; // ~11px

@line-height-base:        1.4;

@headings-font-family:    inherit; // empty to use BS default, @font-family-base
@headings-font-weight:    500;

// Forms
@input-color-placeholder: lighten(@text-color, 25%);

// Grid
// Used with the grid mixins below
@grid-columns:          12;
@grid-column-padding:   15px; // Left and right inner padding
@grid-float-breakpoint: 768px;

这里区块的注释的方式可以借鉴,有的时候也可以给区块加上标号,形成一个目录的方式。例如

//
// index
//-----------------------------------------
//  1.Variables
//  2.Grid system
//  3.Mixins: vendor prefixes


//
// 1.Variables
// --------------------------------------------------
全局变量的方式也可以借鉴,进行网站开发的时候可以这部分单独剥离出来,便于日后的更新与维护。



通过开源文档学LESS(草稿)

原文:http://blog.csdn.net/whqet/article/details/18960829

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!