Sass 语法规则

阅读量：7175 次

发布时间：2019-06-29

本文共 3313 字，大约阅读时间需要 11 分钟。

首先，sass和scss使用同一种语法，但是写法有所不同。

sass在编写的时候不适用' { '和' } '来包括，每一句的末尾也不可以用' ; '来结束。

而scss则完全可以按照css的写法编写，本篇基本使用sass的写法。

1 变量

1-1 变量声明

在sass中可以使用$来定义变量

//变量定义$font-color: #333$highlight-color: #F90//变量引用header   $width: 100px  width: $width  color: $font-color

在sass中，中划线和下划线都可以使用，如：

$link-color: blura  color: $link_color

2 嵌套

2-1 基本嵌套

在sass中，需要在在父级中写入很多子级的不同属性，可以使用嵌套。嵌套在sass中显示可能看不明白，本节附带scss语句。

// sass 语句.contanin  article    h1 color: #333    p margin-bottom: 1.4rem  aside    background-color: #abc// scss 语句.contanin {  article {    h1 { color: #333 }    p { margin-bottom: 1.4rem }  }  aside {    background-color: #abc  }}// 编译后.contanin article h1 { color: #333 }.contanin article p { margin-bottom: 1.4rem }.contanin aside { background-color: #abc }

2-2 父选择器的标识符：&

当想要通过嵌套给父级元素设置伪类事件时，如果我们这样写：

// scss语句article a {  color: blue;  :hover { color: red }}

这样的结果是给article中a链接的所有后代添加了hover事件，这肯定不是我们想要的结果；这时可以使用 & 来获取父级，如：

// scss语句article a {  color: blue;  &:hover { color: red }}

这样就可以实现给article中的a链接设置hover事件还有一种情况，需要给父选择器之前添加选择器时，可以直接在 & 前面加上选择器，如

// scss语句#content aside {  color: red;  .main & { color: green }}// 编译后#content aside {color: red};.main #content aside { color: green }

2-3 群组选择器的嵌套

// sass语句.container   h1, h2, h3     margin-bottom: .8em// 编译后.container h1, .container h2, .container h3 {  margin-bottom: .8em }

2-4 多种选择器：> 、+ 、~

> :子代选择器，可以选择一个元素的子元素，而不是后代元素

+ :同层相邻选择器，可以获取一个元素后紧跟的一个元素

~ :同层全体组合选择器，可以获取一个元素同层的所有所选元素

2-5 嵌套属性

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

感觉并不是很实用，像border,background,translate这些完全可以将所有属性以此写在后面。。

3 导入sass

在sass中可以通过@import "reset"来导入reset.sass文件

3-1 用sass中的部分文件

在sass中有些sass文件你可能并不想将其转化成css文件，只是为了用于其他地方导入，这时你就可以通过在文件名的前面加一个下划线_来标记。而且导入的时候可以省略下划线。如：想导入_reset.sass文件时，可以在想要导入的位置写@import "reset";并且导入的文件种的变量都可以被使用。

3-2 默认变量值

通常在预设样式中都可以使用!default来设置默认样式，但是!default用于变量，含义：如果这个扁郎被声明赋值了，那就用它声明的值，否则就用这个默认值。

// sass语句$color: #333 !default

3-3 嵌套导入

导入一个sass的局部文件，也可以嵌套在一个选择器中导入，如

// sass语句.aside  @import "reset"

这样的导入，reset.sass中的变量的作用域就只有在.aside中才有效。

4 混合器mixin

4-1 混合器的定义与调用

混合器通俗来说就是将一大段样式赋予一个名字，需要的时候只需调用这个名字即可（用于浏览器兼容处理上很方便）

// sass语句// 定义@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

4-2 混合器中的css规则

混合器中同样可以包含选择器和选择器中的属性。

混合器中也可以使用sass的父选择器标识符&。

如果一个混合器只包含css规则，不包含属性，那么该混合器就可以在文档的顶部调用，用于全局。

4-3 混合器传参

可以看出，混合器和函数很像，需要定义，也可以调用，现在又说可以传参！！

// sass语句// 混合器定义@mixin link-colors($normal, $hover, $visited)   color: $normal  &:hover     color: $hover  &:visited    color: $visited// 混合器调用a   @include link-colors(blue, red, green)// 编译后a { color: blue; }a:hover { color: red; }a:visited { color: green; }

5 选择器继承

5-1 选择器继承

// sass语句.error   border: 1px solid red  background-color: #fdd.seriousError   @extend .error  border-width: 3px

这样.seriousError就有了.error的所有属性

5-2 组合选择器的继承

// sass语句//应用到.seriousError a.error a    color: red  font-weight: 100//应用到hl.seriousErrorh1.error    font-size: 1.2rem.seriousError   @extend .error  border-width: 3px

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承