less

http://www.w3cplus.com/css/less 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　 说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT） 众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。 最好的入门教程——官网地址：http://lesscss.org/ 最佳实践之一——Bootstrap 由于内容较多，特设目录一坨： 二、搭建学习环境 三、内联样式和外联样式 四、语法 1. 注释 2. 变量（Variable） 列表类型 3. 嵌套（Nested） 4. 父选择器引用（ParentSelector） 　 5. 导入指令（Import） 6. 继承（Extend） 　　 6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。 　　 6.2. 父选择器不支持变量形式 　　 6.3. media query影响继承的作用域 　　　　 6.3.1. media query内的extend操作

Less基础教程 less 是较早出现的css预处理器。 LESS API 参考 安装和使用 安装比较简单,通过nmp或bower安装即可. npm install less -g bower install less 新版的chrome能直接解析less样式，不进行预编译的情况下，可以在页面引入 自己写的less文件 和 less.js less会在页面创建 <style> 节点，包含编译后的样式 <link rel="stylesheet/less" href="style.less" type="text/css" /> <script src="less.js" type="text/javascript"></script> Less的语法 变量 /*变量*/ /*注意，由于变量只能定义一次，实际上他们就是“常量”.*/ @base: #f938ab; 函数 /*函数 .box-shadow(), iscolor(), isnumber(), 函数重载*/ .box-shadow(@style, @c) when(iscolor(@c)){ -webkit-box-shadow:@style @c; box-shadow:@style @c; } .box-shadow(@style, @alpha:50%) when(isnumber(@alpha)){ .box

如何使用less预编译（安装并简单使用） 需要安装node.js （node -v / npm -v）用于查看node/npm版本信息 安装完node 打开终端运行npm i less -g 在建有.less文件夹的位置打开终端 运行 lessc lessDemo.less cssDemo.css（ lessc less文件路径/less文件名 css文件路径/css文件名 ）//用于转换成css less语法 注释 // 只会在less中显示 /**/ 会在编译好的css文件中显示 变量 在less中定义变量使用@符 @bgcolor:red; .box{ width:200px; height:200px; background:@bgcolor; } 编译之后输出的css .box{ width:200px; height:200px; background:red; } 混合 不带参数的混合 .borders{ border: 3px solid red; } .box{ width: 200px; height: 200px; background: pink; .borders } 编译之后输出的css .box{ width: 200px; height: 200px; background: pink; border: 3px solid red; } 带参数的混合

趁这几天有空，了解一下css预处理的知识 less简介 Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术，让你的Css更具维护性，主题性，扩展性。 Less 可运行在 Node 环境,浏览器环境和Rhino环境.同时也有3种可选工具供你编译文件和监视任何改变。 语法 变量 声明一个变量： @width：100px； .test { width: @width; } 混合 .border { border: 1px solid red; } .test { width: @box_width; height: 100px; background: #ccc; .border; //直接混合使用 } 嵌套 正常写法 .test { font-size: 10px; } . test a { color: red; } less 写法： .test { font-size: 10px; a { color: red; } } 同样可以包含伪类： .test { font-size: 10px; a { &:hover { color: blue; } color: red; } } 运算 @width: 5px; .test { width: @width +

Linux日志分类 在Linux系统中，有三个主要的日志子系统： 连接时间日志 由多个程序执行，把记录写入到/var/log/wtmp和/var/run/utmp，login等程序更新wtmp和utmp文件，使系统管理员能够跟踪谁在何时登录到系统。 进程统计日志 进程统计日志由系统内核执行。当一个进程终止时，为每个进程往进程统计文件（pacct或acct）中写一个记录。进程统计的目的是为系统中的基本服务提供命令使用统计。 错误日志 错误日志由syslogd（8）执行。各种系统守护进程、用户程序和内核通过syslog（3）向文件/var/log/messages报告值得注意的事件。另外有许多UNIX程序创建日志。像HTTP和FTP这样提供网络服务的服务器也保持详细的日志。 使用linux查看日志排除bug是不少开发和测试人员的必备技能，为了更好的使用，所以百度结合自己经验总结一下常用的日志查看部分相关命令。大家可以随时更新提出质疑一同进步。 一、常用命令 tail head cat tac less more tail: n 是显示行号相当于nl命令 tail -100f test.log 实时监控100行日志 tail -n 10 test.log 查询日志尾部最后10行的日志; tail -n +10 test.log 查询10行之后的所有日志; head