Sass学习

前言

这两天刚好学到sass，分享一下自己在学习过程中总结的点

正文

基本用法

• sass中导入另一个sass
  • @import "路径"
• 注释
  • 单行注释 //，编译后省略，只会保留在sass源文件中
  • 多行注释 /* */ ，会保留在编译后的css文件中
  • 重要注释 /*! */，在*后加一个!，压缩代码后也会保留
    　- 变量
  • 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

      $font-primary-color: #0f0;
      $border-base: 1px solid $font-primary-color;
      $primary-background-color: #f1f1f1;
      $side: left;
  
      #app {
        background-color: $primary-background-color;
  
        p {
          color: $font-primary-color;
        }
  
        h2 {
          margin-#{$side}: 5rem;
          border: $border-base;
        }
  
      }
  

• 嵌套

      nav {
        border: 1px solid #000;
      }
  
      nav ul {
        list-style: none;
      }
  
      nav ul li {
        display: inline-block;
        margin-left: 3rem;
      }
  
      //上面的代码可以这样写
  
      nav {
        border: 1px solid #000;
  
        ul {
          list-style: none;
  
          li {
            display: inline-block;
            margin-left: 3rem;
          }
        }
      }
  

  • 调用父选择器

      .father {
        a {
          &:hover {
            font-weight: 700;
          }
    
          color: red;
        }
      }
    

  • 属性的嵌套
    • 注意要在属性名后加上一个冒号

       .property {
        font: {
          family: Algerian;
          size: 30px;
          weight: bolder;
        }
    
        border: $border-base {
          radius: 10px;
          left: none;
          top: none;
        }
    
       }
    

• 颜色函数
  • lighten(color, n%) 使该颜色变浅n%
  • darken(color, n%) 使该颜色变深n%
  • 还有其他函数不常用，在这里不举例

      color: lighten($font-primary-color, 30%);
      background-color: darken($primary-background-color, 30%);
  

代码复用

• mixin

      @mixin alert {
        border: $border-base;
        background-color: deeppink;
        height: 5rem;
        width: 5rem;
        &:hover {
          background-color: #000000;
        }
      }
  
      .alert {
        @include alert
      }
  

  • 参数和缺省
    • 参数命名要以$符号开头
    • 如果指定参数名称，那么必须都要每个参数都要指定，则可以忽略参数个数和顺序；不指定则老老实实对照着写
    • 缺省的参数最好顺序靠后

        @mixin alert($baseColor: deepPink,$hoverColor:#000) {
          border: $border-base;
          background-color: $baseColor;
          height: 5rem;
          width: 5rem;
          &:hover {
            background-color: $hoverColor;
          }
        }
    
        .alert {
          @include alert
        }
    
        .alert2 {
          @include alert(#fff, #0f0)
        }
    

  • 参考阮一峰老师（链接）的一个例子,这是一个圆角边框兼容浏览器前缀写法

        @mixin radius($vert, $horz, $radius:10px) {
          -moz-border-radius-#{$vert}-#{$horz}: $radius;
          -webkit-border-#{$vert}-#{$horz}-radius: $radius;
          border-#{$vert}-#{$horz}-radius: $radius;
        }
    

• 继承 @extend

  • 一个选择器可以将另一个选择器的样式继承过来

        p {
          color: $font-primary-color;
        }
  
        p a {
          font-size: 40px;
        }
  
        h2 {
          @extend p;
          margin-#{$side}: 5rem;
          border: $border-base;
        }
  

  • 注意，@extend会把与被继承选择器相关的一并继承过来。在上面这个例子中，h2中的a也会变化

指令和函数

• 条件语句@if
  • @if $test == light 不能用三等号，且如果是判断是否等于一个字符串，则这个字符串可以不用引号包裹

    @if $flag {
        p {
          color: $font-primary-color;
        }
      } @else {
        h2 {
          color: opacify($font-primary-color, .1);
          background-color: transparentize($primary-background-color, 1);
          margin-#{$side}: 5rem;
          border: $border-base;
        }
      }

• 循环语句@for
  • from through，可以理解为停止循环的条件是index <= length
  • from to，可以理解为停止循环的条件是index < length，相对于from through来说，少进行一次循环
  • each 与for类似

      $length: 1, 2, 3, 4, 5;
  
      @for $i from 0 through $length {
        .jpg-#{$i} {
          background: url("./jpg/#{$i}.jpg");
        }
      }
  
        @each $item in $length {
        .jpg-#{$item} {
          background: darken(#409EFF, $item*10);
        }
      }
  

• 自定义函数
  • map_get() 函数是遍历list，匹配key输出value

      $colors: (light:#fff, dark:#000, primary:pink);
  
      @function getColor($key) {
        @return map_get($colors, $key)
      }
  
      span {
        color: getColor(primary);
      }
  

结语

如果对你有帮助的话，请点一个赞吧