Less入门

计划好久的事情今天提上了日程，很久之前就知道了Less和Sass等css预编译语言，一直也没有时间学（其实还是自己太懒），终于从计划中抽出一天的时间来学习一下，css预编译语言有好多种，常用的是Sass、Less、Scss等，比较了一个，还是觉得Less的编程比较更接近原生css，所以就学习Less了。

学习Less之前，我所了解了就只知道Less可以预编辑css，仅此而已。所以是小白一个。今天就入门学习了一下Less，现在总结一下

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

怎么使用方法我就介绍一种，其他的方法，官网上面都有。
特别注意的是 link中rel 是stylesheet/less ，href中后缀是 .less
<link rel="stylesheet/less" type="text/css" href="css/style.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

一、变量
Less中的变量有以下规则：
1、以@作为变量的起始标识，变量名由字母、数字、_和-组成
2、没有先定义后使用的规定（这一点和js不一样）；
3、以最后定义的值为最终值（这一点与css的机制类似）；
4、可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
5、定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
6、存在作用域，局部作用域优先级高于全局作用域。
7、变量作为rule属性时格式必须为@{变量名}" 的形式比如：
@boxbg:background;
.box {@{boxbg}:@red}
8、变量用于 rule属性部件，必须使用"@{变量名}" 的形式,比如
@color:color;
.box{ background-@{color}: #888;}

@simpleBorder:1px solid #123456;
.box{height: 100px; width: 100px;border: @simpleBorder;}
//解析之后：
.box {height: 100px;width: 100px;border: 1px solid #123456;}

1>可以在定义变量值时使用其它的变量：

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
//解析后：
content: "I am fnord.";

2>如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与CSS的机制类似，最后一次定义的值会成为这个属性的值。

@bg:red;
.box {
    @bg: blue;
    .boxSon {
        @bg: pink;
        background: @bg;
        @bg: green;
    }
    background: @bg;
}
//解析后
.box{background: blue;}
.box .boxSon{
    background: green;
}

3>变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。需要那个变量，less会自己去找。
标点符号 ; 很重要，一定不能忘写

.box{background: @jbg;}
@jbg:@rbg;
@rbg:red;
解析后：
.box{background:red}

4>列表类型
less的变量除了支持单个值之外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数（突然感觉less好强大）

@colors: #FFF, #0F0, #F0F;
.skin{
  color: extract(@colors, 0);
  height: 12px * length(@colors);
}
解析后
.skin{
  color: #FFF;
  height: 36px;
}

5>嵌套

@lightblue: lightblue;
@lightskyblue: lightskyblue;
nav {
    height: 50px;
    width: 500px;
    margin: 20px auto;
    background: @lightblue;
    ul li {
        float: left;
        height: 100%;
        width: 100px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        ul {
            display: none;
            overflow: hidden;
        }
        &:hover ul {//&引用完整的父级选择器
            display: block;
            background: @lightskyblue;
        }
    }
}
//解析后
nav {
  height: 50px;
  width: 500px;
  margin: 20px auto;
  background: lightblue;
}
nav ul li {
  float: left;
  height: 100%;
  width: 100px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
nav ul li ul {
  display: none;
  overflow: hidden;
}
nav ul li:hover ul {
  display: block;
  background: lightskyblue;
}

6> 父选择器引用

采用&引用完整的父选择器

可通过追加和预追加的方式加工&，从而生成新的选择器
通过&:after等方式添加伪元素、伪类样式规则集合
同一个选择器可使用多个&
通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
&指向组选择器时，会生成新的组选择器

@bg: #aaa;
#ps1 .btn{
　　background-color: @bg;
   border-radius: 5px;
   &:hover{//采用&引用完整的父选择器
   　　background-color: lighten(@bg, 30%);
      cursor: pointer;
   }
   &-msg, &-eof{//可通过追加和预追加的方式加工&，从而生成新的选择器
   　　color: blue;
   }
   .no-borderradius &{//通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面(表示没看懂，也没测试出啥效果)
   　　background-image: url('img/btn-bg.png');
   }
}
// &指向组选择器时，会生成新的组选择器
#dummy1, .dummy1{
　　&:hover{
   　　color: red;
    }
   & + &{
   　　font-size: 12px;
   }
}
//编译后---------------------
#ps1 .btn {
  background-color: #aaaaaa;
  border-radius: 5px;
}
#ps1 .btn:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}
#ps1 .btn-msg,
#ps1 .btn-eof {
  color: blue;
}
.no-borderradius #ps1 .btn {
  background-image: url('img/btn-bg.png');
}

