关于css:css预处理器

css 预处理器

1. scss 的应用

Sass 是成熟、稳固、弱小的 CSS 预处理器，而 SCSS 是 2010 年 5 月的 Sass3 版本当中引入的新语法个性，种语法旨在通过引入 CSS 敌对语法来缩小 Sass 和 CSS 之间的差距。齐全兼容 CSS3 的同时继承了 Sass 弱小的动静性能。

• sass 和 scss 的区别

  • 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
  • 语法书写形式不同，Sass 是以严格的缩进式语法规定来书写，不带大括号 ({}) 和分号(;)，而 SCSS 的语法书写和咱们的 CSS 语法书写形式十分相似。

  // sass 语法：$font-stack: Helvetica, sans-serif  // 定义变量
  $primary-color: #333 // 定义变量
  body
    font: 100% $font-stack
    color: $primary-color
  
  // scss 语法：$font-stack: Helvetica, sans-serif;
  $primary-color: #333;
  body {
    font: 100% $font-stack;
    color: $primary-color;
  }

• scss 变量

  变量用来存储须要在 CSS 中复用的信息，例如色彩和字体。SASS 通过 $ 符号去申明一个变量。

  $primary-color: #333;
  body {color: $primary-color;}

• scss 嵌套:

  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      li { 
        display: inline-block;
        &>a { // 父选择器的标识符 &
          color: red
        }
      }
    }
  }

• @import 引入

  // _reset.scss
  html, body, ul, ol {
    margin:  0;
    padding: 0;
  }
  
  // base.scss
  @import 'reset';
  body {
    font: 100% Helvetica, sans-serif;
    background-color: #efefef;
  }

  在 scss 中引入 scss 文件时能够省略文件扩展名

• 函数：

  • sass 自带函数 max, min, ceil, floor, 查看所有自带函数列表

  • 自定义函数：

    @function addWidth($width1,$width2){@return $width1+$width2;}
    div{width:addWidth(100px,20px);
    }

• Mixin 混入

  混合（Mixin）用来分组那些须要在页面中复用的 CSS 申明，开发人员能够通过向 Mixin 传递变量参数来让代码更加灵便，该个性在增加浏览器兼容性前缀的时候十分有用，SASS 目前应用 @mixin name 指令来进行混合操作。

  @mixin rounded-corners {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }
  
  .notice {
    background-color: green;
    border: 2px solid #00aa00;
    @include rounded-corners;
  }

  能够通过在引入混合器时给混合器传参，来定制混合器生成的准确款式。这样形式跟 JavaScript 的 Function 很像：

  @mixin link-colors ($normal, $hover, $visited) {
    color: $normal;
    &:hover {color: $hover ;}
    &:visited {color: $visited;}
  }
  a {@include link-colors(blue, red, green)
  }

• @extend 继承

  .error {
    border: 1px solid red;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }

• deep 深度作用选择器

  <style lang="scss" scoped>
    .button-box{
      /deep/ .el-button{padding: 13px 50px;}
    }
  </style>

• 根底运算:

  // 加：+
  .div1{width: 10px+10px;}
  .div2{width: 10px+10;}
  
  // 减：-
  .div1{width: 10px-5px;}
  .div2{width: 10px-5;}
  
  // 乘：*
  .div1{width: 10px*px; // 报错}
  .div2 {width: 20px;}
  
  除：/
  .div1{
    // 不正确
    width: 10px/2;
  }
  .div2{
    // 不正确
    width: 10px/2px;
  }
  .div3{
    // 不正确
    width: (10px/2px);
  }
  .div4{
  // 正确
    width: (10px/2);
  }

• 插值语句

  $height:10px;
  $name:height;
  .div-#{$name}{#{$name}: #{$height};
  }

• @if、@for、@each、@while

  $type: monster;
  p {
    @if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
  }

  @mixin does-parent-exist {
    @if & {
      &:hover {color: red;}
    } @else {
      a {color: red;}
    }
  }
  // 如果没有父选择器，& 的值将是空，你能够在一个 mixin 中应用它来检测父抉择是否存在

  @for $i from 1 through 3 {.item-#{$i} {width: 2em * $i;}
  }
  
  // 等于
  .item-1 {width: 2em;}
  
  .item-2 {width: 4em;}
  
  .item-3 {width: 6em;}

2. less 的应用

less 是一门 css 预处理它裁减了 CSS 语言，减少了诸如变量、混合（mixin）、函数等性能，让 CSS 更易保护、不便制作主题、裁减。Less 能够运行在 Node 或浏览器端。

• 嵌套：

  .container {

  h1 {
    font-size: 25px;
    color:#E45456;
  }
  p {
      font-size: 25px;
      color:#3C7949;
  }
  .myclass {
    h1 {
      font-size: 25px;
      color:#E45456;
    }
    p {
      font-size: 25px;
      color:#3C7949;
    }
  }

  }

• 变量：

  // 在 less 中应用 @XXX 定义变量
  @width: 10px;
  @height: @width + 10px;
  
  #header {
    width: @width;
    height: @height;
  }
  @b: box
  @rem: 64px;
  #{@b}1 {
    width: @width*2;
    height: @width*@rem;
    background: red;
  }
  // 写在 {} 之间 叫做局部变量，只能够在 {} 之间起作用
  .box {
    @width: 200px; 
    width: @width;
  }
  

• 混入

  // 不带参数，无默认值
  .div1 {
    width:200px;
    height:200px;
    backgorund-color;red;
  }
  .div2 {
    border:1px solid red;
    .div1
  }

  // 带参数，无默认值
  .div1(@w) {border:solid red @w;}
  .div2 {
    widthz;200px;
    height:200px;
    .div2(30px);
  }

  // 带参数带默认值
  .div1(@w:3px) {norder:solid red @w'}
  .div2 {
    widthz;200px;
    height:200px;
    .div2(); // 不传参（然而得有小括号），默认就是 3px，传参就是新值}
  
  // 混入中减少判断条件
  .width(@weight) when (@weight > 200px)
  {width：@weight;}
  #box2 { // 无成果
      .width(200px);
  }
  #box3 {.width(300px);
  }