1、1 LESS 概述1.1 搭建 nodejs 环境必备条件CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义，CSS 负责文档表现形式或样式的定义。作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（
2、作用域）等概念。LESS 为 Web 开发者带来了福音，它在 CSS 的语法基础之上，引入了变量， Mixin（混入） ，运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。LESS 的目标是简化 CSS 使用，降低 CSS 维护成本，让 CSS 可编程，让更少的 CSS代码做更多的事。2 NODEJS 环境搭建2.1 Window 环境下载 NODEJS（稳定版） ，直接安装2.2 Linux 环境win7 为开发环境。Vbox 虚拟机+Ubuntu 搭建 nodejs 编译环境。然后通过sec
3、urecrt 远程连接到虚拟机进行开发。如果 securecrt 远程链接被拒绝需要 sudo apt-get install openssh-server 2.2.1 第一步：安装依赖包1. 安装 python 2.6 版或者更高（ubuntu 默认都已安装，可以在 terminal 中使用 python -v 命令查看 python 版本） 。2. 安装其他依赖包:sudo apt-get install g+ curl libssl-dev apache2-utils3. 安装 git 工具：sudo apt-get install git2.2.2 第二步：获取源码git clone
4、git:/ 第三步：指定编译版本1.先进入存放下载源码的文件夹：cd node2. 指定迁出版本：git checkout v0.6.12 （版本的选择，遵循稳定原则）3. 指定路径，编译执行:mkdir /local./configure prefix=$HOME/local/nodemakemake installecho export PATH=$HOME/local/node/bin:$PATH /.profileecho export NODE_PATH=$HOME/local/node:$HOME/local/node/lib/node_modules /.profilesourc
5、e /.profile2.2.4 第四步：设置环境变量如果想重启后还能继续直接使用 node 命令,那么需要设置环境变量 :使用命令 sudo gedit /etc/profile 打开配置文件，在文件最后中添加如下两行：export PATH=“$HOME/local/node/bin:$PATH“export NODE_PATH=“$HOME/local/node:$HOME/local/node/lib/node_modules“保存后重启系统使设置生效。 2.2.5 第五步：安装 npmcurl https:/npmjs.org/install.sh | sh根据需要，安装相应的包，例
6、如 express：npm install express -gd-g 代表安装到 NODE_PATH 的 lib 里面，而-d 代表把相依性套件也一起安装。如果沒有 -g 的话会安装目前所在的目录( 会建立一个 node_modules 的文件夹)2.2.6 第六步：通过 npm 按需安装文件包这里我们可以引用一个实例来说明。提供一个练习Demo https:/ 这个 DEMO 需要安装的依赖包已经标明，咱们按照命令操作即可首先 cd 到自己的工作目录 git clone git:/ 获取源码。然后首先安装数据库直接在命令行里输入 sudo apt-get install mongodb(参
7、考http:/ )即可，安装完成后测试方法，终端命令行中输入：mongo db.foo.save(a:1) db.foo.findOne() 然后 npm install express npm install express-messages npm install ejs npm install sass npm install mongoose Then cd into the directory and run: node app.js此时会看到终端的 log 提示 You can debug your app with http:/localhost:3000 表明已经安装成功。此时
8、通过 ip 就可以访问了。如 http:/192.168.1.106:3000/ 2.2.7 注意事项1. 有时候由于异常关机会导致 mongodb 数据库被锁住。提示 Error: couldnt connect to server 127.0.0.1 。解决方案：sudo rm /var/lib/mongodb/mongod.locksudo chown -R mongodb:mongodb /var/lib/mongodb/sudo -u mongodb mongod -f /etc/mongodb.conf -repairsudo service mongodb start2. 在 n
9、odejs 开发阶段 如果用 node xxx.js 来运行时不能时时检测 js 文件的变化，这样调试起来就很麻烦，所以需要安装一个开发调试脚本npm install -g node-dev使用 node-dev app.js 来调试2.2.8 如果需要在 nodeserver 之前再搭建一层 nginx，基础配置如下：1 安装 pcresudo apt-get install libpcre3-dev2 安装 zlib$ tar xzf zlib-1.2.3.tar.gz$ cd zlib-1.2.3/$ ./configure$ make$ sudo make install3 nginx
10、-1.0.8$ ./configure -prefix=nginx-1.0.8$ makenginx-1.0.8$ sudo make install4 检查配置是否正确rootubuntu:/home/# /usr/local/nginx/sbin/nginx -t 根据上面不同的 -prefix 需要找不同的路径。此处是默认安装不指定 prefix 的默认目录nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is oknginx: configuration file /usr/local/nginx
11、/conf/nginx.conf test is successful5 启动 nginxrootubuntu:/home/# /usr/local/nginx/sbin/nginxrootubuntu:/home/# ps -ef | grep nginxroot 1436 1 0 04:58 ? 00:00:00 nginx: master process /usr/local/nginx/sbin/nginxnobody 1437 1436 0 04:58 ? 00:00:00 nginx: worker process root 1439 1413 0 04:58 pts/0 00:0
12、0:00 grep -color=auto nginx6 测试rootubuntu:/home/# curl http:/localhost Welcome to nginx!Welcome to nginx!或者rootubuntu:/home/xiong# ifconfigeth0 Link encap:Ethernet HWaddr 00:0c:29:7b:80:c2 inet addr:192.168.130.131 Bcast:192.168.130.255 Mask:255.255.255.0浏览器输入：http:/192.168.130.131/关闭 nginx：nginx -s
13、 stop 快速关闭 Nginx，可能不保存相关信息，并迅速终止 web 服务。（quick exit）nginx -s quit 平稳关闭 Nginx，保存相关信息，有安排的结束 web 服务。（graceful exit）重启 nginx：nginx -s reload 因改变了 Nginx 相关配置，需要重新加载配置而重载。（changing configuration，start a new worker,quitting an old worker gracefully.)nginx -s reopen 重新打开日志文件。(reopenging log files)以上 nginx
14、基本配置完毕，可以启动了。简单放一个基础的 nginx.conf 文件#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;error_log logs/error.log debug; # 第一处修改 开启日志pid logs/nginx.pid;events worker_connections 1024;http include mime.types;default_type application/
15、octet-stream;# 第二处 开启日志格式化log_format main $remote_addr -$remote_user $time_local “$request“ $status $body_bytes_sent “$http_referer“ “$http_user_agent“ “$http_x_forwarded_for“;access_log logs/access.log main;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;#gzip on;server listen
16、9199; # 第三处修改 修改默认 80 端口，不然启动 nginx 需要 root 权限server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location /xxx root html;index index.html index.htm;#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;locat
17、ion = /50x.html root html;# proxy the PHP scripts to Apache listening on 127.0.0.1:80#location / proxy_pass http:/127.0.0.1:3001; # 第四处 所有 9199 端口下直接proxy_pass 到其他服务端# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000#location .php$ # root html;# fastcgi_pass 127.0.0.1:9000;# fastcg
18、i_index index.php;# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;# include fastcgi_params;# deny access to .htaccess files, if Apaches document root# concurs with nginxs one#location /.ht # deny all;# another virtual host using mix of IP-, name-, and port-based configuration#server # l
19、isten 8000;# listen somename:8080;# server_name somename alias another.alias;# location / # root html;# index index.html index.htm;# # HTTPS server#server # listen 443;# server_name localhost;# ssl on;# ssl_certificate cert.pem;# ssl_certificate_key cert.key;# ssl_session_timeout 5m;# ssl_protocols SSLv2 SSLv3 TLSv1;# ssl_ciphers HIGH:!aNULL:!MD5;# ssl_prefer_server_ciphers on;# location / # root html;# index index.html index.htm;# # 3 LESS 使用说明3.1 添加 less 组件node npm install less3.2 编译 less 文件lessc styles.less styles.css3.3 less 使用3.3.1 变量定义3.3.2 Class 类混合调用3.3.3 嵌套规则3.3.4 函数和简单运算
