SCSS 实用知识汇总

1、变量声明

$nav-color: #F90;nav {    //$width 变量的作用域仅限于{}内    $width: 100px;    width: $width;    color: $nav-color;}.a {    //报错，$width未定义    width: $width;}

2、父选择器&

scss代码：

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

编译后为：

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

父选择器的另外一个用途，可以在父选择器之前添加选择器，如处理IE的hack，在html或者body上添加ie class。

示例代码：

#content aside {  color: red;  body.ie & { color: green }}

编译后为：

#content aside {    color: red;}body.ie #content aside {    color: green;}

3、群组选择器

.container {  h1, h2, h3 {margin-bottom: .8em}}

编译后：

.container h1,.container h2,.container h3 {    margin-bottom: .8em;}

 

也可以这样：

nav, aside {  a {color: blue}}

编译后：

nav a,aside a {    color: blue;}

4、>、+和~选择器

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;}

5、SCSS局文件

sass局部文件的文件名以下划线开头。

目的：

sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。

 

说明：

（1）使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀。

（2）当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。

（3）不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

 

6、混合器

混合器定义：

@mixin rounded-corners {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;}

使用混合器：

notice {  background-color: green;  border: 2px solid #00aa00;  @include rounded-corners;}

编译后为：

notice {    background-color: green;    border: 2px solid #00aa00;    border-radius: 5px;}

2个关键字：@mixin和@include

 

混合器传参：

@mixin link-colors($normal, $hover, $visited) {  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}

使用：

a {  @include link-colors(blue, red, green);}

编译后为：

a {    color: blue;}a:hover {    color: red;}a:visited {    color: green;}

混合器主要用于展示性样式的重用

7、选择器继承

.error {  border: 1px red;  background-color: #fdd;}.seriousError {  @extend .error;  border-width: 3px;}

编译后为：

.error,.seriousError {    border: 1px red;    background-color: #fdd;}.seriousError {    border-width: 3px;}

继承是建立在语义化的关联。

 

Sass 允许延伸任何定义给单个元素的选择器：

.error {border: 1px #f00;background-color: #fdd;}.error.intrusion {background-image: url("/image/hacked.png");}.seriousError {@extend .error;border-width: 3px;}

编译后为：

.error,.seriousError {    border: 1px #f00;    background-color: #fdd;}.error.intrusion,.intrusion.seriousError {    background-image: url("/image/hacked.png");}.seriousError {    border-width: 3px;}

 

8、@media 媒体查询

.sidebar {  width: 300px;  @media screen and (orientation: landscape) {    width: 500px;  }}

编译后：

.sidebar {    width: 300px;}@media screen and (orientation: landscape) {    .sidebar {        width: 500px;    }}

注意：@media 将被编译到文件的最外层。