less的使用总结
简单执行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、变量
变量是按需加载的,不必在使用前申明
// 变量
@f9color: #f938ab;
.container {
width: 100%;
height: 100%;
border: 1px solid @f9color;
}
变量
2、混合
// 混合
.clearBox {
margin:;
padding:;
box-sizing: border-box;
} body,html {
width: 100%;
height: 100%;
.clearBox; // 调用
} div {
.clearBox; // 调用
}
混合
3、嵌套
.clearfix {
display: block;
zoom:; &:after { // &表示当前选择器的父代
content: " ";
display: block;
font-size:;
height:;
clear: both;
visibility: hidden;
}
}
嵌套
4、嵌套指令并且冒泡
.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;
}
简单如上,以后有新的体会再进行添加
随机推荐
- Hibernate 的HQL和sql有什么区别
转自:https://blog.csdn.net/haozhugogo/article/details/54575802sql 面向数据库表查询 hql 面向对象查询 hql : from 后面跟的 ...
- jquery效果基础运用
jQuery 版本 2 以上不支持 IE6,7,8 浏览器.如果需要支持 IE6/7/8,那么请选择1.9你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9.<!--[if lt IE ...
- Linux命令总结_sort排序命令
1.sort命令是帮我们依据不同的数据类型进行排序,其语法及常用参数格式: sort [-bcfMnrtk][源文件][-o 输出文件] 补充说明:sort可针对文本文件的内容,以行为单位 ...
- /dev/mapper/vg_zjxtest-lv_root 占用到达100%的解决方法
linux系统下报这个错误是磁盘满了,可以先做以下几个检查: 1.查看下面这个目录看看是否是回收站满了 du -sh ~/.local/share/Trash 2.查看/tmp目录和/var目录是否有 ...
- NativeScript官方书籍:1.为什么选择nativescript
1.为什么选择nativescript 本章介绍 什么是NativeScript nativescript对于移动开发世界意味着什么 NativeScript工作原理 在早期的移动应用程序(前iPho ...
- C#—反射(反射类型、方法、构造函数、属性、实现可配置可扩展、数据库访问类反射封装)
反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型(包括类.结构.委托.接口和枚举等)的成员和成员的信息.有了反射,即可对每一个类型了如指掌.另外我还可以直接创建对象,即使 ...
- IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例
案例需求:客户端发送AJAX请求服务器端获取用户信息的数据. 案例实现: 在服务器端要将Java对象转换成JSON字符串,如果使用拼接JSON字符串的方式非常繁琐,并且非常容易出错,所以一般会借助第三 ...
- Python书写规范
一.python脚本的规范: 每个脚本都有自己的规范,以下的规范不是强制的,但是规范一下,可以使你的脚本规范.易懂.方便使用. #!/usr/bin/env python # -*- coding: ...
- JS高级学习历程-7
[面向(基于)对象] 1 创建对象 在php里边,需要先找到一个类别,在通过类创建具体对象 在javascript里边,可以直接创建具体对象,后期可以再给对象丰富许多属性或方法. 1. 字面量方式创建 ...
- Js 文件上传后缀验证
//img格式验证 function imgFormat(name) { //再对文件名进行截取,以取得后缀名 var namearr= name.split("."); //获取 ...