LESS是什么?

less是一门CSS预处理语言。由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量、函数、作用域等概念。而LESS在CSS的基础语法之上,引入了变量、Mixin混入、运算以及函数等功能,大大简化了CSS的编写,降低了CSS的维护成本。
本质上,LESS包含一套自定义的语法及一个解析器,写好的LESS文件会通过解析器编译生成CSS文件。LESS并没有建材CSS原有的特性,更不是用来取代CSS的,而是在现有的语法基础上,为CSS加入程序式语言的功能特性。所以,标准的CSS文件直接改成.less格式,LESS编译器可以完全识别。

使用

1.标签引入。

link标签rel属性值一定要为stylesheet/less

<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>

2.命令行使用npm安装

npm install -g less
编译:
lessc style.less style.css
编译并压缩文件:
lessc --clean-css styles.less styles.min.css

3.前端服务热调试(webpack)

需要配置webpack,webpack会帮你编译less文件,可以在js中Import进.less文件,像使用css那样使用less

4.在js中调用编译器调试

var less = require('less');
less.render('.myclass { width: (1 + 1) }', function (e, output) {
console.log(output.css); // 输出 .myclass {width:2}
});

语法规则

变量

这里的变量指的是常量,只能定义一次。以@开头定义,使用时也要键入@

1.值变量

@color: #5B83AD;
@bgColor: @color + #111;
@width: 300px;
#wrap {
color: @color;
width: @width-20;
height: @width-20*5;
margin: (@width-20)*5;
background: @bgColor;
}

生成后的CSS:

#wrap {
color: #999;
width: 50%;
background: #6c94be;
}

2.选择器变量

让选择器变成动态的变量,使用时必须将变量名用花括号括起来

@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}

生成的CSS:

#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}

3.属性变量

将某CSS属性名当做变量,与选择器变量一样,使用时需要{}

@borderStyle: border-style;
@Solid: solid;
#wrap{
@{borderStyle}: @Solid;//变量名 必须使用大括号包裹
}

编译后:

#wrap{
border-style:solid;
}

4.url变量

@images: "../img";  //需要加引号
body {
background: url("@{images}/dog.png"); //变量名 必须使用大括号包裹
}

编译后:

body {
background: url("../img/dog.png");
}

5.声明规则集(作用类似于混入)

声明:@name:{属性:值};
使用:@name();

@background: {background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}

编译后:

#main{
background:red;
}
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}

6.变量的作用域

就近原则,与大多数编程语言的原则一样

@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}

编译后:

#wrap {
width: 9%;
}

嵌套

&符:代表父选择器的名字

.boring {
display: inline-block;
&::after{
content:"Hello Less";
}
.class {
width: 100%;
}
&>.text{
height: 10px;
}
}

编译后:

.boring{
display: inline-block;
}
.boring::after{
content: "Hello Less";
}
.boring .class{
width: 100%;
}
.boring>.text{
height: 10px;
}

混入(Mixin)

混入就是将一组CSS属性整体包含入另一个css类中去。提高复用性

1.无参数混入

.bordered {
&:hover {
color: red;
}
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.card {
background: #f6f6f6;
.bordered; // .bordered()两种写法等价
}

编译后:

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.bordered:hover {
color: red;
}
.card {
background: #f6f6f6;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.card:hover {
color: red;
}

2.不输出Mixin

如果只是想创建一个mixin,并不想单独输出,可以这样用

.bordered(){
&:hover {
color: red;
}
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.card {
background: #f6f6f6;
.bordered; // .bordered()两种写法等价
}

编译后:

.card {
background: #f6f6f6;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.card:hover {
color: red;
}

3.有参数混入

注意的点:① 默认参数  ② 命名参数  ③ @arguments  ④ @rest

.border-radius(@radius) {
border-radius: @radius;
}
.border(@a:10px, @b:50px, @c:30px, @color:#000) {
border:solid 1px @color;
box-shadow: @arguments; // 指代的是 全部参数
}
.bgColor(@color,@rest...){
width: @rest; // @rest参数可以获得后面违背获取的值。
background: @color;
}
#main {
.border(0px,5px,30px,red);
.border-radius(5px);
}
#main1 {
.border(@c: 20px,@color: red);
}
#main2 {
.border(10px);
}
#main3 {
.border;
}

4.匹配模式

