前端构建 Less入门(CSS预处理器)

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

<style type="text/less">
 // less 代码
</style>

<link rel="stylesheet/less" type="text/css" href="文件.less" rel="external nofollow" />

// 单行注释，不会作为最终输出
/* 
 多行注释，以原生CSS的/*注释....*/形式作为最终输出
 */

@color: color;
 @dialog: .dialog;
 @suffix: fix;
 // 空格将被忽略，若要保留空格则需要使用单引号或双引号
 @hi: 'hello ';
 @dear: there ;
 
 .dialog{
 　　// 用于 rule属性部件，必须使用"@{变量名}" 的形式
 background-@{color}: #888;
 // 用于 rule属性，必须使用"@{变量名}" 的形式
 @{color}: blue;
 }
 // 用于 选择器，必须使用"@{变量名}" 的形式
 @{dialog}{
 width: 200px;
 }
 @{dialog}::after{
 content: ': @{hi}@{dear}!'; // 用于 字符串拼接，必须使用"@{变量名}" 的形式
 }
 @h: 1000px;
 // 用于 选择器部件，必须使用"@{变量名}" 的形式
 .ie-@{suffix}{
 　　@h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
 height: @h; // 用于 属性值，两种形式均可使用
 line-height: 30px;
 }
 
 // 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
 // 2. 没有先定义后使用的规定；
 @dialog-border-color: #666;
 @dialog-border-width: 10px;
 @dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

.dialog {
 background-color: #888;
 color: blue;
}
.dialog {
 width: 200px;
}
.dialog::after {
 content: ': hello there!';
}
.ie-fix {
 height: 30px;
 line-height: 30px;
}

@colors: #FFF, #0F0, #F0F;
.skin{
 color: extract(@colors, 0);
 height: 12px * length(@colors);
}

.skin{
 color: #FFF;
 height: 36px;
}

.main{
　　padding: 10px;
 > div {
 　　width: 100px;
 }
 .aside {
 　　width: 200px;
 }
 }

.main {
 padding: 10px;
}
.main > div {
 width: 100px;
}
.main .aside {
 width: 200px;
}

/* 
 * 采用&引用完整的父选择器
 * 可通过追加和预追加的方式加工&，从而生成新的选择器
 * 通过&::after等方式添加伪元素样式规则集合
 * 同一个选择器可使用多个&
 * 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
 */
@bg: #aaa;
#ps1 .btn{
　　background-color: @bg;
 border-radius: 5px;
 &:hover{
 　　background-color: lighten(@bg, 30%);
 cursor: pointer;
 }
 &-msg, &-eof{
 　　color: blue;
 }
 .no-borderradius &{
 　　background-image: url('img/btn-bg.png');
 }
}
/*
 * &指向组选择器时，会生成新的组选择器
 */
#dummy1, .dummy1{
　　&:hover{
 　　color: red;
 }
 & + &{
 　　font-size: 12px;
 }
}

/* 
 * 采用&引用完整的父选择器
 * 可通过追加和预追加的方式加工&，从而生成新的选择器
 * 通过&::after等方式添加伪元素样式规则集合
 * 同一个选择器可使用多个&
 * 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
 */
#ps1 .btn {
 background-color: #aaaaaa;
 border-radius: 5px;
}
#ps1 .btn:hover {
 background-color: #f6f6f6;
 cursor: pointer;
}
#ps1 .btn-msg,
#ps1 .btn-eof {
 color: blue;
}
.no-borderradius #ps1 .btn {
 background-image: url('img/btn-bg.png');
}
/*
 * &指向组选择器时，会生成新的组选择器
 */
#dummy1:hover,
.dummy1:hover {
 color: red;
}
#dummy1 + #dummy1,
#dummy1 + .dummy1,
.dummy1 + #dummy1,
.dummy1 + .dummy1 {
 font-size: 12px;
}

