css预处理器

Posted 2021-09-29 。。

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);
  }