CSS中的预编译语言less和sass

web.jpeg

1.less

• Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。此外，Less 可以运行在 Node 或浏览器端。

less语法

1.变量 在less文件中声明定义

//定义变量

//格式: @变量名称: 对应的value

@color:#E9232C;
@fs:16px;
@navH:70;
@w:200px;
@h:50px;

//使用
div,p{
  width: @w;
  height: @h;
  background: @color;
}

注意：一般一些公用的变量，比如宽度，颜色等 单独 抽取一个less文件
入一下例子

一个基础的公用的less文件 名称为base.less文件 内容如下:

//定义变量

@color:#E9232C;
@fs:16px;
@navH:70;
@w:200px;
@h:50px;

在另一个index.less文件中使用

//导入模块
@import "base.less";

div,p{
  width: @w;
  height: @h;
  background: @color;
}

@ import "xxx" 在less文件中 引入另外一个less文件

2.标签嵌套 使用

//1.定义变量
@color:red;
@width:50px;
@height:50px;
@bgColor:green;

//2.嵌套
//父亲盒子
.box{
  width: @width*3;
  height: @height*3;
  background-color:@bgColor;
  
  //子盒子
  .test1{
    width: @width + 20px;
    height: @height + 20px;
    background-color: white;
      //子子盒子
      .test3{
         background-color: @color;
        
      }
  }
}

3. 运算

注意：运算符与值之间必须以空格分开 ; 在运算的时候，只要有一个有单位就行

@width:300px;
@height:100px;
@color1:red;
@color2:green;
div{
  //width: @width - 100;//可以
  //width: @width - 200px ;//可以
  //width: @width * 2;//可以
  //width: @width * 3px;//可以
  width: 500 - @width; //可以
  height: @height;
  background-color: red;
  //background-color: @color1 + @color2; // 可以
  //background-color: @color1 + 15; // 可以
  //background-color: @color1 + yellow; // 不可以
}

4.混合-函数

• 格式 .fn(){} fn是名称

@width:300px;
@height:100px;
@color:green;

//混合：无参数
// 类似JS中的函数
// 格式  .fn(){}
.createRadius1(){
    border-radius: 30px;
}
//混合：有参数
.createRadius2(@Radius:50px,@border:3px solid yellow){
    border-radius: @Radius;
    border: @border;
}

div{
  width: 500 - @width; //可以
  height: @height;
  background-color: red;
  //引用
  .createRadius1();
}
p{
  width: @width *2 ;
  height: @height *2 ;
  background-color: blue;
  //引用
  .createRadius2(30px,5px solid blue);
}