预处理器sass和less

预处理器sass和less

什么是CSS预处理器?

CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

相同之处：

sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等两者各有优势，请根据个人习惯及需要选择。

主要区别：

在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。

• 在vue中使用sass

1、进入项目根目录，安装依赖

cd myvue
npm install

2、安装依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

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

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
         {  
          test: /\.scss$/,
          loaders: ["style", "css", "sass"]
        }
      ]
  }

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

4、在 .vue 文件中修改

<style lang="scss"></style>

Sass常用语法：

• 变量： $width:5px; 在字符串中使用#{}引用变量，类似ES6模板字符串的 ${}，支持运算：+ - * / ()

  /*变量用 $ */
  $color-red: red;
  // 在另一变量中引入$color-red 
  $border: 1px solid $color-red;
  
  /*通过 #{} 插值语句可以在选择器或属性名中使用变量：*/
  $name: foo;
  $attr: border;
  p.#{$name} {
    #{$attr}-color: blue;
  }
  /*编译为*/
  p.foo {
    border-color: blue; 
  }
  

• 嵌套：（1）选择器嵌套 .box { .list{ } } （2）属性嵌套 font: { family: ‘fangsong’; size: 20px; weight: 700;}

• 父选择器： &引用父元素

  #main {
    color: black;
    a {
      font-weight: bold;
      &:hover { 
        color: red; 
      }
    }
  }
  
  /*编译为：*/
  #main {
    color: black; 
  }
  #main a {
    font-weight: bold; 
  }
  #main a:hover {
    color: red; 
  }
  

• 混合：@mixin 定义混合； @include 导入混合

• 继承：.p2 { @extend .p1; }

• 导入：@import();用来导入外部文件。

• 媒体查询：@media

• 颜色函数：hsl等

• 控制指令：if语句、for语句、each语句、while语句

• 自定义函数：@function double($n) { @return $n * 2; }

• 在vue中使用less

  1、进入项目根目录，安装依赖

cd myvue
npm install

2、安装依赖包

npm install less --save 
npm install less-loader --save 

3、修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}
{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
},

4、在 .vue 文件中修改

<style lang="less"></style>

Less常用语法：

• 变量： @width:5px; 支持运算： 支持 + - * /
• 嵌套：（1）选择器嵌套；（2）父选择器&；（3）媒体查询
• 混合：自定义方法 .p3{ .p2; .borderRadius(10px);}
• 继承： .p2:extend(.p1){}
• 导入：@import()
• 函数：自带函数