Vue学习笔记---sass

Sass

1.变量

• 变量声明：属性名前加上$作为变量名可在css内重用

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

//编译后

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

2.嵌套CSS规则

• 嵌套后的代码看似小，生成的文件可能非常大
• 嵌套方法：相当于后代选择器

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

• 父选择器的标识符&：相当于父选择器

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

• 子组合选择器和同层组合选择器：>、+和~
• 嵌套属性

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

3.导入SASS文件

• @import "test"即可进行引入
• CSS与SASS的区别：
  • CSS中@import引用其他css文件，运行时加载，页面加载缓慢
  • SASS中@import引用其他sass文件，编译时加载生成一个完整的css文件
• 局部SASS：
  • 定义：局部SASS文件不需要独立生成css，仅作其他sass文件调用
  • 命名：文件名前缀加_，调用时不需要_
• 默认变量值：被引入文件中进行！default定义，引入文件中如果对该变量没有定义，则使用被引入文件中的该变量，类似于！important的对立面
  $fancybox-width: 400px !default;
• 嵌套导入：.blue-theme {@import "blue-theme"}即可引入对应文件内的样式
• 原生的css导入：导入文件后缀是css、css文件的url、url地址时都会采用默认的css@import

4.静默注释：

• 定义：//后的注释在生成CSS文件时抹除

5.混合器

• 定义：样式类似进行混合复用，混合样式名字加上@mixin前缀，@include进行调用，大量的重用可能造成样式表过大，避免滥用（展示性样式重用）

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

• 使用混合器的时机：一组有意义或者一个逻辑单元，可以进行有意义的命名
• 混合器中的css规则：混合器中除了可以命名属性，也可以命名css规则，调用选择器
• 混合器传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
// 参数默认值
@mixin link-colors($normal, $hover: $normal, $visited: $normal){
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
// 类似于函数调用
a {
  @include link-colors(blue, red, green);
}
// 给对应参数赋值，参数顺序不在乎
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

6.继承

• 采用@extend标志进行继承，除了继承一个选择器定义的所有样式，任何跟该选择器有关的组合选择器样式也会以组合选择器的形式继承（语义性样式重用）

.error {
  border: 1px solid red;
  background-color: #fdd;
}
//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}