半个小时入手sass基础

Sass

• 使用变量 $

  $box-width: 300px;
  $box-height: 300px;
  $box-color: pink;
  $box-border: $box-width solid $box-color; // 2. 变量里面引用别的变量，要注意声明顺序，不能先引用后声明
  section {
      width: $box-width; // 1.直接引用变量
      height: $box-height;
      border: $box-border;
  }
  

• 在使用hover场景下用父选择器 &

  // 错误的嵌套：我们以为是这样写
  .article a {
      color: black;
      :hover {
          color: red;
      }
  }
  
  // 实际这样编译出来是没用的，看下面
  .article a {
      color: black
  }
  .article a :hover { // 编译成这种css是没用的
      color: red;
  }
  
  // 正确的嵌套
  .article a {
      color: black;
      &:hover { //使父选择器标识符
          color: red;
      }
  }
  // 这样实际编译出来就是
  .article a {
      color: black;
  }
  .article a:hover {
      color: red;
  }
  

• 嵌套使用

  // 嵌套还是很简单的，基本和平时写的区别不大，看几个例子
  .father {
      .son {
          color: red; //后代选择
      }
  }
  
  .father {
     > .son {
      	color: red; //子代选择
      }
  }
  
  .father {
      + .son {
      	color: red; // 相邻选择器
  	}
  }
  
  .father {
      ~ .son {
      	color: red; // 同层级选择器
  	}
  }
  

• 导入sass文件

  1. sass文件的导入用@import，但是sass的和css的导入不一样，

     • css的是要全部页面加加载完才会去导入css，执行到的css才开始去导入；

     • sass的是在生成css文件的时候就导入进来

  2. 使用sass部分文件：那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件

     • 约定这种文件命名方式： _下划线开头，eg： _theme.scss

     • @import './_theme.scss' //虽然下划线可以省略，还是建议全名
       

  3. 默认变量值：也就是你导入的文件可能会把别人声明的某些值覆盖，按照同名，后声明生效的原则，就会发生这种事请

     // 为了阻止上面那种情况发现，让使用者引入外部scss的时候可以声明自己的变量不被引入进来的覆盖，
     $font-small-size: 14px; !default; // 像这样声明别人引入你的文件的时候如果有声明这个变量，引入的文件就不能覆盖别人的变量
     

  4. 嵌套导入：就是导入的文件只在规则的作用域里面有用

     .box {
         @import './_theme.scss' //这个时候就只在.box这个类里面有用，不会影响全局
     }
     

  • 静默注释

    /* ... */ 这种是css的注释方式，翻代码试可以看到里面注释的
    // 这种是sass的注释方式，生产环境里面是不会看到那些注释
    

  • 混合器

    1. 整合一大段样式在一段代码里面

    2. @mixin name 关键字声明混合器

    3. @include name 关键字使用混合器

    4. 何时使用混合器？千完不要无止境的使用，引用文档的一句话

    如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适
    

    5. 上代码看看混合选择器

    // 一般就这么用
    @mixin test { //声明混合器
        list-style: none;
        height: 300px;
        width: 300px;
    }
    .box { 
        @include test; //使用混合器
    }
    // 其实里面也可以写选择器
    @mixin test {
        list-style: none;
        li {
            list-style-image: none;
            margin-left: 0;
        }
    }
    

    6. 混合器传参，默认参数

    @mixin test($width, $height, $color) { // 混合器写法1，无默认参数
        color: $color;
        &:hover {width: $width}
        $:visited {heigth: $height}
    }
    @mixin test( // 混合器写法2，有默认参数
        $width: 300xp,
        $height: $width,
        $color: pink
        ) {
          color: $color;
        &:hover {width: $width}
        $:visited {heigth: $height}  
    }
    .box {
        @include test(300px, 200px, red); // 引用混合器写法1，按顺序
        @include test{ // 引用混合器写法2，按名称对应
            $width: 300px;
            $height: 200px;
            $color: red;
        }
    }
    
    

• 选择器继承(这部分我个人觉得应该我可会使用很少，所以没怎么看，可以看看这篇mixin和extend该如何选择)

  1. 基本使用

     .father {
         width: 300px;
     }
     .son {
         heigth: 200px;
         @extend .father;  //继承选择器
     }
     

• 学习自sass官方文档

• .sass和.scss两种文件的写法规则的是不太一样的，习惯ruby语言风格的话可以看看sass怎么写，但是现在一般都是支持.scss写法的多