Sass 语法规则

Magicer 发布于2019-08-29 14:03 / 857人阅读

摘要：首先，和使用同一种语法，但是写法有所不同。如果一个混合器只包含规则，不包含属性，那么该混合器就可以在文档的顶部调用，用于全局。

首先，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: blur
a
  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.seriousError
h1.error  
  font-size: 1.2rem

.seriousError 
  @extend .error
  border-width: 3px

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

6 注释

在css中，我们通常是用/ ... /来注释，这样的注释被解析出来还会出现在css文件中。

在sass中，可以使用 // 开头的注释来进行静默注释，这样的注释内容不会出现在生成的css文件中。

idc机房托管专线服务语法规则 python语法规则 html 语法规则 sass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112892.html

Sass 语法格式及编译

摘要：一语法格式这里说的语法是的最初语法格式，他是通过键控制缩进的一种语法规则，而且这种缩进要求非常严格。在此特别提醒新同学只能使用老语法规则缩进规则，使用的是的新语法规则，也就是语法规则类似语法格式。一、sass语法格式这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 ...

SimpleTriangle 2019-04-23 13:31 评论0 收藏0
Sass 语法小结

摘要：本文主要对的基本语法进行了小结，方便日后快速查阅使用。另外，因为的语法完全兼容，所以可以把原始的文件改名为后缀，即可直接导入了。为了解决这个问题，允许通过语法的形式指定每个参数的值。后记功能丰富强大，上面的语法小结只是其中的一小部分。本文主要对 Sass 的基本语法进行了小结，方便日后快速查阅使用。一、变量（$） 1. 变量标识符 Sass 使用 $ 符号来标识变量。 $highl...

lidashuang 2019-08-30 15:52 评论0 收藏0
大话css预编译处理（一）通读介绍篇

摘要：使用预编译处理的优势使用预处理器，可以提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。一、什么是css预编译处理？ CSS 预编译处理，从字面上理解，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。...

Backache 2019-08-30 15:55 评论0 收藏0
sass笔记-2|Sass基础语法之让样式表更具条理性和可读性

摘要：这个时候小明如果仅仅引入不想改，那么就是这个值，如果他想改，就可以在任何一处重新声明这个变量，那么就会变成小明的值。这一篇主要详述保持sass条理性和可读性的3个最基本方法——嵌套、导入和注释。零. 变量变量本身的作用是为了保持属性值的可维护性，把所有需要维护的属性值放在同一个地方，快速更改，处处生效，可谓售后无忧。 1.变量声明变量用$符号开头进行声明，任何可以用作CSS属性...

CloudDeveloper 2019-08-30 13:10 评论0 收藏0
Sass快速入门学习笔记

摘要：在中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。这个过程中，用了两步，每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。与此类似，会命中元素和类名为的元素。这种选择器称为群组选择器。1. 使用变量; sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属...

appetizerio 2019-04-23 13:44 评论0 收藏0