本篇文章主要介绍最基础的使用和语法，可以看到，scss引入的变量和嵌套，极大地方便了开发工作，结合其自带的插值表达式，使得css样式编写非常灵活！
Sass语法介绍
sass有两种语法格式Sass(早期的缩进格式：Indented Sass)和SCSS(Sassy CSS)
目前最常用的是SCSS，任何css文件将后缀改为scss，都可以直接使用Sassy CSS语法编写。
所有有效的 CSS 也同样都是有效的 SCSS。
立即学习“前端免费学习笔记（深入）”；
使用变量
sass使用$符号来标识变量。
变量的作用就是，让你在整个样式表中保存并重用一些信息或数据。
比如存储颜色(color)、字体集，或任何你想重用的CSS值。
1. 变量声明
和css属性的声明（property declaration）很像！
如，声明值为 #F90 的变量 $highlight-color，字体集变量：
$highlight-color: #F90;$font-stack: Helvetica, sans-serif; body { font: 100% $font-stack; color: $highlight-color;}
输出结果为：
body { font: 100% Helvetica, sans-serif; color: #F90;}
变量有作用域，当变量定义在css规则块内，则该变量只能在此规则块内使用。
2. 变量引用
凡是css属性的标准值（比如说1px或者bold）可存在的地方，就可以使用变量。
css生成时，变量会被它们的值所替代。
$color:#A34554;.box { width: 300px; height: 400px; &-left{ width: 30%; color: $color; }}
生成css为：
.box { width: 300px; height: 400px;}.box-left{ width: 30%; color: #A34554;}
声明变量时，变量的值也可以引用其他变量，如下 $highlight-border 变量中使用了 $highlight-color 变量：
$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border;}//编译后.selected { border: 1px solid #F90;}
3. 变量名中的中横线(hyphen)和下划线(underscore)
sass的变量名可以使用中划线和下划线，用中划线声明的变量可以使用下划线的方式引用，反之亦然。
也就是，变量名中的中横线和下划线没有区别，两者互通。
比如下面的示例，中横线的$link-color，可以通过下划线的$link_color引用。
$link-color: blue;a { color: $link_color;}//编译后a { color: blue;}
相对，使用中横线更普遍些！
嵌套（<span style="font-size: 18px;">Nesting</span>）
css中重复写选择器是非常恼人的。尤其是嵌套的html元素样式，如：
#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }
Scss的嵌套
Sass中，借助在规则块中嵌套子规则块，可以使重复选择器只写一遍，避免重复而且可读性更高。
比如上面的示例，借助scss嵌套：
#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE }}
scss嵌套打开(解析)的规则是：从外层到内层，将嵌套规则块打开，父级的选择器放在子级选择的前面组成一个新的选择器，然后再循环打开内部的嵌套块处理。
父选择器的标识符&
通常，sass解析嵌套时，把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside），即生成后代选择器。
但是对于伪类:hover、对于多class名等情况，则不应该以”后代选择器”的方式连接，比如：
article a { color: blue; :hover { color: red }}
默认生成的article a :hover会让article元素内a链接的所有子元素在被hover时都会变成红色，显然是不正确的（应该应用到a自身）。
为此sass提供了一种特殊的选择器：父选择器&。它可以更好的控制嵌套规则！
只要是选择器可以放置的地方，就都可以在嵌套中同样使用
&。
article a { color: blue; &:hover { color: red }}
展开时，&被父选择器直接替换：
article a { color: blue }article a:hover { color: red }
通过&可以在嵌套块内，实现在父选择器之前添加选择器（非常灵活）。
如：
#content aside { color: red; body.ie & { color: green }}
群组选择器嵌套
css中，使用,分割的群组选择器可以同时应用样式在多个选择器上，如：
h1, h2 { margin: 0;}
但是，如果想对一个特定的容器元素内的多个元素，使用群组选择器时，就会有很多重复性工作。
.container h1, .container h2, .container h3 { margin-bottom: .8em }
而，sass的嵌套特性，在解开一个内嵌的群组选择器时，会把每一个内嵌选择器正确的结合起来：
.container{ h1,h2,h3{ margin-bottom:.8em; }}
sass会组合成 .container h1、 .container h2、.container h3 三者的群组选择器：.container h1, .container h2, .container h3{ xxx }。
同样，群组选择器内的嵌套也会以这种方式解析：
nav, aside { a {color: blue}}// nav a, aside a {color: blue}
子组合选择器和同层组合选择器：>、+和~
这三种选择器必须和其他选择器配合使用。
/* 子组合选择器> */article > section { border: 1px solid #ccc }/* 相邻组合选择器+ 选择 元素后紧跟的指定元素 */header + p { font-size: 1.1em }/* 同层全体组合选择器~，选择所有跟在article后的同层article元素 */article ~ article { border-top: 1px dashed #ccc }
在sass中使用时，可以通过嵌套直接生成正确的结果（位于外层选择器的后面，或内层选择器的前面均可！），而不需要使用&。
article { /* 放在 里层选择器前边 */ ~ article { border-top: 1px dashed #ccc } > section { background: #eee } /* 放在 外层选择器后边 */ dl > { dt { color: #333 } dd { color: #555 } } nav + & { margin-top: 0 }}
解开后的css为：
article ~ article { border-top: 1px dashed #ccc }article > footer { background: #eee }article dl > dt { color: #333 }article dl > dd { color: #555 }nav + article { margin-top: 0 }
最后一句，
nav + &使用父选择器&后，原本默认的嵌套规则不再适用，而是直接应用 & 组合的结果。
属性嵌套
sass中，属性也可以进行嵌套！
把属性名从中划线-的地方断开，在该属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。这样就可以实现属性的嵌套。
nav { border: { style: solid; width: 1px; color: #ccc; }}
编译生成如下：
nav { border-style: solid; border-width: 1px; border-color: #ccc;}
结合属性的缩写形式，可以实现在嵌套属性中指明需要额外样式的特殊子属性。
nav { border: 1px solid #ccc { /* 单独设置的 子属性 */ left: 0px; right: 0px; }}/* 生成后 */nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px;}
插值（Interpolation）
类似 es6 中的插值表达式，Sass也提供了插值计算的方式。
插值几乎可以用在任何地方，作为一个 SassScript 表达式的嵌入结果。
Sass的插值写法为：#{$variable_name}。
利用插值动态生成选择器、属性名和值
可以使用插值获取变量或函数调用到一个选择器、或属性值。
比如：
$bWidth:5px;$style:"blue";.nav { border: #{$bWidth} solid #ccc; &.nav-#{$style} { color: #{$style}; }}// 编译为：.nav { border: 5px solid #ccc;}.nav.nav-blue { color: blue;}
属性名使用插值变量
使用插值的一个好处是，可以直接将变量值作为属性名使用。
如下，通过插值，属性名直接用变量来替代，这样就可以动态生成属性。
不使用插值，直接在属性的位置使用变量
$property，将会被处理为对变量的赋值！
$value:grayscale(50%);$property:filter;.nav{ #{$property}: $value;}// 编译为：.nav { filter: grayscale(50%);}
在 @mixin 中使用插值
@mixin 混合器将在下一节介绍。
插值在写mixin时非常有用，比如下面通过传递的参数创建选择器（来自官网）：
@mixin define-emoji($name, $glyph) { span.emoji-#{$name} { font-family: IconFont; font-variant: normal; font-weight: normal; content: $glyph; }}@include define-emoji("women-holding-hands", " ");
编译后的CSS为：
@charset "UTF-8";span.emoji-women-holding-hands { font-family: IconFont; font-variant: normal; font-weight: normal; content: " ";}
css的特殊函数（Special Functions【仅作了解】）
CSS中的许多函数都可以在Sass中正常使用，但也有一些特殊的函数有所不同。
所有的特殊函数，调用都返回不带引号的字符串。
url()
url() 函数在CSS中很常见，但是它的参数可以是带引号或不带引号的URL。
不带引号的URL在 Sass 中是无效的，所以需要特殊逻辑进行解析。
如下是url()的示例，如果url()的参数是有效的不带引号URL，Sass会原样解析它，并且不带引号时也可以使用插值表达式；如果不是有效的不带符号URL，将会解析其中的变量或函数，并转换为普通的CSS函数调用。
$roboto-font-path: "../fonts/roboto";@font-face { // 引号中作为一个正常的函数调用解析 src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2"); font-family: "Roboto"; font-weight: 100;}@font-face { // 使用数学表达式，解析为普通的函数调用 src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2"); font-family: "Roboto"; font-weight: 300;}@font-face { // 作为一个插值表达式特殊处理 src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2"); font-family: "Roboto"; font-weight: 400;}
calc(), clamp(), element()
算数表达式 calc() 和 Sass 的冲突；element() 的参数可以color。
使用它们时，Sass除了处理插值，其他都会保持原样解析！
min() 和 max()
Sass早于CSS支持使用 min() 和 max()，为了兼容所以需要特殊处理。
如果 min() 和 max() 函数调用的是普通CSS，则会被编译为CSS的 min() 和 max()。
普通CSS（Plain CSS）包含嵌套调用 calc(), env(), var(), min(), max() 以及 插值。
但是，只要包含 SassScript 的特性，比如 Sass的变量、函数调用，min() 和 max() 就会被作为 Sass 的函数处理。
$padding: 12px;.post { // max()没有使用插值以外的Sass特性, 所以将会被编译为 CSS 的 max(). padding-left: max(#{$padding}, env(safe-area-inset-left)); padding-right: max(#{$padding}, env(safe-area-inset-right));}.sidebar { // 应为没有通过插值使用sass变量，此处会调用Sass内置的 max() padding-left: max($padding, 20px); padding-right: max($padding, 20px);}
注释
sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，以//开头，直到行末结束。
在生成的css中，静默注释将会被抹除，这样，可以按需抹除一些注释，而不需要全部显示给其他人。
body { color: #333; // 这种注释内容不会出现在生成的css文件中 padding: 0; /* 这种注释内容会出现在生成的css文件中 */}
当标准注释
/* ... */出现在原生css不允许的地方时，也会在编译后的css中被抹去。
多行注释 /* ... */ 在 compressed 模式下会被移除，但是如果以 /*! 开头，则仍会包含在生成的 CSS 中。
导入SASS文件
使用@import可以导入另外的sass文件（在生成css文件时会把相关文件导入进来）。在被导入文件中定义的变量和混合器maxin等均可在导入文件中使用。
css中的
@import导入其他css文件很不常用，因为它是在执行到@import规则时才会加载其他的css文件，这会导致页面加载变慢、样式的错乱和延迟等问题。
注：Sass官方目前已经开始打算用 @use 替代 @import 规则，因此鼓励使用 @use。但是，目前只有 Dart Sass 支持 @use，因此，现阶段主要还是使用 @import。
scss导入sidebar.scss文件，可以使用如下规则：
@import "sidebar";@import "sidebar.scss";
sass局部文件（或分部文件，partial file）
有的sass文件是专门用于被@import命令导入的，而不需要单独生成css文件，这样的文件称为局部文件。
sass的约定是：sass局部文件的文件名以下划线 _ 开头，sass在编译时就不会将这个文件编译输出为css。
在 @import 局部文件时，可以省略文件开头的下划线和.scss后缀，不需要写文件的全名。
局部文件可以被多个不同的文件引入。对于需要在多个页面甚至多个项目中使用的样式，非常有用。
默认变量值
通常情况下，在反复多次声明一个变量时，只有最后一个声明有效（即使用最后一个声明赋予的值）。
sass通过!default标签可以实现定义一个默认值（类似css的!important标签对立），!default表示如果变量被声明赋值了则用新声明的值，否则用默认值。
比如一个局部文件中：
$fancybox-width: 400px !default;.fancybox { width: $fancybox-width;}
如果用户在导入该sass局部文件之前，声明了一个 $fancybox-width 变量，那么局部文件中对 $fancybox-width 赋值400px的操作就无效。如果用户没有做这样的声明，则 $fancybox-width 将默认为400px。
也就是，在后面使用 !default 声明的变量，并不会覆盖其前面声明赋值的相同变量值。
嵌套导入
sass可以在嵌套规则块的内部使用@import导入局部文件【局部文件会被直接插入到css规则内导入它的地方】。
如局部文件_blue-theme.sass内容为：
aside { background: blue; color: white;}
将它导入到一个CSS规则内：
.blue-theme {@import "blue-theme"}
生成的结果跟你直接在 .blue-theme 选择器内写 _blue-theme.scss 文件中的内容完全一样。
.blue-theme { aside { background: blue; color: #fff; }}
原生的CSS导入的支持
sass中支持原生css的导入，会生成原生的scc @import(在浏览器解析css时再下载并解析)。
sass中@import生成原生css导入的条件是：
被导入文件的名字以.css结尾；被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css%EF%BC%89被导入文件的名字是CSS的url()值。
如果想将原始的css文件，当做sass导入，可以直接修改.css后缀为.scss（sass语法完全兼容css）。
更多编程相关知识，请访问：编程入门！！
以上就是浅析Scss基础语法和导入SASS文件的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1621874.html
微信扫一扫 
支付宝扫一扫 
