css模块化：scss基础概念

变量声明

$highlight-color: #F90;

$basic-border: 1px solid black;

注意{} 内的声明只能在{}内的声明后用

 

默认变量值：通常来说，同一个变量，写在后面的会覆盖前面的值，

如果想改变这种，只是给个默认值

$fancybox-width: 400px !default;

.fancybox {

width: $fancybox-width;

}

 

 

混合器（@mixin  @include）

@mixin rounded-corners {

  border-radius: 5px;

}

 

notice {

  background-color: green;

  @include rounded-corners;

}

 

// 最终生成

notice{

  border-radius: 5px;

  background-color: green;

}

 

 

混合器是可以传参的，就像函数一样，可以是

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

@include link-colors($normal: blue, $visited: green, $hover: red);

 

 

导入文件

Css 中有个不常用的特性：@import规则，允许一个 css文件中导入其他 css 文件，

但是因为是异步加载的，只有执行到@import 的时候，浏览器才会去下载，引起回流。

 

sass 也有一个 @import 规则，但不同的是， sass 的 @import 规则在生成 css 文件时就把相关文件导入进来。

@import 可以省略后缀名

 

scss可以选择不转化的文件

比如一些公共部分，不会单独拿出来使用，只是作为模块嵌入到一个个 scss 文件中，这种就不需要转成 css

方法就是以下划线开头的，scss 文件，不会被转化

 

注释

body {

  color: #333; // 这种注释内容不会出现在生成的css文件中

  padding: 0; /* 这种注释内容会出现在生成的css文件中 */

}

 

 

选择器继承 @extend

//通过选择器继承继承样式, 

.error {

  border: 1px solid red;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}

不仅仅是继承样式，而且所有使用.error 的地方，都有替换成 .seriousError 的效果

//.seriousError从.error继承样式

.error a{  //应用到.seriousError a

  color: red;

  font-weight: 100;

}

h1.error { //应用到hl.seriousError

  font-size: 1.2rem;

}

 

附录：选择器

父选择器标识符:尤其是在有伪类选择器的时候

article a {

  color: blue;

  &:hover { color: red }

}

 

article a { color: blue }

article a:hover { color: red }

 

群组选择起的嵌套

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

 

子组合选择器和同层组合选择器

// 选择article下的所有命中section选择器的元素

article section { margin: 5px }

// 选择article下紧跟着的子元素中命中section选择器的元素

article > section { border: 1px solid #ccc }

 

// 同层相邻组合选择器+

header + p { font-size: 1.1em }

// 同层全体组合选择器~

article ~ article { border-top: 1px dashed #ccc }

 

嵌套属性

nav {

  border: {

  style: solid;

  width: 1px;

  color: #ccc;

  }

}

 

nav {

  border-style: solid;

  border-width: 1px;

  border-color: #ccc;

}