和面向对象的多态很相似。当调用传参的时候,会根据参数进行匹配,找到匹配程度更高的,如果匹配程度相同,将全部选择,并存在样式覆盖。

.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
div {
.mixin(#008000);
}

编译后:

div {
color-1: #008000; // "color-1"这种写法对CSS来说是不合法的,在这里只是展示哪些属性被用上了
color-2: #008000;
padding-2: 2;
}

Demo2:

/* Less */
.triangle(top,@width:20px,@color:#000){
border-color:transparent transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
border-color:transparent @color transparent transparent ;
} .triangle(bottom,@width:20px,@color:#000){
border-color:@color transparent transparent transparent ;
}
.triangle(left,@width:20px,@color:#000){
border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){ // @_的作用是,无论选择的是哪个函数,一定运行此函数
border-style: solid;
border-width: @width;
}
#main{
.triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
border-color:transparent transparent transparent #999;
border-style: solid;
border-width: 50px;
}

5.方法的命名空间

不能单独使用命名空间的方法,必须先引入命名空间,才能使用其中的方法。

#card(){
background: #723232;
.d(@w:300px){
width: @w; #a(@h:300px){
height: @h;//可以使用上一层传进来的方法
width: @w;
}
}
}
#wrap{
#card > .d > #a(100px); // 父元素不能加 括号
}
#main{
#card .d();
}
#con{
//不得单独使用命名空间的方法
//.d() 如果前面没有引入命名空间 #card ,将会报错 #card; // 等价于 #card();
.d(20px); //必须先引入 #card
}

编译后:

#wrap{
height:100px;
width:300px;
}
#main{
width:300px;
}
#con{
width:20px;
}

6.条件筛选

没有逻辑运算符与或非,但是有when not ,(逗号)分别相当于 && ! ||

比较运算符有: > >= = =< <。=代表的是等于。

#card{
// and 运算符 ,相当于 与运算 &&,必须条件全部符合才会执行
.border(@width,@color,@style) when (@width>100px) and(@color=#999){
border:@style @color @width;
}
// not 运算符,相当于 非运算 !,条件为 不符合才会执行
.background(@color) when not (@color>=#222){
background:@color;
}
// , 逗号分隔符:相当于 或运算 ||,只要有一个符合条件就会执行
.font(@size:20px) when (@size>50px) , (@size<100px){
font-size: @size;
}
}
#main{
#card>.border(200px,#999,solid);
#card .background(#111);
#card > .font(40px);
}

编译后:

#main{
border:solid #999 200px;
background:#111;
font-size:40px;
}

7.使用!important

.border{
border: solid 1px red;
margin: 50px;
}
#main{
.border() !important;
}

编译后:

#main {
border: solid 1px red !important;
margin: 50px !important;
}

8.循环

less并没有提供for循环功能,但是可以借助when实现。

.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}

编译后:

div {
width: 10px;
width: 20px;
width: 30px;
width: 40px;
width: 50px;
}

使用循环可以做成CSS网格类的示例:

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}

编译后:

.column-1 {
width: 25%;
}
.column-2 {
width: 50%;
}
.column-3 {
width: 75%;
}
.column-4 {
width: 100%;
}

9.属性拼接

CSS中有的属性值是空格隔开,有的是逗号隔开。

①逗号隔开,在LESS中使用 +

.boxShadow() {
box-shadow+: inset 0 0 10px #555;
}
.main {
.boxShadow();
box-shadow+: 0 0 20px black;
}
/* 生成后的 CSS */
.main {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

②空格隔开,在LESS中使用 +_

/* Less */
.Animation() {
transform+_: scale(2);
}
.main {
.Animation();
transform+_: rotate(15deg);
} /* 生成的 CSS */
.main {
transform: scale(2) rotate(15deg);
}

继承

.animation{
transition: all .3s ease-out;
.hide{
transform:scale(0);
}
}
#main{
&:extend(.animation);
}
#con{
&:extend(.animation .hide);
}

编译后:

.animation,#main{
transition: all .3s ease-out;
}
.animation .hide , #con{
transform:scale(0);
}

all全局搜索替换

#main{
width: 200px;
}
#main {
&:after {
content:"Less is good!";
}
}
#wrap:extend(#main all) {}

编译后:

#main,#wrap{
width: 200px;
}
#main:after, #wrap:after {
content: "Less is good!";
}

