Sass的基本用法
The key to success is to start before you are ready.
很多知识，当你在学习的时候都会了，可是再过段时间就全忘了。好记性不如烂笔头。从长远来看，记录很重要。从学习速度来看，不记当然学得快，但忘得也快!
sass的变量也是有作用域的，定义在规则块内的，只能在规则块内使用。
凡是CSS标准值存在的地方，都可能使用sass变量。
$border: border;
div{
#{$border}-color: red; //变量如果出现在字符串中，需要用#{}包起来
}
0. 注释
//单行注释，编译后不会出现的css文件中
/*
多行注释，编译后会出现的css文件中
*/
1. 嵌套
#content {
article {
h1 { color: gray; }
p { margin-bottom: 1px; }
}
aside { background-color: white; }
}
//生成如下的CSS规则，sass优点：避免重复写CSS选择器
#content article h1 {
color: gray;
}
#content article p {
margin-bottom: 1px;
}
#content aside {
background-color: white;
}
1.1 SASS父选择器 &，尤其在处理伪元素，伪类时特别有用
article a{
display: block;
&:hover{ color: red; }
}
article a {
display: block;
}
article a:hover {
color: red;
}
父选择器还有另外一种用法，可以在其之前添加选择器
#content aside{
color: red;
body.ie & { color: green; }
}
#content aside {
color: red;
}
body.ie #content aside {
color: green;
}
1.2 群组选择器
//群组选择器
.container{
h1, h2, h3 { margin-bottom: 10px}
}
.container h1, .container h2, .container h3 {
margin-bottom: 10px;
}
使用群组选择器要注意，不要过度使用，否则最终生成的CSS文件可能会很大，影响性能。
1.3 子组合选择器: > 同层组合选择器: + ~
article {
//同层选择器～，两种元素必须拥有相同的父元素，但是div不必直接紧随article。
~ div { border-top: 1px dashed #cccccc }
> section { background: #eeeeee } //子选择器>，只会选中article下的直接子元素section
dl > { //子选择器> 如果元素不是父元素的直接子元素，则不会被选择。
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 } //同层选择器+，注意只会选取nav后紧跟的article元素，注意是紧跟.如果有多个nav-article的组合，则都会选中
}
article ~ div {
border-top: 1px dashed #cccccc;
}
article > section {
background: #eeeeee;
}
article dl > dt {
color: #333;
}
article dl > dd {
color: #555;
}
nav + article {
margin-top: 0;
}
1.4 属性嵌套
nav {
border: { //注意这里的冒号
style: solid;
width: 1px;
color: #555555;
}
}
nav {
border-style: solid;
border-width: 1px;
border-color: #555555;
}
还可以像下面这样写
#cart {
border: 1px solid #555555 { //注意这行
left: 0;
right: 0;
}
}
#cart {
border: 1px solid #555555;
border-left: 0;
border-right: 0;
}
2. @import规则
css本身就有@import，但是只有执行到@import时，浏览器才会去下载指定的CSS，导致页面加载慢。
sass也有@import规则，但是sass在生成css时，就把指定的样式合并到一起了。
而且：被导入sass文件中的变量和mixin均可以在导入文件中使用。
被导入的sass文件被称为局部文件，局部文件不需要生成对应的css文件。
sass中只要将文件名以下划线开头，就被认为是局部文件，就不会生成对应的css文件。
在导入局部文件时，省略文件名开头的下划线。
导入sass文件不需要写后缀。
2.1默认变量值
$blue: blue;
$blue: red; //当重复声明变量时，后声明的会覆盖前面声明的
#brand{
color: $blue;
}
#brand { color: red; }
使用默认变量
$blue: blue;
$blue: red !default; //如果变量$blue被声明过了，则用其声明过的值，否则用default指定的值
#brand{
color: $blue;
}
#brand { color: blue; }
被导入文件中的变量可以添加!default标签，因为被导入文件是共通的，当导入文件也指定了相同的变量，就可以重写被导入文件中这些变量的值。
2.2 嵌套导入
被导入的sass文件通常是一些常用的规则。可以在某个选择器范围内导入sass局部文件。
.blue-theme{
@import "blue-theme"; //在规则内部导入局部文件_blue-theme.scss
}
2.3 在sass中使用原生css @import
当下列三种情况下sass会生成css原生@import
a. 被导入文件名以.css结尾
b. 被导入文件名字是一个URL地址
c. 被导入文件的名字是css的url()值
@import "/legacy/reset.css”;
生成如下css文件
@import url(/legacy/reset.css);
3. 混合器@mixin
混合器中不仅可以包含属性，也可以包含css规则。混合器可以定义参数也可以不定义。
//定义mixin
@mixin my-list($value: 10px){
li{
float: left;
margin-right: $value;
}
}
//引用混合器
#header ul.nav{
@include my-list; //@include命令调用mixin
float: right;
}
#footer ul.nav{
@include my-list(20px); //可以传递参数
}
#header ul.nav { float: right; }
#header ul.nav li {
float: left;
margin-right: 10px;
}
#footer ul.nav li {
float: left;
margin-right: 20px;
}
大量的重用混合器可能导致生成的css文件过大，导致加载慢。
4. 继承 @extend
混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。
//通过使用继承，来避免在使用mixin时导致的重复样式
.error{
border: 1px solid yellow;
background: red;
}
.error.instrusion{
font-size: 1.3em;
font-weight: bold;
}
.error .content{
font-size: 15px;
background-color: wheat;
}
.bad_error{
@extend .error; //继承.error的样式
border-width: 3px;
}
生成如下CSS，注意所有关于.error的样式，都被.bad_error继承了就像是把所有 父类参于的样式 都复制了一份，换成子类的名字，只不过都定义在一起了。
.error, .bad_error {
border: 1px solid yellow;
background: red;
}
.error.instrusion, .instrusion.bad_error {
font-size: 1.3em;
font-weight: bold;
}
.error .content, .bad_error .content {
font-size: 15px;
background-color: wheat;
}
.bad_error {
border-width: 3px;
}
4.1占位符
有占位符的sass样式不会编译成css样式
//定义占位符，占位符能把常用的样式保存到一处，而不影响任何一个类名。如果不被继承，不会生成任何CSS
%button_reset{
margin: 0;
padding: .5em 1.2em;
text-decoration: none;
cursor: pointer;
}
.save{
@extend %button_reset;
background-color: green;
color: yellow;
}
.delete{
@extend %button_reset;
background-color: red;
color: white;
}
.save, .delete {
margin: 0;
padding: .5em 1.2em;
text-decoration: none;
cursor: pointer;
}
.save {
background-color: green;
color: yellow;
}
.delete {
background-color: red;
color: white;
}
4.2 尽量不要用后代选择器去继承，但是可以去继承有后代选择器修饰规则的选择器(前提仍然是尽量不要用后代选择器去继承)
a. 尽量不要用后代选择器去继承
#content .error{
color: red;
}
//尽量不要这样做，用后代选择器去继承，编译后生成的CSS会很费解
.message .message_error{
@extend .error;
font-size: 16px;
}
#content .error, #content .message .message_error, .message #content .message_error {
color: red;
}
.message .message_error {
font-size: 16px;
}
b. 可以去继承有后代选择器修饰规则的选择器(前提仍然是尽量不要用后代选择器去继承)
#content .error{
color: red;
}
.message_error{
@extend .error;
font-size: 16px;
}
#content .error, #content .message_error {
color: red;
}
.message_error {
font-size: 16px;
}
Sass的变量，嵌套，混合器，继承都是为了减少重复。
混合器允许用户在编写语义化样式的同时避免视觉层面的样式重复(语义化样式多是类定义的样式，通过在类定义的规则中@include @mixin)。
继承则是声明类之间语义化的关系，通过继承来保持css的整洁和可维护性。
PS: 写完了，深感写博的不容易，现在看到的代码格式是重新整理的...开始写的在rtf中有格式，复制到ecto中就没有了...
