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

4.混合器

混合器：对常用单元的复用，但生成css文件大小不变，仅为展示性复用

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

// 混合器定义入参
@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
  );
}

5.继承

继承：相较于混合器的展示性复用，继承为语义性复用，生成的css文件减少冗余代码

// 继承与该选择器相关的所有组合选择器样式

.error {
  border: 1px solid red;
  background-color: #fdd;
}

//应用到.seriousError a
.error a{
  color: red;
  font-weight: 100;
}

//应用到hl.seriousError
h1.error {
  font-size: 1.2rem;
}

//.seriousError从.error继承所有相关样式
.seriousError {
  @extend .error;
  border-width: 3px;
}