预处理语言less

预处理语言

预处理css，​ 可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言，逻辑性得以大大增强。包括Sass、Less 、Stylus 。

Less

Sass 与 Stylus 相比于 Less 功能更为丰富，而Less 没有去掉任何 CSS 的功能，而是在现有的语法上，增添了许多额外的功能特性。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便、扩充。

安装

npm install -g less

使用

如果在项目中使用webpack打包，那么则需要使用less-loader 进行处理

变量

变量是常量 ，所以只能定义一次

值变量

以 @ 开头 定义变量，并且使用时 直接 键入 @＋名称。
如下，可把常用变量封装到一个文件中。

@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: rgb(99, 137, 185);
@primaryTextColor: #646464;
@secondaryTextColor: #000;
@dividerColor: #b6b6b6;
@borderColor: #dadada;

选择器变量

可以让选择器变成动态的

/* Less */
@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;
}

url 变量

项目结构改变时，修改其变量即可。

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

/* 生成的 CSS
body {
  background: url("../img/dog.png");
}

声明变量

• 结构: @name: { 属性: 值 ;};
• 使用：@name();

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

/* 生成的 CSS */
#main{
  background:red;
}
#con{
  width: 200px;
  height: 200px;
  border: solid 1px red;
}

变量运算

• 加减以第一个数据单位为准
• 乘除时单位要统一

/* Less */
@width:300px;

#wrap{
  width:@width-20;
  height:@width-20*5;
  margin:(@width-20)*5;
}

/* 生成的 CSS */
#wrap{
  width:280px;
  height:200px;
  margin:1400px;
}

变量作用域

就近原则

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

/* 生成的 CSS */
#wrap {
  width: 9%;
}

嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

/*css*/
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

&用法

&含义：代表的上一层选择器的名字

/* Less */
#header{
  &:after{
    content:"Less is more!";
  }
  .title{
    font-weight:bold;
  }
  &_content{//理解方式：直接把 & 替换成 #header
    margin:20px;
  }
}
/* 生成的 CSS */
#header::after{
  content:"Less is more!";
}
#header .title{ //嵌套
  font-weight:bold;
}
#header_content{//没有嵌套
    margin:20px;
}

混合方法

无参数方法

/* Less */
.card() {
    background: #f6f6f6;
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
#wrap{
  .card;//等价于.card();
}
/* 生成的 CSS */
#wrap{
  background: #f6f6f6;
  box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}

默认参数

• Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数
• @arguments 指代的是 全部参数
• 传参必须带单位

/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}
#wrap{
    .border(0px);
}
#content{
    .border();
}

/* 生成的 CSS */
#main{
    border:solid 1px red;
    box-shadow:0px,5px,30px,red;
}
#wrap{
    border:solid 1px #000;
    box-shadow: 0px 50px 30px #000;
}
#content{
    border:solid 1px #000;
    box-shadow: 10px 50px 30px #000;
}

方法模式匹配 这里有点类似函数重载

• 第一个参数，会找到方法中匹配程度最高的，若匹配程度同，则全部选择并且覆盖。
• 参数是变量，则匹配 @_

/* 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;
}

条件筛选

/* Less */
#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);
}

/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

不定参数

就好比es6的…

/* Less */
.textShadow(@a,...){
    text-shadow: @arguments;
}
#main{
    .textShadow(1px,4px,30px,red);
}
/* 生成后的 CSS */
#main{
  text-shadow: 1px 4px 30px red;
}

方法使用important！

只需要在方法后面加上关键字 !important

/* Less */
.border(){
    border: solid 1px red;
    margin: 50px;
}
#main{
    .border() !important;
}
/* 生成后的 CSS */
#main {
    border: solid 1px red !important;
    margin: 50px !important;
}

循环

前面我们说条件判断可用when，那么循环也显而易见了

/* Less */
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
/* 生成后的 CSS */
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

方法拼接

+代表逗号，+_代表空格

/*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 */
.Animation() {
  transform+_: scale(2);
}
.main {
  .Animation();
  transform+_: rotate(15deg);
}

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

demo

/* Less */
.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // 调方法
  padding: @average;    // 返回值
}

/* 生成的 CSS */
div {
  padding: 33px;
}

继承

extend 关键字

/*less*/
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);//main继承.animation的属性
}
#con{
    &:extend(.animation .hide);
}

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

函数

有一些less内置函数，可以直接调用，例如ceil、floor、round等等。下面链接为官方给出的内置函数文档。
内置函数