Sass变量及嵌套

1. 变量：SASS允许使用变量，所有变量以$开头。

　　变量声明：$highlight-color: #000;

　　注意：变量可以在css规则块定义之外存在。如下例子：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后
nav {
  width: 100px;
  color: #F90;
}
$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。
$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块 内使用。
这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

　　变量引用：css生成时，变量会被他们的值替代，以后只需要改变这个变量的值，所有引用变量的地方的值都会改变。

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

//编译后
.selected {
  border: 1px solid #F90;
}

　　变量名用中划线还是下划线：这两种用法相互兼容，没有区别。用中划线声明的变量可以使用下划线的方式引用，反之亦然。

　　如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$left: left;
div{
    margin-#{$left}:40px;
}

　　sass允许在代码中使用算式

　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

 

2. 嵌套：选择器和属性都可以嵌套

　　父选择器的标识符：&

　　sass使用后代选择器的方式生成这种连接（父选择器 空格 子选择器）。使用:hover伪类时这种后代选择器连接不起作用，所以需要用到&。看完以下例子就明白了.

article a {
  color: blue;
  :hover { color: red }
}

//编译后如下

article a {
  color: 3ee;
}
article a :hover {
  color: red;
}
问题： 第11行代码 a后面多了空格，所以color:red是不起作用的

当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：

article a {
  color: 3ee;
  &:hover { color: red }
}
//编译后
article a { color: 3ee; }
article a:hover { color: red; }

　　群组选择器的嵌套： 减少工作量，但是会降低网站速度

.container {
    h1,h2,h3{color: red;}
}
//编译后
.container h1, .container h2, .container h3 { color: red; }

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

// 选择article下的所有命中section选择器的元素 article section { margin: 5px }

// 子组合选择器>选择一个元素的直接子元素 article > section { border: 1px solid #ccc }

// 同层相邻组合选择器+选择header元素后紧跟的p元素 header + p { font-size: 1.1em }

//同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素 article ~ article { border-top: 1px dashed #ccc }

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

//编译后
article ~ article { border-top: 1px dashed #ccc }
article > section{ background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

　　嵌套属性：以border为例:

//border后面必须加上冒号:
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
//编译后

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

border缩写形式:

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//编译后
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3. 注释

标准的CSS注释 /* comment */ ，会保留到编译后的css文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*! 
　　　　重要注释！
*/