学习SCSS

本系列文章是本人学习相关知识时所积累的笔记，以记录自己的学习历程，也为了方便回顾知识；故文章内容较为随意简练，抱着学习目的来的同学务必转移他处，以免我误人子弟~

变量

1. 变量声明使用：$

$nav-color: #F90; /*全局变量*/
nav {
  $width: 100px; /*局部变量*/
  width: $width;
  color: $nav-color;
}

//编译后

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

2. 变量中使用变量

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

//编译后

.selected {
  border: 1px solid #F90;
}

嵌套css

1. 嵌套

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

2. 使用 & 代表父选择器

article a {
  color: blue;
  &:hover { color: red }
}
 /* 编译后 */
article a { color: blue }
article a:hover { color: red }

#content aside {
  color: red;
  div#app & { color: green }
}
/*编译后*/
#content aside {color: red};
div#app #content aside { color: green }

3. 群组选择器

nav, aside {
  a {color: blue}
}
/*编译后*/
nav a, aside a {color: blue}

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

4. 属性嵌套

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
/*编译后*/
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

@import 导入scss文件

1. 所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用。
2. 使用下划线 “_” 规定经常被引用的通用样式表，如_commonstyle.scss
3. 默认变量值：使用 “!default”

$link-color: blue !default;
$link-color: red;

4.嵌套导入

/*_blue-theme.scss*/
aside {
  background: blue;
  color: white;
}
/*app.scss*/
.blue-theme {@import "blue-theme"}

/*编译后*/
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

静默注释

css 标准注释：/* ... */
scss 静默注释：//开头

混合器 mixin

编写可重用代码段（样式代码段）
定义代码段：@mixin；使用代码段：@include

1. mixin 多用来编写跨浏览器的带有前缀的代码，如今有了 postcss ，就不用 mixin 来做这事了

@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;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

2. mixin 相当于代码缩写
3. mixin 支持传递参数；支持参数设定默认值

选择器继承

。。。