七、（2）Less和Sass

Less和Sass

Less入门

1. 什么是Less

　　Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

2. 安装

在服务器端最容易的安装方式就是通过 npm （node.js 的包管理器），方法如下：
>> npm install -g less

 

Less的语法

代码注释

/* */ css注释，编译后，会显示在css文件中
// 代码注释，编译后，隐藏。

变量

在less中，可以使用变量，来统一设置一类可以重复使用的值。
使用@符号定义，语法如下：

@变量名:变量值; （@base: #fff）

注意： 如果 @变量名 与其他字符串拼接，要使用 "@{变量名}字符串" 来拼接

@base: #f938ab;
.box {
color: @base; /*变量引用*/
}
@images:"../img";
body {
color: #444;
background: url("@{images}/logo.png");
}

混合

Mixins有点像函数，在定义后，可以通过名称调用。（也支持动态传参）
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

@color:red;
@font:18px;
@url:"./img";
//函数
.width(@w:200px;@h:50px;@bg:"red"){
  widows: @w;
  height: @h;
  background: @bg;
}
.box{
  background: @color;
  font-size:@font;
  .width();
}
p{
    color: @color;
    background: url("@{url}/1.png");
}

嵌套

可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

父选择器{
　　父属性定义
　　　　子选择器A{
　　　　　　子属性定义
　　　　　　子选择器1{
　　　　　　}
　　　　　　子选择器2{
　　　　　　}
　　　　　}
　　　　子选择器B{
　　　　}
　　}

在嵌套的内部，伪类和*号等特殊的选择器要使用 & 符号表示父元素

header{
  width: 1000px;
  height: @h;
  border: solid 1px gainsboro;
  margin: auto;

  #logo{
    width: 200px;
    height: @h;
    background-color: orange;
    float: left;
  }

  #nav{
    width: 800px;
    height: @h;
    float: right;

    ul{
      margin: 0px;
      padding: 0px;
      list-style: none;

      li{
        float: left;
        padding: 15px 20px;
      }
    }
  }
}

颜色函数

CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如：加亮、变暗、颜色梯度等。

• lighten(@color, 10%); /* 亮度：比 @color 亮 10%的颜色 */
• darken(@color, 10%); /* 亮度：比 @color 暗 10%的颜色 */
• saturate(@color, 10%); /* 饱和度：比 @color 浓 10%的颜色 */
• desaturate(@color, 10%); /* 饱和度：比 @color 淡 10%的颜色 */
• mix(@color1, @color2); /* 混合两种颜色 */

实例：

@color:red;
#ul1{
color: #fff;
background-color: darken(@color,0%);
}

 

 

面试题

1. Less能否根据不同的传值混合出不同的效果
2. 简单说明一下CSS预编译语言的原理