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);
}

2. Sass预处理器

SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器，它和Less一样也是 一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护。

注意: SASS以.sass或者.scss结尾

.sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号;

.scss以{}表示层级结构, 语句后面需要写分号;(推荐使用这个)

2.1变量

Sass中定义变量的格式: $变量名:对应的vlue

1. 后定义的 变量会覆盖前面的同名变量

2. SASS中变量不是延迟加载, 不可以先使用后定义

//定义变量
$width:200px;
$height:300px;

//使用
.box{
    width:$width;
    height:$height;
    background: red;
}

变量插值
格式: #{变量名}

//定义变量
$size: 200px;
$w: width;

div{
     #{$w}: $size;
  height: $size;
  background: red;
}

2.2混合

格式: @mixin 名称(){}

使用:@include 名称

• 没有参数

//定义混合
@mixin center(){
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.father{
  width: 300px;
  height: 300px;
  background: red;
  //使用
  @include center();
  .son{
    width: 200px;
    height: 200px;
    background: blue;
    //使用
    @include center();
  }
}

• 带参数

  可以有默认值

   //定义混合
   // $w：默认值是100px
   
  @mixin whc($w: 100px, $h: 100px, $c: #000){
    width: $w;
    height: $h;
    background: $c;
  }
  
  // 宽度、高度使用默认值的时候，颜色不用，必须带上 **形式参数** 
  .box2{
    @include whc($c: blue);
  }
  
  
  .box1{
    @include whc(300px, 300px, red);
  }
  
  

• 可变函数 和 less一样

  //定义混合
  @mixin animate($name, $time, $args...){
    transition: $name $time $args;
  }
  
  //使用
  div{
    width: 200px;
    height: 200px;
    background: red;
    //transition: all 4s linear 0s;
    //使用
    @include animate(all, 4s, linear, 0s);
  }
  

2.3引入其他sass文件

//引入其他，scss文件，后缀名可加，可不加
@import "search.scss";

2.4函数

• 自定义函数

  格式:@function 函数名(形式参数){函数体}

 //定义函数
@function sum($num){
    //返回值
    //注意：格式 @return
   @return $num + $num +"px";
}

div{
    //使用
  width: sum(2);
  height: 200px;
 
}

• 内置函数

  内置函数，执行使用就行了

2.5嵌套结构

子级盒子嵌套使用在父级盒子里面

.father{
  width: 300px;
  height: 300px;
  background: red;
  //使用拼接
  &:hover{
    width: 100px;
    height: 100px;
    background: yellow;
  }
  //嵌套
  .son{
    width: 200px;
    height: 200px;
    background: blue;
  }
}

2.6继承

格式:@extend .xxx 其中xxx是要继承的类

//定义
.center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.father{
//继承
  @extend .center;
  width: 300px;
  height: 300px;
  background: red;
  
  .son{
    @extend .center;
    width: 200px;
    height: 200px;
    background: blue;
   
  }
}

2.7 Sass中的条件判读和循环

• 条件判断

  在sass中可以直接，使用 if(){}elseif()

 //定义一个混合
 
 @mixin triangle($dir, $width, $color){
  width: 0;
  height: 0;
  border-width: $width;
  border-style: solid solid solid solid;
  //条件判断
  @if($dir == Up){
    border-color: transparent transparent $color transparent;
  }@else if($dir == Down){
    border-color: $color transparent transparent transparent;
  }@else if($dir == Left){
    border-color: transparent $color transparent transparent;
  }@else if($dir == Right){
    border-color: transparent transparent transparent $color;
  }
}



div{
    //使用混合
  @include triangle(Left, 50px, blue);
}

• 循环

  @for $i from 起始整数 through 结束整数{}

  @for $i from 起始整数 to 结束整数{}
  两者的区别 through包头包尾, to包头不包尾

ul{
  li{
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    font-size: 20px;
    color: #fff;
    background: red;
   
    //@for $i from 5 through 8{
    //@for $i from 5 to 8{
    $i:5;
    @while($i <= 8){
      &:nth-child(#{$i}){
        background: deepskyblue;
      }
      $i:$i+1;
    }
  }
}