sacss

 1.scss中定义变量

$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;这样写 !default 表示是默认值
 
.btn-default{
   background-color:$bg-color;
}
 
.btn-default{//编译后是
    background-color:#ed795a;
}
 

 2.变量引用

在变量定义完成之后，这时变量还没有生效，除非引用这个变量。下面为大家讲解变量的使用方法。示例代码如下。

$highlight-color: #F90; .selected { border: 1px solid $highlight-color; }

3.中划线、下划线的使用

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词(如$highlight-color)，而有些人喜欢使用下划线(如$highlight_color)。使用中划线的方式更为普遍，这也是compass和本文都用的方式。

不过，sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。这意味着即使compass选择用中划线的命名方式，这并不影响你在使用compass的样式中用下划线的命名方式进行引用:

$link-color: blue; a { color: $link_color; } //编译后 a { color: blue; }

.子组合选择器和同层组合选择器： >、+和 ~
选择article元素下的所有section子元素
    <article>
        <section>Lorem, ipsum.</section>
        <section>Lorem.</section>
        <div>div1</div>
        <section>Lorem, ipsum dolor.</section>
    </article>

article {
    > section {
        color: #f00;
    }
}

同层相邻组合选择器+选择header元素后紧跟的p元素(p1)
    <header>header</header>
    <p>p1</p>
    <p>p2</p>

header {
    + p {
        color: #f00;
    }
}

同层全体组合选择器~，选择所有跟在header后的同层p元素(p1,p2,p3)
    <header>header</header>
    <p>p1</p>
    <p>p2</p>
    <div>div1</div>
    <p>p3</p>

header {
    ~ p {
        color: #f00;
    }
}

. 嵌套属性
    <nav>
        <ol>
            <li>百度</li>
            <li>谷歌</li>
        </ol>
    </nav>

nav {
    ol {
        li {
            border: {
                style: solid;
                width: 1px;
                color: #f00;
            }
        }
    }
}