less与cass使用小教程

less

安装依赖
       npm i less  less-loader 

   1：定义变量

     @width:50px;
     .box{
      @height:30px;
       width:@width;
        }

  2:嵌套
   

  .box{
   .box-son{
       
        }
    }

   3:&:父级
   

.box{
      &:hover{
       // 移入box后的样式处理
       }      
   }

   4:函数
   

  .border(@color,@width){
     border:@width solid  @color;
     }
     .box(){
     width:10px;
     height:10px;
     }
     .main{
       .border('#000000',1px);
       .box();
     }

sass （scss是sass的升级版本）

官网：https://www.sass.hk/

安装依赖

                     npm i node-sass sass-loader style-loader -D
 淘宝镜像：  cnpm install sass-loader node-sass vue-style-loader --D

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{

 test: /\.sass$/,

 loaders: ['style', 'css', 'scss']

}

 

 1:定义变量
   

  $变量名:值；
      $width:50px;

   2:嵌套
      .

    main{
      .box{

          }
      }

   3:&:代表父级
     

.box{
         &:hover{
         color:red;
         }
      }

   4:混入
      

      定义函数：
      @mixin 方法名($参数1,$参数2){
           相应css代码           
      }
      使用：
        .box{
          @include 方法名(实参1,实参2);
        }

  5:承继
     

定义
         样式名{...}
         %border{
           boder:1px solid red;
         }
      
      使用
         @extend 样式名;
        .main{
           @extend %border
        }