SZ 博客

忠于理想 忠于技术

0%

SCSS 简介

发表于 分类于 ， 阅读次数：

变量

1
2
3
4
5
6
7
$nav-color: # F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  border: 1px solid $highlight-color;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@mixin rounded-corners($normal) { // 混合器 引用这个变量重用大段代码
  -moz-border-radius: $normal;
  -webkit-border-radius: $normal;
  border-radius: $normal;
}
notice {
  background-color: green;
  border: 2px solid # 00aa00;
  @include rounded-corners(5px);
}
===============================================================
.notice {
  background-color: green;
  border: 2px solid # 00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

提示

  1. 变量作用域为块级
  2. 中划线 与 下划线 不敏感 例：$link-color与$link_color指向同一个变量
  3. $nav-color: # F90; !default 如果这个变量接下来被声明赋值了，那就用它声明的值，否则就用这个默认值。

嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# content {
  article {
    h1 { color: # 333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: # EEE }
  a {
    color: blue;
  &:hover { color: red }   // 父选择器  
  }
  h1, h2, h3 {margin-bottom: .8em} // 群组选择器嵌套
  ~ article { border-top: 1px dashed # ccc } // 选择所有跟在content后的同层article元素
  > section { background: # eee } // 子组合选择器 只会选择content下紧跟着的子元素
  dl > {
    dt { color: # 333 }
    dd { color: # 555 }
  }
  nav + & { margin-top: 0 }
}

nav { 
  border: { // 嵌套属性
  style: solid;
  width: 1px;
  color: # ccc;
  }
}

编译后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# content article h1 { color: # 333 }
# content article p { margin-bottom: 1.4em }
# content aside { background-color: # EEE }
# content a { color: blue; }
# content a:hover { color: red; }
# content h1 { margin-bottom: .8em }
# content h2 { margin-bottom: .8em }
# content h3 { margin-bottom: .8em }
# content ~ article { border-top: 1px dashed # ccc }
# content > footer { background: # eee }
# content dl > dt { color: # 333 }
# content dl > dd { color: # 555 }
nav + # content { margin-top: 0 
nav {
  border-style: solid;
  border-width: 1px;
  border-color: # ccc;
}

导入

css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 嵌套导入
aside {
  background: blue;
  color: white;
}
// blue-theme.scss

===========================================
.blue-theme {@import "blue-theme"}
===========================================
.blue-theme {
  aside {
    background: blue;
    color: # fff;
  }
}

提示

但在下列三种情况下会生成原生的CSS@import，尽管这会造成浏览器解析css时的额外下载：

注释

1
2
3
4
body {
  color: # 333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

参考

https://www.sass.hk/