Less使用笔记 ( CSS 预处理器 )

什么是CSS 预处理器？

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

通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

常用的CSS 预处理器语言

• Sass（SCSS）
• LESS
• Stylus
• Turbine
• Swithch CSS
• CSS Cacheer
• DT CSS

Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

Less 功能

• 变量

@primary-width:200px;
@primary-height:@primary-width + @primary-width;
@primary-text:#fff;
@background-color-red:red;
@background-color-blue:blue;


@primary-div-text:div-text; //定义Selectors

.welcome{
    width:@primary-width;
    height:@primary-height;
    background-color: @background-color-red;
    color:@primary-text
}

.@{primary-div-text}{
    background-color: @background-color-blue;
    color:@primary-text
}

• 混合

@primary-width:200px;
@primary-height:@primary-width + @primary-width;
@primary-text:#fff;
@background-color-red:red;
@background-color-blue:blue;

.welcome{
    width:@primary-width;
    height:@primary-height;
    background-color: @background-color-red;
    color:@primary-text
}

.welcome2{
    .welcome()
}

• 嵌套

@primary-width:200px;
@primary-height:@primary-width + @primary-width;
@primary-text:#fff;
@background-color-red:red;
@background-color-blue:blue;


@primary-div-text:div-text; //定义Selectors

.welcome{
    width:@primary-width;
    height:@primary-height;
    background-color: @background-color-red;
    color:@primary-text;
    .@{primary-div-text}{
        background-color: @background-color-blue;
        color:@primary-text
    }
}

嵌套中可以使用& 表示当前选择器的父级

.welcome{
    width:@primary-width;
    height:@primary-height;
    background-color: @background-color-red;
    color:@primary-text;
    .@{primary-div-text}{
        background-color: @background-color-blue;
        color:@primary-text
    }
    &{
        background-color:@background-color-yellow ;    //welcome背景色就会由红色变为黄色
    }
}

• 运算
  算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%


@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355



@var: 50vh/2;

.welcome2{
    width:calc(50% + (@var - 20px));
    border:1px solid red;
    background-color:@background-color-yellow ;
    // .welcome()
}

• 转义
  转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

@min768: ~'(min-width: 768px)';

.welcome2{
    width:@primary-width;
    border:1px solid red;
    background-color:@background-color-yellow ;
    // .welcome()
    @media @min768 {
        background-color:@background-color-red ; 
    }
}

• 函数
  Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

• 命名空间

#primary{
    .span(){
        color:@primary-text;
        display: inline-block;
        span{
            background-color:@background-color-green;
        }
    }
}

.welcome2{
    width:@primary-width;
    border:1px solid red;
    background-color:@background-color-yellow ;
    #primary.span();
    // // .welcome()
    // @media @min768 {
    //     background-color:@background-color-red ; 
    // }
}

• 映射

#colors() {
    primary: red;
    secondary: green;
  }
  
  button {
    display: inline-block;
    width:@primary-width;
    color: #colors[primary];
    border: 1px solid #colors[secondary];
  }

• 作用域
  Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

• 导入
  你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

@import "library"; // library.less
@import "typo.css";

Less 函数

• 逻辑函数 （if(表达式)，value1,value2 =>如果表达式返回true,引用value1，反之则value2）

@some: foo;

div {
    margin: if((2 > 1), 0, 3px);    //0
    color:  if((iscolor(@some)), @some, black);   //black
}


if(not (true), foo, bar);     /if(!true){}
if((true) and (2 > 1), foo, bar);  //if(true & 2>1){}
if((false) or (isstring("boo!")), foo, bar);     /if(false || isstring("boo!")){}

• boolean

@bg: black;
@bg-light: boolean(luma(@bg) > 50%);  //false

div {
  background: @bg;    //background: black;
  color: if(@bg-light, black, white);   //white
}