CSS预处理

CSS预处理器

1.什么是CSS预处理器?

​ CSS预处理器定义了一种新的语言,其基本思想是用一种专门的编程语言,为CSS增加一些编程的特性,将CSS作为目标生成文件,然后开发者就要使用这种语言进行编码工作

有点: 使用CSS预处理器语,可以让我们的CSS代码更加简洁,适应性更强,可读性更佳,更易于维护等

目前比较优秀的CSS预处理语言有Less,Sass(Scss),Stylus

Less和Sass包含了一套自定义语法及一个解释器,用户根据这些语言定义自己的样式规则,这些规则就会通过解析器,编译成对应的CSS文件,只有在被编译后才能够被浏览器识别使用.编译Less,Sass的方法有很多,比如通过命令行编译,编译器编译,在线编译,第三方工具等.

2.Less语法:

less学习网址[https://less.bootcss.com/]

1. 注释

   less有两种注释:

   ​ 标准的CSS注释/**/,会保留在编译后的文件

   ​ 单行注释//,只保留在less源文件中,编译后就会被省略

2. inmport导入样式

   引入.css文件,同于css的import命令

   @import `reset.css`
   

   编译后的结果

   import reset.css
   

   @import `reset`
   

   编译后:导入的文件会与当前的文件内容合并

3. 变量

   Less允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更简单

   ​ (1)变量@开头,变量名与变量值之间是 **：**分割

   @width:`20px`
   #header{
   width:@width;
   }
   

   ​ (2)变量嵌套在字符串时,必须写在@{}之中

   @side:left;
   .round{
       border-@{side}-radius:5px;
   }
   

4. 嵌套

   1. 选择器嵌套

      p{
          font-size:20px;
          a{
              text-decoration:none;
              &:hover{border-width:1px}
              //在嵌套代码块内,可以使用&引用父元素
          }
      }
      

5. 混合

   混合是可以将一个定义好的class A 轻松的引入另一个class B中,从而实现class B继承classA中的所有属性

   • 混合之继承类

     .border{
         border:1px dotted red;
     }
     .main{
         color:#fff;
         .border;
     }
     

   • 混合参数没有设置默认值,此时调用必须传入参数

     //定义
     .top(@top){
         top:@top;
     }
     //调用
     #main{
         .top(30px);
     }
     

   • 混合参数并且设置了默认值,调用时可以不用传入参数

     //定义
     .top(@top:20px){
         top:@top;
     }
     //调用
     #main{
         .top;
     }
     //如果调用时传入参数,则使用传入的值
     #cont{
         .top(50px)//覆盖掉20px
     }
     

   • 混合参数中使用@arguments来引用所有传入的变量

     //定义
     .box-shadow(@x:0,@y:0,@blur:1px,@color:#000){
         box-shadow:@arguments;
         -moz-box-shadow: @arguments;
         -webkit-box-shadow: @arguments;
     }
     //调用
     div{
         .box-shadow(10px,5px);
     }
     

6. 继承:extend伪类来实现样式的继承使用

   混合型已经可以实现简单的继承了,为什么还要使用extend来实现继承呢,这是因为混合型实现继承的原理是把代码复制了一遍,编译后的CSS代码中就会有大量的冗余代码,二extend就可以很好的避免这一缺点

   .public{
       background:red;
   }
   li{
       &:extend(.public);
       list-style:none;
   }
   //等于
   li:extend(.public){
       list-style:none;
   }
   

   结果:

   .public,li{
       background:red;
   }
   li{
       list-style:none;
   }
   

7. 运算

   任何的数字,颜色,变量都可恶意参与运算,运算应该被包裹在括号中,()进行优先计算

   .width{
       width:(200px-30)*20;
   }
   //结果
   .width{
       width:3400px
   }
   

3.软件使用

1. 软件介绍
   Koala官网下载地址：[http://koala-app.com/index-zh.html]
   koala是一个前端预处理器语言图形编译工具，他可以跨平台运行，完美兼容windows、linux、mac。
2. 操作步骤

4.Sass语法

1. ​ 注释：Sass跟Less注释语法一样

2. Sass引用@import url(reset.css)

   sass学习网址：[https://www.sass.hk/docs/]