.animal{
　　color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear:extend(.animal){
　　width: 100px;
　　height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer{
　　&:extend(.animal);
　　width: 50px;
　　height: 50px;
}

.animal,
.bear,
.deer {
 color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear {
 width: 100px;
 height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer {
 width: 50px;
 height: 50px;
}

*.parent{
　　height: 100px;
 .hair{
 　　color: #f27;
 }
 [name=eyes]{
 　　color: #768;
 }
}
// 匹配失败
.son:extend(.parent){}
.son:extend(.hair){}
  
// 匹配成功
.son:extend(*.parent [name='eyes']){}
.son:extend(*.parent [name="eyes"]){}
// all关键字会匹配所有包含parentSelector内容的选择器，并以selector替换parentSelector来生成新的选择器
// 下面的内容会生成 *.son，*.son .hair，*.son [name=eyes]三个新的选择器
.son:extend(.parent all){}

*.parent,
*.son {
 height: 100px;
}
*.parent .hair,
*.son .hair {
 color: #f27;
}
*.parent [name=eyes],
.son,
.son,
*.son [name=eyes] {
 color: #768;
}

@p1: .parent1;
@p2: .parent2;
.parent1{
　　height: 100px;
}
@{p2}{
　　height: 200px;
}
// 匹配失败
// 形式1，不支持以变量作入参
.son1:extend(@{p1}){}
// 形式2，不支持以变量作为选择器的规则集合
.son1:extend(.parent2){}
  
// 匹配成功
.son2:extend(.parent1){}
@s3: son3;
.@{s3}:extend(.parent1){}

.parent1,
.son2,
.son3 {
 height: 100px;
}
.parent2 {
 height: 200px;
}

.parent1{
　　height: 200px;
}
@media screen{
　　.parent1{
　　　　height: 100px;
　　} 
 // 无法继承子media query块的选择器样式
 .son1:extend(.parent2){}
 @media (min-width: 1023px){
 　　// 继承父media query块的选择器样式
 .son2:extend(.parent1){}
 .parent2{
 　　width: 200px;
 }
 }
}

.parent1 {
 height: 200px;
}
@media screen {
 .parent1 {
 height: 100px;
 }
}
@media screen and (min-width: 1023px) {
 .parent2 {
 width: 200px;
 }
}

@media screen{
　　.parent{
 　　height: 100px;
 }
 @media (min-width: 1023px){
 　　.parent{
 　　width: 200px;
 }
 }
}
.son:extend(.parent){}

@media screen {
 .parent,
 .son {
 height: 100px;
 }
}
@media screen and (min-width: 1023px) {
 .parent,
 .son {
 width: 200px;
 }
}

.animal{
　　.human{
 　　#fsjohnhuang{
 　　.hair{
  　　color: #000;
  }
 } 
 } 
} 
.front-end-monkey{
　　// 或者.animal.human#fsjohnhuang.hair();
　　// 或者.animal>.human>#fsjohnhuang>.hair;
 // 或者.animal>.human>#fsjohnhuang>.hair();
 // 即可调用mixin
 .animal.human#fsjohnhuang.hair;
}

.animal .human #fsjohnhuang .hair {
 color: #000;
}
.front-end-monkey {
 color: #000;
}

// 定义不带参数的mixin
.animal(){
　　color: #000;
}
// 定义带参数的mixin
// 注意：由于,和;均可用于作为参数分隔符，但由于如background、border等样式属性支持属性值组，而,则作为属性值组元素分隔符，因此推荐使用;作为参数分隔符
.dog(@type; @age){
　　height: @type * @age * 12px;
}
// 定义带参数默认值的mixin
.cat(@type; @age:1){
　　height: @type * @age * 5px;
}
  
// 调用才会出现在最终输出
.chihuahua{
　　.dog(1;2);
}

.chihuahua {
 height: 24px;
}

.dog(@type;@age;@rest...){
　　height: @type * @age * 12px;
　　border: @rest;
}
.cat(@solid;@w;@color){
　　border: @arguments;
}
  
.chihuahua{
　　.dog(1;2;solid;1px;red); 
}
.mimi{
　　.cat(solid;2px;blue); 
}

.chihuahua {
 height: 24px;
 border: solid 1px red;
}
.mimi {
 border: solid 2px blue;
}

.dog(@name){
　　&::after{
　　　　content: @name;
 }
}
.dog(@name;@age){
　　height: @age * 4px;
}
.dog(@name;@age;@width:20px){
　　height: @age * 12px;
　　width: @width;
}
// 仅匹配到 .dog(@name){
.one-dog{
　　.dog('chihuahua');
} 
// 匹配到.dog(@name;@age) 和 .dog(@name;@age;@width:20px)
 .two-three-dog{
 　　.dog('two-three-dog', 2);
}
  
// 参数的模式匹配
// 当第一参数值为mimi时调用该mixin
.cat(mimi, @age){
　　height: @age * 22px; 
}
// 当第一参数值为mini时调用该mixin
.cat(mini, @age){
　　height: @age * 12px; 
}
// 不管第一参数值为啥均调用该mixin
.cat(@any, @age){
　　color: #f3c;
}
.mycat{
　　.cat(mini, 1);
}

.one-dog::after {
 content: 'chihuahua';
}
.two-three-dog {
 height: 8px;
 height: 24px;
 width: 20px;
}
.mycat {
 height: 12px;
 color: #f3c;
}

// 条件匹配
// true值匹配，仅实参为true时才匹配成功
.truth(@a) when (@a){
　　&::after{
　　content: @a;
　　}
}
// 匹配成功
.truth1{
　　.truth(true);
}
// 匹配失败
.truth2{
　　.truth(#fff);
}
  
/* 类型判断函数
 * iscolor
 * isnumber
 * isstring
 * iskeyword
 * isurl
 */
.bear(@color) when (iscolor(@color)){
　　color: @color;
}
/* 单位判断函数
 * ispixel
 * ispercentage
 * isem
 * isunit
 */
.bear(@height) when (ispixel(@height)){
　　height: @height;
}
// =,>,>=,<=,< 关系运算符
.rich(@h) when (@h > 1000){
　　height: @h; 
}
// and、not、or(使用,号表示) 逻辑运算符
.huge(@h, @w) when (@h > 180) and (@w > 180){
　　height: @h;
　　width: @w;
}
// 使用& when()实现if语句
@debug: true;
& when (@debug){
　　div{
　　　　border: solid 1px red;
 }
}
  
// 通过递归实现循环
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
　　.column-@{i} {
　　　　width: (@i * 100% / @n);
　　}
 .generate-columns(@n, (@i + 1));
}

.truth1::after {
 content: true;
}
/* 类型判断函数
 * iscolor
 * isnumber
 * isstring
 * iskeyword
 * isurl
 */
/* 单位判断函数
 * ispixel
 * ispercentage
 * isem
 * isunit
 */
div {
 border: solid 1px red;
}
.column-1 {
 width: 25%;
}
.column-2 {
 width: 50%;
}
.column-3 {
 width: 75%;
}
.column-4 {
 width: 100%;
}

// 运算数与运算符间没有空格
@fail: 1px +2em;
.fail{
 height: @fail;
}

@success1: 1px + 2em;
.success1{
 height: @success1;
}

@success2: 2px + 1em;
.success2{
 height: @success2;
}

.fail{
 height: 1px 2em;
}

.success1{
 height: 3px;
}

.success2{
 height: 3em;
}

// for teenager
.person(@age) when (@age <= 19) and (@age >=13){
 height: @age * 10px;
}
// for child
.person(@age) when (@age <13){
 height: @age * 6px;
}
// for adult
.person(@age) when (default()){
 height: 180px;
}

.son{
 .person(10);
}
.daughter{
 person(17);
}
.father{
 .person(27);
}

.son{
 height: 60px;
}
.daughter{
 height: 170px;
}
.father{
 height: 180px;
}

// Less源码
.x {
 .m(red)     {case-1: darkred}
 .m(blue)     {case-2: darkblue}
 .m(@x) when (iscolor(@x)) and (default()) {default-color: @x}
 .m('foo')     {case-1: I am 'foo'}
 .m('bar')     {case-2: I am 'bar'}
 .m(@x) when (isstring(@x)) and (default()) {default-string: and I am the default}

 &-blue {.m(blue)}
 &-green {.m(green)}
 &-foo {.m('foo')}
 &-baz {.m('baz')}
}

// 最终输出
.x-blue {
 case-2: #00008b;
}
.x-green {
 default-color: #008000;
}
.x-foo {
 case-1: I am 'foo';
}
.x-baz {
 default-string: and I am the default;
}

// Less源码
.mixin(@value) when (ispixel(@value)) {width: @value}
.mixin(@value) when not(default()) {padding: (@value / 5)}

div-1 {
 .mixin(100px);
}

div-2 {
 /* ... */
 .mixin(100%);
}

// 最终输出：
div-1 {
 width: 100px;
 padding: 20px;
}
div-2 {
 /* ... */
}

# main.less
@import "files/backgrounds.less";
# files/backgrounds.less
.icon-1 {
 background-image: url('images/lamp-post.png');
}

.icon-1 {
 background-image: url('images/lamp-post.png');
}

.icon-1 {
 background-image: url('files/images/lamp-post.png');
}

<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="style/main.css" rel="external nofollow" /> 
</head>
<body>
 <div class="nav">
 </div>
</body>
</html>

.base-nav{
 height: 50px;
 background-image: url(img/nav.png);
}
.base-debug{
 border: solid 5px red;
}

@import (reference) "base.less";
@env:release; //编译模式：release或debug

/* 导航栏 */
.nav:extend(.base-nav){
 // 编译模式为debug时采用该样式
 & when (@env=debug){
 .base-debug();
 }
}

@echo off
cls
goto :%1

:bin
echo Building......
::remove subitems of bin
rd /S /Q bin
::copy html files
xcopy /y src\*.html bin\
::compile less to css
cmd /C lessc --include-path=lib/less --relative-urls --source-map --source-map-rootpath=../../src/less/main.less src/less/main.less bin/style/main.css
echo Building is over!
goto :over

:debug
echo Building......
::remove subitems of bin
rd /S /Q bin
::copy html files
xcopy /y src\*.html bin\
::compile less to css
cmd /C lessc --include-path=lib/less --relative-urls --source-map --source-map-rootpath=../../src/less/ --modify-var="env=debug" src/less/main.less bin/style/main.css
echo Building is over!
goto :over

:dist
echo Deploying......
::remove subitems of dist
rd /S /Q dist
::copy lib
xcopy /y lib\less\img dist\lib\less\img\
::copy html files
xcopy /y src\*.html dist\app\
::compile less to css
cmd /C lessc --include-path=lib/less --clean-css="advanced" --relative-urls src/less/main.less dist/app/style/main.css
echo Deploying is over!

:over

'use strict'

var lessBinDebugOpts = {
 sourceMap: true,
 sourceMapRootpath: '../../'
 },
 debug = {env: 'debug'}

module.exports = function(grunt){
 grunt.initConfig({
 clean: {
  options:{
  force: true
  },
  bin: ['bin'],
  dist: ['dist']
 },
 copy: {
  bin: {
  files: [
   {expand: true, cwd: 'src/', src: '*.html', dest: 'bin/'}
  ]
  },
  dist: {
  files:[
   {expand: true, cwd: 'lib/', src: '**', dest: 'dist/lib/'},
   {expand: true, cwd: 'src/', src: '*.html', dest: 'dist/app'}
  ]
  } 
 },
 less: {
  options:{
  paths: 'lib/less',
  relativeUrls: true
  },
  bin:{
  options: (delete lessBinDebugOpts.modifyVars, lessBinDebugOpts),
  files: {
   'bin/style/main.css': 'src/less/main.less'
  }
  },
  debug:{
  options: (lessBinDebugOpts.modifyVars = debug, lessBinDebugOpts),
  files: {
   'bin/style/main.css': 'src/less/main.less'
  }
  },
  dist:{
  options:{
   plugins: [new (require('less-plugin-clean-css'))({advanced: true})]
  },
  files: {
   'dist/app/style/main.css': 'src/less/main.less'
  }
  }
 }
 })

 grunt.loadNpmTasks('grunt-contrib-less')
 grunt.loadNpmTasks('grunt-contrib-copy')
 grunt.loadNpmTasks('grunt-contrib-clean')

 var task = function(){
 var name = this.name
  , tasks = ['clean', 'copy', 'less']
  , targets = tasks.map(function(v, i, m){
  var target = name === 'debug' && v !== 'less' ? 'bin' : name
  return v + ':' + target
  })
 grunt.task.run(targets)
 }
 grunt.registerTask('bin', task)
 grunt.registerTask('debug', task)
 grunt.registerTask('dist', task)
}

;; 定义进阶过程
(defn becomeGeek [progress]
 (.log js/console "实践->总结->参考最佳实践")
 (if (> 100 progress) 
 (becomeGeek (+ 1 progress))
 ))

;; 努力吧骚年！
(becomeGeek 1)