首先,Less 是 css 的预处理语言。less 文件的扩展名是.less ,需要将它进行编译,转化为.css文件,浏览器才可以使用。
将 .less 转化为 .css 一般有三种方式:
1. Koala 自动监视编译 / Webpack / FIS
2. Sublime 插件 less2css 自动编译 && Lessc
3. less.min.js 脚本转换
这儿我们先使用koala 工具吧(http://koala-app.com/index-zh.html),这种方式好像是最简单省事的
我们先写上一个html 文件,如下。
<!DOCTYPE html>
<html>
<head>
<title>lessTest</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/start.css">
</head>
<body>
<h1>Less Test</h1>
</body>
</html>
然后它的目录结构是这样的:
然后我们打开Koala 软件,把less 文件夹放进去,右键“执行编译” 即可。然后在css文件夹里面,就有start.css文件了。
预处理器解决的问题:样式的复用、减少冗余、模块化、可维护性。
Less 通过以下功能提供上面的解决方案:变量支持,选择器嵌套处理(BEM),条件逻辑,引用其他样式(Mixin),增强import。
Less 是运行在Node 环境的,兼容CSS语法,过渡平滑,功能设计比较简单,能满足大多数场景的。
LESS 重点功能
变量 / Variables
混合 / Mixins
参数混合 / Parametric Mixins
参数混合逻辑控制 / Mixin Guards
嵌套 / Nested Rules
多层嵌套指令的呈现规则 / Nested Directives and Bubbling
Less 变量
定义:
@变量名:变量值;
下面是start.less 代码
body{
padding:0;
margin:0;
}
@header-height:60px;
.header{
height: @header-height;
}
保存之后,start.css 就能自动编译了。(因为之前使用了Koala 工具)
然后下面是html 代码。
Less 混合
定义的时候加上(),编译器就会把它当做只是调用而存在的样式,不会给他单独生成一个class样式。
我们先把html写好,如下。
<!DOCTYPE html>
<html>
<head>
<title>lessTest</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/start.css">
</head>
<body>
<header>
<div class="logo"></div>
<nav class="nav">
<a href="" class="nav__item">a</a>
<a href="" class="nav__item">b</a>
<a href="" class="nav__item">c</a>
<a href="" class="nav__item">d</a>
</nav>
<div class="profile">
<a href="" class="profile__item">a</a>
</div>
</header>
</body>
</html>
然后写Less文件。
body{
padding:0;
margin:0;
}
@header-height:60px;
.header{
height: @header-height;
}
.fl{
float: left;
}
.fr{
float: right;
}
.logo{
.fl;
width: 128px;
background: #f01400;
height: 36px;
}
Less 参数混合
先看看html的结构,如下。
<!DOCTYPE html>
<html>
<head>
<title>lessTest</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/start.css">
</head>
<body>
<header class="header">
<div class="logo"></div>
<nav class="nav">
<a href="" class="nav__item">aaa</a>
<a href="" class="nav__item nav__item_icon_new">bbb</a>
<a href="" class="nav__item">ccc</a>
<a href="" class="nav__item">ddd</a>
</nav>
<div class="profile">
<a href="" class="profile__item profile__phone"></a>
<a href="" class="profile__item profile__message"></a>
<a href="" class="profile__item profile__mail"></a>
<a href="" class="profile__item profile__ava"></a>
</div>
<div class="search"><input type="text" name="input"></div>
</header>
</body>
</html>
基础的less代码
body{
padding:0;
margin:0;
}
@header-height:60px;
@header-bottom-bgcolor:#000;
.header{
height: @header-height;
background: @header-bottom-bgcolor;
}
.fl(){
float: left;
}
.fr(){
float: right;
}
.nav-block-margin(){
height:36px;
margin:12px 25px;
}
.logo{
.fl;
width: 128px;
background: #f01400;
.nav-block-margin;
}
.nav{
.fl;
height: 60px;
}
@font-medium:14px;
@color-link:#fbfbfb;
@bg-link-hover:#363c41;
.bg-hover(){
background-color: @bg-link-hover;
}
.nav__item{
display: block;
float: left;
line-height: 60px;
padding: 0 25px;
text-decoration: none;
color: @color-link;
font-size: @font-medium;
}
.nav__item:hover{
.bg-hover;
}
.nav__item_icon_new{
.bg-hover;
}
.search{
padding-right: 25px;
position: relative;
.fr;
.nav-block-margin;
}
.search::before{
display: block;
}
.search__input{
width:242px;
border:none;
background-color: #000;
height: 36px;
outline: none;
color: #fff;
border-bottom: 1px solid #ccc;
}
.profile{
.fr;
}
.profile__item{
display: block;
float: left;
width: 60px;
height: 60px;
background-color: #ccc;
margin-left: 1px;
}
.profile__item:hover{
.bg-hover;
}
然后呢,我们加入一个圆角功能,通过Less 的参数混合。
在.less 文件里插入下面的代码
.border-radius(@radius: 50%){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.profile__ava{
width: 36px;
height: 36px;
margin: 12px;
.border-radius(10px);
}
Less 参数逻辑条件混合
首先是html结构
<!DOCTYPE html>
<html>
<head>
<title>lessTest</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/start.css">
</head>
<body>
<header class="header">
<div class="logo"></div>
<nav class="nav">
<a href="" class="nav__item">aaa</a>
<a href="" class="nav__item nav__item_icon_new">bbb</a>
<a href="" class="nav__item">ccc</a>
<a href="" class="nav__item">ddd</a>
</nav>
<div class="profile">
<a href="" class="profile__item profile__phone"></a>
<a href="" class="profile__item profile__message"></a>
<a href="" class="profile__item profile__mail"></a>
<a href="" class="profile__item profile__ava"></a>
</div>
<div class="search"><input type="text" class="search__input" name="input"></div>
</header>
</body>
</html>
然后是基础的less
body{
padding:0;
margin:0;
}
@header-height:60px;
@header-bottom-bgcolor:#000;
@bgcolor-dark: rgb(43,51,59);
@font-small:12px;
@font-medium:14px;
@color-link:#fbfbfb;
@bg-link-hover:#363c41;
@color-dark:rgb(92,100,107);
.header{
height: @header-height;
background: @header-bottom-bgcolor;
}
.fl(){
float: left;
}
.fr(){
float: right;
}
.nav-block-margin(){
height:36px;
margin:12px 25px;
}
.border-radius(@radius: 50%){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.logo{
.fl;
width: 128px;
background: #f01400;
.nav-block-margin;
}
.nav{
.fl;
height: 60px;
}
.bg-hover(){
background-color: @bg-link-hover;
}
.nav__item{
display: block;
float: left;
line-height: 60px;
padding: 0 25px;
text-decoration: none;
color: @color-link;
font-size: @font-medium;
}
.nav__item:hover{
.bg-hover;
}
.nav__item_icon_new{
.bg-hover;
}
.search{
padding-right: 25px;
position: relative;
.fr;
.nav-block-margin;
}
.search::before{
display: block;
content: '入门';
position: absolute;
width: 72px;
height: 30px;
line-height: 30px;
text-align: center;
color: @color-dark;
font-size: @font-small;
background-color: @bgcolor-dark;
}
.search__input{
width:242px;
border:none;
background-color: #000;
height: 36px;
outline: none;
color: #fff;
border-bottom: 1px solid #ccc;
}
.profile{
.fr;
}
.profile__item{
display: block;
float: left;
width: 60px;
height: 60px;
background-color: #ccc;
margin-left: 1px;
}
.profile__item:hover{
.bg-hover;
}
.profile__ava{
width: 36px;
height: 36px;
margin: 12px;
.border-radius(10px);
}
然后呢,我们在less 代码里插入
#color(@name) when(@name=white){
color: #fbfbfb;
}
修改:
.nav__item{
display: block;
float: left;
line-height: 60px;
padding: 0 25px;
text-decoration: none;
font-size: @font-medium;
#color(white);
}
Less 嵌套
上面的less 一部分可以写成如下,嵌套格式
.header{
height: @header-height;
background: @header-bottom-bgcolor;
.logo{
.fl;
width: 128px;
background: #f01400;
.nav-block-margin;
}
.nav{
.fl;
height: 60px;
.nav__item{
display: block;
float: left;
line-height: 60px;
padding: 0 25px;
text-decoration: none;
font-size: @font-medium;
#color(white);
}
.nav__item:hover{
.bg-hover;
}
.nav__item_icon_new{
.bg-hover;
}
}
}
同时,可以使用“&”符号。它表示,前缀和当前的路径一致。下面的代码和上面的代码等价。
其他
1. 选择器混入
2. 导入 (可以直接import css 也可以 import less)
3. 循环
4. 属性连接
5. 原始字符串输出