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