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

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(草稿)

上一篇:linux 信号异步通知


下一篇:用 SpriteKit 做一个逃逸游戏 (4)