scss基础

Scss基础语法

只是觉得记个笔记比较印象深刻，其实去官网看最好了。写的也大部分都是官网上的东西，官网总结的已经很清晰了。只是提炼一下，便于以后查看。Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

1. 声明变量

写法：$变量名: 变量值。 例如: KaTeX parse error: Expected 'EOF', got '#' at position 8: white: #̲ffffff; 以后凡是**s…white代替白色了

这也是有块级作用域的，如果写在{}内，则对这一部分生效，其他位置也可以使用这个变量名；如果写在外部（全局common.scss里），则全局生效；scoped里面则可以看成组件内使用

还有一点，当变量名里有短线或下划线的时候，这两种是通用的。如定义：$color-white: #ffffff,在使用的时候可以用 color: $color_white，_和-是可以被互相识别的。

2. 嵌套写样式

这个也是很常用的，就是让你按照html结构那样写样式，如

	
菜单
		
二级菜单
	

$black:#000000
.header-area{
    color: white;
    .header-title{
        color:$black;
        div{
            font-size:12px;
        }
    }
}

其中需要注意的一些，如

• &:伪类：例如我们需要写:hover, :active等伪类的时候，如果直接写

  .header{
  ​	:hover{color: blue}
  }
  

  这样是不生效的，这样写解析出来是 .header :hover{}， 伪类前面是不需要空格的。所以要写

  .header{
  	&:hover{color: blue}
  }
  

  这样写解析出来才是 .header:hover{},才把状态用到了header类上

• 父选择器 & { color: green }：用于指代父选择器。如：

  #content aside {
    color: red;
    body.ie & { color: green }
  }
  /*编译后*/
  #content aside {color: red};
  body.ie #content aside { color: green }
  

3. 子选择器和同层选择器

• 子选择器 > ，和css里面一样，选择紧跟着的子元素，就不赘述了
• 同层相邻组合选择器+，如 div+p用于选择选择div元素后紧跟的p元素
• 同层全体组合选择器~, 如p+p选择所有跟在p后的同层p元素，不管它们之间隔了多少其他元素

4. 属性嵌套

在css中有些属性是可以细分的，比如：background可以分为background-color, background-size等等。在scss中这些也是可以嵌套的，例如。就是把属性从-处断开写到{}里

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

就连属性的缩写也可以嵌套，如：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

Scss的引入：@import 文件名/样式名。 @include 可以用 + 表示，简写为+

导入：@import './color' :把color.scss文件中所有样式添加到当前样式表中(后缀名scss、sass可以省略不写)

但是这有一个问题，它会导致每次导入都生成一个css文件。如果要避免这种情况，可以在命名时以_开头，这样就不会对这个文件进行编译，只在导入时编译。例如想导入themes/_night-sky.scss这个局部文件里的变量，只需在样式表中写@import "themes/night-sky";

这种导入方式也可以写在标签属性内，如：.blue-theme {@import "blue-theme"}这种方式引入的scss文件是局部生效的，块级作用域

静默注释：//所写的注释

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

混合器（写了多条样式的块）：@mixin 样式类名，@mixin 可以用 = 表示，简写为=

例，跨浏览器的圆角

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//引用这个混合器
notic