scss 一些语法

1. @import 引入其他样式

   @import "home";
   // 引入 home.scss 样式
   
   @import "home.css"
   // 引入 home.css 样式

2. 声明变量

   // 定义支持的浏览器
   $supported-browsers: chrome,firefox,ie,opera,safari;
   
   // 红色
   $red-color: #F00;
   
   .lantern {
       color: $red-color;
       border: 1px solid $red-color;
   }
   // .lantern{ color: #F00; border: 1px solid #F00; }

3. 样式嵌套

   .navbar{
       position: fixed;
       width: 100%;
       .navbar-header{
           float: left;
           a{
               font-size: 24px;
           }
       }
   }
   // .navbar .navbar-header a { font-size: 24px; }
   
   .container {
       h1, h2, h3 {
           margin-bottom: 6px;
       }
   }
   // .container h1, .container h2, .container h3 { margin-bottom: 6px; }

4. &父选择器

   ul{
       list-style: none;
       li{
           background-color: #37bed4;
           &:hover{
               background-color: #fffdf3;
           }
       }
   }
   // ul li:hover { background-color: #fffdf3; }

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

   • 子组合选择器>, 选择一个元素的直接子元素, 例如: article > section { border: 1px solid #ccc }
   • 同层相邻组合选择器+ , 例如: header + p { font-size: 1.1em }
   • 同层全体组合选择器~ , 例如: article ~ article { border-top: 1px dashed #ccc }

6. @mixin混合器

   @mixin rounded-corners {
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
       border-radius: 5px;
   }
   
   notice {
       @include rounded-corners;
   }
   
   @mixin link-colors($normal){
       color: $normal;
   }
   // 有传参情况, 使用 `@include link-colors(red)` 引用

7. 选择器继承, @extend

   .admin-content{
       height: 100%;
   }
   .admin-sidebar {
       @extend .admin-content;
   }
   // .admin-sidebar 同 .admin-content 样式一样
   
   %non-margin-pading {
       margin: 0px;
       padding: 0px;
   }
   .am-u-md-5,.am-u-md-7,.am-u-md-6{
       @extend %non-margin-pading;
   }
   // 同上, 但是 non-margin-pading 并非作为一个样式

8. @at-root 根样式

   .am-u-md-5{
       @at-root{
           .am-tab-panel{
               margin: 0 4px 0 4px;
           }
       }
   }
   // .am-tab-panel 将作为第一级样式, (与 .am-u-md-5 同级)

---

参考文档

• Sass 基础教程