函数

1.类型函数

  • isnumber 判定是否是数字
  • iscolor   判断值是否是颜色
  • isurl         判断是否是url

2.颜色操作

  • saturate    增加一定数值的颜色饱和度
  • lighteen    增加一定数值的颜色亮度
  • darken      降低颜色亮度
  • fade          给颜色设置一定数值的透明度

3.数学函数

  • ceil           向上取整
  • floor         向下取整
  • round       四舍五入
  • percentage  将浮点数值转换为百分比字符串
  • abs           计算数值的绝对值
  • pow          计算一个数的乘方

更多函数参见官方文档:

http://lesscss.cn/functions/

其他

1.注释

/* CSS注释,会出现在CSS文件中 */

// LESS注释,不会被编译在CSS文件中

2.避免编译

在CSS属性被引号包起来,且前面加上~符号

/* Less */
#main{
width:~'calc(300px-30px)';
}
/* 生成后的 CSS */
#main{
width:calc(300px-30px);
}

3.使用JS

/* Less */
@content:`"aaa".toUpperCase()`;
#randomColor{
@randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
width: ~"`Math.round(Math.random() * 100)`px";
&:after{
content:@content;
}
height: ~"`window.innerHeight`px";
alert:~"`alert(1)`";
#randomColor();
background-color: @randomColor;
}
/* 生成后的 CSS */
#wrap{
width: 随机值(0~100)px;
height: 743px;//由电脑而异
background: 随机颜色;
}
#wrap::after{
content:"AAA";
}

此乃JS in CSS

CSS预处理——LESS的更多相关文章

  1. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  2. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  3. 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理

    第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...

  4. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

  5. CSS预处理语言

    CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...

  6. CSS预处理语言-less 的使用

    Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Node 或浏览器端. Less的编译处理 作为一 ...

  7. css预处理scss环境配置

    css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...

  8. 前端面试:css预处理

    css预处理定义: 定义了一种新的语言,其基本思想是用一种专门编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 几种预处理语言 sass l ...

  9. Less:Less(CSS预处理语言)

    ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...

  10. CSS 预处理语言之 less 篇

    less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...

随机推荐

  1. 3. 单元测试框架(unittest)1——TestCase

    1. import unittest 引入unittest模块:   2. class SearchTest (unittest.TestCase): 定义一个继承于TestCase类的子类:   3 ...

  2. springboot项目中进行并发测试

    一 利用工具包: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  3. Oracle的UTL_FILE.FOPEN学习笔记

    Oracle提供的文件操作包UTL_FILE包中的UTL_FILE.FOPEN负责打开一个文件. UTL_FILE.FOPEN(location in varchar2, filename in va ...

  4. 如何做系列(5)-james mail安装总结

    安装james还是比较复杂的,我们在EC2上花费了差不多一天,发现不能发送邮件到外网,后续又陆续花了几天的时间,才成功搭建james邮件服务器. 现在愿意把我们的经历分享出来,让大家参考一下. 由于项 ...

  5. “玲珑杯”ACM比赛 Round #11 B题

    http://www.ifrog.cc/acm/problem/1097?contest=1013&no=1 //LIS的高端写法 #include <iostream> #inc ...

  6. Leetcode240. Search a 2D Matrix II搜索二维矩阵2

    编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性: 每行的元素从左到右升序排列. 每列的元素从上到下升序排列. 示例: 现有矩阵 matrix ...

  7. 左神算法书籍《程序员代码面试指南》——2_03删除链表的中间节点和a/b处的节点

    [题目]给定链表的头节点head,实现删除链表的中间节点的函数.例如:不删除任何节点:1->2,删除节点1:1->2->3,删除节点2:1->2->3->4,删除节 ...

  8. 一句代码上传MultipartFile图片到指定文件夹

    代码如下: public class TestFile { void upload(MultipartFile file) throws IOException { file.transferTo(n ...

  9. 木卯先生的笔记---Object类

    1.简介 Object类是在 java.lang 包下的一个类,它是所有类的父类(也就是所有类都是Object类的子类,如果定义一个类的时候,没有指定继承的类,默认的就是继承Object类),所以Ob ...

  10. 巧用having

    mysql学习教程参考:https://www.w3school.com.cn/sql/index.asp where 与 having实例运用参考:https://www.2cto.com/data ...