简单执行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;
}

简单如上,以后有新的体会再进行添加

随机推荐

  1. 浏览器原生 form 表单POST 数据的两种方式

    我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 常用有两种:application/x-www-form-urlen ...

  2. 《Java多线程编程核心技术》读后感(七)

    volatile关键字 主要作用是使变量在多个线程间可见. 关键字volatile与死循环 package Second; public class PrintString { private boo ...

  3. <c和指针>学习笔记3之操作符,表达式与指针

    1 操作符 (1)移位操作符 左移<<:值最左边的几位丢弃,右边多出来的几个空位用0补齐 01101101 011(丢弃)01101000(后面三位补0) 右移>>: 算术左移 ...

  4. linux多线程加解锁

    1.动态方式使用互斥量,该类型的互斥量在定义时不进行初始化,需要在使用之前初始化,使用结束销毁 1.1.定义一个锁变量:         pthread_mutex_t g_mutex_Msg; 1. ...

  5. GridView 72般绝技

    GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList结合 GridView和CheckBox结合 鼠 ...

  6. day01-HTML(1)

    一. 常用快捷键 Ctrl+c 复制 Ctrl+v 粘贴 Ctrl+x 剪切 Ctrl+a 全选 Ctrl+s 保存 Ctrl+z 撤销一步 Windows+d 返回桌面 Windows+e 我的电脑 ...

  7. c#---delegate关键字

    http://www.cnblogs.com/wenjiang/archive/2013/03/12/2954913.html 注:只看红字 在C#中,delegate是一个神奇的关键字,值得拿出来单 ...

  8. 洛谷P3004 [USACO10DEC]宝箱Treasure Chest

    P3004 [USACO10DEC]宝箱Treasure Chest 题目描述 Bessie and Bonnie have found a treasure chest full of marvel ...

  9. [Xcode 实际操作]七、文件与数据-(12)数据持久化存储框架CoreData的使用:查找CoreData中的数据

    目录:[Swift]Xcode实际操作 本文将演示如何查找数据持久化对象. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //引入数据持 ...

  10. SpringBoot2.0 基础案例(03):配置系统全局异常映射处理

    一.异常分类 这里的异常分类从系统处理异常的角度看,主要分类两类:业务异常和系统异常. 1.业务异常 业务异常主要是一些可预见性异常,处理业务异常,用来提示用户的操作,提高系统的可操作性. 常见的业务 ...