less入门

Less是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为 CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 lesscss可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

less简介

常用的css预处理语言：Sass/Scss Less Stylus
less中文网

编译环境或者在浏览器端使用

安装node.js(必须)
使用开发工具visual studio code 安装插件 1:easy less 2:easy sass 3:view in browser
使用koala(国人开发的全平台的LESS编译工具)
在浏览器中使用(需要注意的是link标签一定要在less.js之前引入，并且link标签的rel属性要设置为stylesheet/less)

1
2
3

<!-- 浏览器端使用 -->
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

使用规则

less注释

// 以//开始的注释,不会被编译到生成的css文件中
/**/ 以/**/包裹的注释会被编译到生成的css文件中
~值避免编译

1
2
3

#main{ width: ~'calc(300px - 30px)' }
// 编译后
#main{ width: calc(300px - 30px) }

less变量(variables)

普通变量以@开头 定义: @base: #333 使用: .box{color: @base}
作为选择器或属性名或URL 需要加(@{变量})

@images: "/flow/images";
@selector: box;
@width: width;
@{selector} {
    color: #444;
    @{width}:900px;
    background: url("@{images}/white-sand.png");
}

混合(mixins)

普通的混合(混合会输出到样式中)

.bordered{
  border-top:dotted 1px black;
}
#menu a{
  color:#111;
  .bordered;
}
// 编译结果
.bordered {
  border-top: dotted 1px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
}

不带输出的混合(后面加上()混合不会输出到样式中)

.bordered(){
  border-top:dotted 1px black;
}
#menu a{
  color:#111;
  .bordered;
}
// 编译后
#menu a {
  color: #111;
  border-top: dotted 1px black;
}

带参数的混合,可以有默认值

/* 多个参数推荐使用分号分隔，参数顺序可以调换但必须加加名称来引用, 有默认值时可以不用传值 */
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
// 编译后
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

!important在mixin调用之后使用关键字将其继承的所有属性标记为!important

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.important {
  .foo() !important;
}
// 编译后
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

嵌套规则

嵌套规则模仿了html的结构，使得css代码更加清晰明了 &表示当前选择器的所有父选择器

// less写法
#header{
  color:black;
  .navigation{
    font-size:12px;
  }
  .logo{
    width:300px;
    &:hover{
      color: red
    }
  }
}
// 编译后
#header{
  color:black;
}
#header .navigation{
  font-size:12px;
}
#header .logo{
  width:300px;
}
#header .logo:hover{
  color: red
}

运算

任何数值，颜色和变量都可以进行运算，less会自动推断数值的单位，所以不必每个值都加上单位，运算符与值之间必须以空格分开

@width: 450px;
div{
  width: @width + 450;
  p{
    width: @width * 2 - 100
  }
}
// 编译后
div {
  width: 900px;
}
div p {
  width: 800px;
}

合并属性

“+”逗号分隔所合并的属性值，“+_”空格分隔所合并的属性值

/*  + 逗号分隔所合并的属性值 */
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
// 编译后
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

/*  +_ 空格分隔所合并的属性值 */
.mixin() {
  transform+_: scale(2);
}
.myclass {
  .mixin();
  transform+_: rotate(15deg);
}
// 编译后
.myclass {
  transform: scale(2) rotate(15deg);
}

条件判断

less中通过when给混合添加限定条件,只有条件满足才会执行混合中的代码,可以使用(> < >= <= =) 逻辑运算符等

// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
.size(@width,@height) when(@width=100px) , (@height=100px){
  width: @width;
  height: @height;
}
// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
.size2(@width,@height) when(@width=100px) and (@height=100px){
  width: @width;
  height: @height;
}
.div1{
 .size(100px, 50px);
  background: red;
}
.div2{
 .size2(100px, 100px);
  background: red;
}
// 编译后
.div1 {
  width: 100px;
  height: 50px;
  background: red;
}
.div2 {
  width: 100px;
  height: 100px;
  background: red;
}

更多less使用方式,可以参考以下链接

学习链接

Less 中文网
 快速入门 | Less.js 中文文档