sass使用

sass编译和介绍

1. 安装vscode插件Live Sass Compiler编译sass
2. 开启watch sass监听编译
3. .sass和.scss区别之一.scss有{}包裹，推荐用.scss，下面以.scss为主

sass使用

1.变量

• scss

    $p-color: #ccc;
    $p-border: 1px solid $p-color;//变量引用变量
    p{
      color: $p-color;
      border: $p-border
    }
  

• css

    p {
      color: #ccc;
      border: 1px solid #ccc;
    }
  

2.嵌套

• scss

    p{
      span{
        color: #ccc;
        i{
          color: red;
        }
      }
    }
  

• css

    p span {
      color: #ccc;
    }
  
    p span i {
      color: red;
    }
  

3.父级引用

• scss

    p{
      .t{
        color: red;
        &:hove &{//& = p .t
          color: #000;
        }
      }
      &:hover{//& = p
        color: #ccc;
      }
    }
  

• css

    p .t {
      color: red;
    }
  
    p .t:hove p .t {
      color: #000;
    }
  
    p:hover {
      color: #ccc;
    }
  

4.嵌套属性

• scss

    div{
      font: {
        family: Arial;
        size: 20px;
      }
      border: 1px solid #cccccc{
        left: 0;
        right: 0;
      }
    }
  

• css

    div {
      font-family: Arial;
      font-size: 20px;
      border: 1px solid #cccccc;
      border-left: 0;
      border-right: 0;
    }
  

5.混入

• scss

    @mixin m {
      color: red;
      a{
        color: #ccc;
      }
    }
  
    p {
      @include m;
    }
  

• css

    p {
      color: red;
    }
  
    p a {
      color: #ccc;
    }
  

6.混入参数

• scss

    @mixin m ($c1, $c2){
      color: $c1;
      a{
        color: $c2;
      }
    }
  
    p {
      @include m(#000, #ccc);
    }
    div {//指定参数
      @include m($c2:#000, $c1:#ccc);
    }
  

• css

    p {
      color: #000;
    }
  
    p a {
      color: #ccc;
    }
  
    div {
      color: #ccc;
    }
  
    div a {
      color: #000;
    }
  

7.继承

• scss

    .a {
      color: red;
    }
    .a a {
      color: black;
    }
    .b {
      @extend .a;//继承.a所有相关样式
      background: #ccc;
    }
  

• css

    .a, .b {
      color: red;
    }
  
    .a a, .b a {
      color: black;
    }
  
    .b {
      background: #ccc;
    }
  

8.导入

• scss

    @import "a.scss";
  
    div {
      color: red;
    }
  

• css

    p {
      color: red;
    }
  
    div {
      color: red;
    }
  

9.选择器，属性名使用变量

• scss

    $a: 'p';
    $c: red;
  
    .#{$a}-t {//选择器使用变量
      color: $c;
      #{$a}adding: 1;//属性名使用变量
    }
  

• css

    .p-t {
      color: red;
      padding: 1;
    }
  

10.sass其他

• 数据类型（数字，字符串，颜色，布尔值，列表等）
• 每一种类型的相关函数方法
• if/for/each/while等

11.自定义函数

• scss

    $c: (div:#ccc, p:#000, span:red);//类似map数组
  
    @function gc($key){//自定义函数
      @return map-get($c, $key)//类似数组方法
    }
  
    div {
      color: gc(div);//函数调用
    }
    p {
      color: gc(p);//函数调用
    }
  

• css

    div {
      color: #ccc;
    }
  
    p {
      color: #000;
    }