简单执行less
一、使用npm全局安装less:
npm install -g less
二、创建less文件
三、执行命令将less文件转换成css文件
lessc less/style.less css/style.css
less语法概括
参考文档:http://www.1024i.com/demo/less/document.html
1、变量
变量是按需加载的,不必在使用前申明
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 变量 @f9color: #f938ab; .container { width: 100%; height: 100%; border: 1px solid @f9color; }
2、混合
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
// 混合 .clearBox { margin: 0; padding: 0; box-sizing: border-box; } body,html { width: 100%; height: 100%; .clearBox; // 调用 } div { .clearBox; // 调用 }
3、嵌套
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.clearfix { display: block; zoom: 1; &:after { // &表示当前选择器的父代 content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
4、嵌套指令并且冒泡
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.container { width: 100%; height: 100%; border: 1px solid @f9color; .screen-color { width: 100px; height: 100px; @media screen { background: @f9color; @media (min-width: 768px) { background: red; } } } }
5、import导入
// 放置位置无要求 // 通过Less依赖文件扩展名的方式区别对待不同的文件,.css文件直接按css导入不编译,其他类型文件包括没有扩展名的文件均按.less文件导入并编译 // 不带导入类型的: @import "common.less"; // 带导入类型的:(只导入一次) // 导入类型有: // reference:使用Less文件但不输出 // inline:在输出中包含源文件但不加工它 // less:将文件作为Less文件对象,无论是什么文件扩展名 // css:将文件作为CSS文件对象,无论是什么文件扩展名 // once:只包含文件一次(默认行为) // multiple:包含文件多次 @import (once) "common.less";
6、选择器、属性名、urls使用变量
// 选择器使用变量 @bg: bg; .@{bg} { background: @fff; } // 编译后: .bg { background: #fff; } // 属性使用变量 .position_info (@position: fixed; @propertyOne: top; @propertyOneVal: 0; @propertyTwo: left; @propertyTwoVal: 0) { position: @position; @{propertyOne}: @propertyOneVal; @{propertyTwo}: @propertyTwoVal; } // 不传参数调用 .header { .position_info; // 不传参数 } // 编译后 .header { position: fixed; top: 0; left: 0; } // 传参数调用 .header { .position_info(absolute, bottom, 0, left, 20px); // 传参数 } // 编译后 .header { position: absolute; bottom: 0; left: 20px; } // urls使用变量 @imageUrl: '../image'; .wrap { background: url('@{imageUrl}/center.png') no-repeat center; } // 编译后 .wrap { background: url('../image/center.png') no-repeat center; }
7、避免编译符~
// 使用 @screen330: ~'(max-width: 330px)'; @screen380: ~'(max-width: 380px) and (min-width: 331px)'; .div { width: 300px; @media screen and @screen330 { width: 100px; } @media screen and @screen380 { width: 200px; } } // 编译后 .div { width: 300px; } @media screen and (max-width: 330px) { .div { width: 100px; } } @media screen and (max-width: 380px) and (min-width: 331px) { .div { width: 200px; } }
8、带参数的属性,参数太多时使用@arguments
// box-shadow阴影设置,依次为水平阴影的位置、垂直阴影的位置,...表示除了前两个参数外后面可接收参数不限制个数 // 此属性接收0-N个参数,因为前两个参数已有默认值 // @arguments:传入参数太多时,可使用@arguments将全部参数都进行赋值 .box_shadow(@x: 0; @y: 0;...){ box-shadow: @arguments; -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; -o-box-shadow: @arguments; }
9、extend扩展
@bg: bg; .@{bg} { &:extend(.app); // &表示当前父选择器 background: @fff; } .app { background: #fff; } // 编译后 .bg { background: #fff; } .app, .bg { background: #fff; }
简单如上,以后有新的体会再进行添加