css预处理器less,sass,stylus

妖狐艹你老母 2021-11-23 01:28 374阅读 0赞

**什么是 CSS 预处理？为什么要有 CSS 预处理？**

可以实现css变量和函数的功能 ，给我们带来动态语言所具有的优势。  
**less**  
1. less文件必须以.less结尾  
2. 定义变量：@字符开头

@bgColor:#000;//定义变量
    
    /*编译前less*/
    .content{ 
    	background:@bgColor;
    }
    /*编译后css*/
    .content{ 
    	background:#000;
    }

1.  后代选择器 也就是说可以嵌套,添加伪类用&符号

/*编译前less*/
    @bg:#000;
    @fontColor:#ffff;
    .content{ 
        width: 100px;
        height: 100px;
        background-color: @bg;
        .select{ 
            color:@fontColor;}
        &:after{ 
            content: '';
        }
        @media (min-width:768px) { 
            background-color: aqua;
            
        }
    
    }
    
    /*编译后css*/
    .content { 
      width: 100px;
      height: 100px;
      background-color: #000;
    }
    .content .select { 
      color: #ffff f;
    }
    .content:after { 
      content: '';
    }
    @media (min-width: 768px) { 
      .content { 
        background-color: aqua;
      }

1.  函数

/*编译前less*/
    .content{ 
        .func(100px);
    }
    .func(@px){ 
    	height:@px;
    }    
        
    /*编译后css*/
    .content{ 
      	height:100px;
    }

1.  运算  
    LESS支持一些算术运算，例如加号(+)，减号( - )，乘法(\*)和除法(/)，它们可以对任何数字，颜色或变量进行操作。

/*编译前less*/
    @border:1px;
    .content{ 
        width: 100px;
        border: @border*3 solid red;/*运算*/
        }
    /*编译后css*/
       .content{ 
        width: 100px;
        border: 3px solid red;/*运算*/
        }

1.  转义字符

/*编译前less*/
    @min768:~"(min-width:768px)";
    .content{ 
       @media @min768 { 
            background-color: aqua;
            
        }
    
    }
    /*编译后css*/
    @media (min-width: 768px) { 
      .content { 
        background-color: aqua;
      }

1.  作用域

/*编译前less*/
    @var: red;
    .content { 
      @var: white;
      .select { 
        color: @var; // white
      }
    }
    
    /*编译后css*/
    .content .select{ 
    	color:white;
    }

**sass**  
sass和less主要区别:  
在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。  
**stylus**