// &指向组选择器时，会生成新的组选择器
 #dummy1:hover,
.dummy1:hover {
  color: red;
}
#dummy1 + #dummy1,
#dummy1 + .dummy1,
.dummy1 + #dummy1,
.dummy1 + .dummy1 {
  font-size: 12px;
}

二、混合（Mixins）

1>类选择器、ID选择器自动被定义为mixin，而且具有命名空间；
比如说我定义了一个class

.mixins{background: blueviolet;}
.box {
    height: 100px;
    width: 100px;
    .mixins;
}
解析后：
.box {
    height: 100px;
    width: 100px;
    background: blueviolet;
}

任何 CSS class, id 属性集都可以以同样的方式引入。

2>带参数混合：可以像函数一样定义一个含参数的属性集合

//带参数的属性集合
.border-radius (@radius) {
    border-radius: @radius;
}
//--在其他class中调用
#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}
//还可以给参数设置默认值
.border-radius (@radius: 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}
//--现在如果我们像这样调用它的话：radius 的值就会是 5px。
#header {
    .border-radius;
}

你也可以定义不带参数属性集合，如果你想隐藏这个属性集合，不让它暴露到 CSS 中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用：

.wrap () {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}
pre { .wrap }
//编译后
pre {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}

3>多参数混合

多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。

使用分号作为参数分隔符意味着可以将逗号分隔的一组值作为一个变量处理。换句话说，如果编译器在混合的定义或者是调用中找到至少一个分号，就会假设参数是使用分号分隔的，所有的逗号都属于参数中的一组值的分隔符。

2个参数，每个参数都含有通过逗号分隔的一组值的情况：.name(1, 2, 3; something, else)。

3个参数，每个参数只含一个数字的情况：.name(1, 2, 3)。

使用一个象征性的分号可以创建一个只含一个参数，但参数包含一组值的混合：.name(1, 2, 3;)。

逗号分隔的一组值参数的默认值：.name(@param1: red, blue;)。

使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上。比如你调用混合时只传了一个参数.mixin(green)，那么所有只强制要求一个参数的混合都会被调用：

.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;
}
.some .selector div {
    .mixin(#008000);
}
//编译后
.some .selector div {
    color-1: #008000;
    color-2: #008000;
    padding-2: 2;
}

4>mixin内置两个特殊的对象 @arguments 和 @reset
@arguments 代表所有传递进来的参数，如果你不想单独处理每一个参数的话就可以像这样写

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
    box-shadow: @arguments;
}
.box-shadow(2px, 5px);
//编译后
box-shadow: 2px 5px 1px #000;

@reset

如果需要在 mixin 中不限制参数的数量，可以在变量名后添加 ...，表示这里可以使用 N 个参数。

.mixin (...) {        // 接受 0-N 个参数
.mixin () {           // 不接受任何参数
.mixin (@a: 1) {      // 接受 0-1 个参数
.mixin (@a: 1, ...) { // 接受 0-N 个参数
.mixin (@a, ...) {    // 接受 1-N 个参数

此外

.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的参数
    // @arguments 表示所有参数
}

5>mixin的重载可定义多个同名mixin，调用时只要参数数量匹配则会执行相应的mixin。

.dog(@name){
　　&::after{
　　　　content: @name;
   }
}
.dog(@name;@age){
　　height: @age * 4px;
}
.dog(@name;@age;@width:20px){
　　height: @age * 12px;
　　width: @width;
}
// 仅匹配到 .dog(@name){
.one-dog{
　　.dog('chihuahua');
}    
// 匹配到.dog(@name;@age) 和 .dog(@name;@age;@width:20px)
 .two-three-dog{
 　　.dog('two-three-dog', 2);
}
          
// 参数的模式匹配
// 当第一参数值为mimi时调用该mixin
.cat(mimi, @age){
　　height: @age * 22px;    
}
// 当第一参数值为mini时调用该mixin
.cat(mini, @age){
　　height: @age * 12px;    
}
// 不管第一参数值为啥均调用该mixin
.cat(@any, @age){
　　color: #f3c;
}
.mycat{
　　.cat(mini, 1);
}
//编译后
.one-dog::after {
  content: 'chihuahua';
}
.two-three-dog {
  height: 8px;
  height: 24px;
  width: 20px;
}
.mycat {
  height: 12px;
  color: #f3c;
}

文章评论