SCSS 实用知识汇总

1、变量声明

$nav-color: #F90;
nav {
    //$width 变量的作用域仅限于{}内
    $ 100px;
     $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) {
     500px;
  }
}

编译后：

.sidebar {
    width: 300px;
}

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

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

SCSS 实用知识汇总

相关推荐