Sass基本用法

使用变量

1. 变量声明

    // 使用$符号来表示变量
    // （老版本sass使用！来标识变量）
    $background-color: red;

2. 变量引用

    // 规则块外声明，其他规则块也可引用
    $background-color: red;
    nav {
        background: $background-color;
    }
    
    // 规则块内声明，只能在该块中使用
    nav {
        $background-color-2: grey;
        background: $background-color-2;
    }
    
    // 凡是css属性的标准值，就可以用变量声明后,代替
    $highlight-color: red;
    .selected {
        border: 1px solid $highlight-color;
    }
    
    // 在声明变量时，变量值也可以引用其他变量
    $highlight-color: red;
    $highlight-border: 1px solid $highlight-color;
    .selected {
        border: $highlight-border;
    }

嵌套css规则

1. 父级选择器的标识符&

    // & === 父级
    // 这里 & === article
    article  {
        &hover {
            color: red;
        }
    }

2. 群组选择器的嵌套

    // `css`的写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。
    .container h1, .container h2, .container h3 { 
        margin-bottom: .8em 
    }
    
    // sass 
    .container {
      h1, h2, h3 {margin-bottom: .8em}
    }   

3. 子组合选择器和同层组合选择器：>、+、~

   // 子组合选择器 >
   // 第一个选择器会选择article下所有命中 p 选择器元素
   //（包括如果 p 嵌套了 p ,也会被选中）
   // 第二个会选择 article 下所有命中 p 元素
   //（不会选择到子 p 下面的孙 p ）
   article p { margin: 5px }
   article > p { border: 1px solid #ccc }
   
   // 同层相邻选择器 +
   // 选择同级的、并且紧跟在后面的元素(第一个p元素)
   article + p { border: 1px solid #ccc }
   // 同层全部选择器 ~
   // 选择同级的、所有p元素
   article ～ p { border: 1px solid #ccc }