Sass预处理器
CSS预处理器
less，sass和stylus
sass:较早，缩进风格
scss：完全兼容css3，使用大括号
编写css的编程语言，引入变量，函数，重复代码等功能，如果编译成css文件
Sass
安装sass
sass是基于ruby语言因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）
（1）安装ruby
\Users\电脑名>ruby -v //打印ruby版本
ruby 2.7.3p183 (2021-04-05 revision 6847ee089d) [x64-mingw32]
（2）更改gem源（国内外gem源问题）
1.查看gem源
\Users\电脑名>gem sources -l
*** CURRENT SOURCES ***
https://rubygems.org/
2.删除原gem源
\Users\电脑名>gem sources --remove https://rubygems.org/
https://rubygems.org/ removed from sources
3.更改gem源
\Users\电脑名>gem sources --add http://gems.ruby-china.com/ //替换原gem源
http://gems.ruby-china.com/ added to sources
4.查看当前gem源
\Users\电脑名>gem sources -l //打印是否替换成功
*** CURRENT SOURCES ***
http://gems.ruby-china.com/
（3）安装sass
1.安装sass
C:\Users\电脑名>gem install sass
2.查看sass版本
C:\Users\电脑名>sass -v
Ruby Sass 3.7.4
编译sass
npm命令行编译
cmd npm命令--> sass 文件1.scss 文件2.css
注意：单次编译，每更改一次css文件，需要重新编译一次scss文件
解决方案：
（1）编译监听单个文件
cmd npm命令--> sass --watch 文件1.scss:文件2.css
(":"前后不要有空格 加:号是防止二次编译.scss文件生成与上一次.css文件同名情况下报错)
（2）编译监听文件夹
cmd npm命令--> sass --watch sass目录:css目录（sass和css目录自己创建）
实例流程:
1.创建html文件 link .scss编译后的.css文件（不要自己写这个.css文件，由npm编译scss文件生成）
<!DOCTYPE html>
<html lang="en">
<head>
<title>sass</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<div></div>
</body>
</html>
2.创建.scss文件
$background-color:red;
div{
width: 100px;
height: 100px;
background-color: $background-color;
}
（1）C:切换到c盘
C:\Users\电脑名>c:
（2）cd 切换到指定文件夹
C:\Users\电脑名>cd c:Desktop/inde
（3）编译scss文件生成新文件.css和.css.map文件
C:\Users\电脑名\Desktop\inde>sass demo.scss test.css
（4）编译监听单个.scss文件 让.scss文件更改后编译成.css文件实现实时更新
C:\Users\电脑名\Desktop\inde>sass --watch demo.scss:test.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
/*按住ctrl+c就关闭监听，关闭后scss文件内容更改后不变化*/
软件方式编译
推荐koala&codekit,它们是优秀的编译器，界面清晰简洁，操作起来也非常简单。鉴于koala是免费编译器，简单操作如下图:
LESS/Sass 编译工具Koala介绍
易上手的Sass编译工具koala支持多个环境的安装文件 [下载Koala](https://www.sass.hk/skill/koala-app.html)
koala是一个国产免费前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。
Live Sass编译器
VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。Visual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS
Sass入门
变量
sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
sass使用$符号来标识变量，比如$highlight-color和$sidebar-width。
变量声明
sass变量的声明和css属性的声明很像：
$highlight-color: #F90;
意味着变量$highlight-color现在的值是#F90。任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，
//sass文件
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后 css文件
nav {
width: 100px;
color: #F90;
}
变量引用
css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
//sass文件
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//编译后
.selected {
border: 1px solid #F90;
}
嵌套CSS 规则
父选择器的标识符&
一般情况下，sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside）。这种在CSS里边被称为后代选择器，因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。
//编译前
article a {
color: blue;
&:hover { color: red }
}
//编译后
article a { color: blue }
article a:hover { color: red }
群组选择器的嵌套
在CSS里边，选择器h1h2和h3会同时命中h1元素、h2元素和h3元素。与此类似，.button button会命中button元素和类名为.button的元素。这种选择器称为群组选择器。群组选择器 的规则会对命中群组中任何一个选择器的元素生效。
.container {
h1, h2, h3 {margin-bottom: .8em}
}
子组合选择器和同层组合选择器：>、+和~
子组合选择器>选择一个元素的直接子元素
同层相邻组合选择器+选择header元素后紧跟的p元素
同层全体组合选择器~，选择所有跟在article后的同层article元素不管它们之间隔了多少其他元素
//编译前
article {
~ article { border-top: 1px dashed #ccc }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
//编译后
article ~ article { border-top: 1px dashed #ccc }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
嵌套属性
在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border：
//编译前
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
//编译后
nav {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
导入SASS文件
静默注释
sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScriptJava等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
混合器
混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最终生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
格式：
定义：@mixin name{
代码块；
}
调用：@include name
在.notice中的属性border-radius-moz-border-radius和-webkit-border-radius全部来自rounded-corners这个混合器。
混合器中的CSS规则
混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
当一个包含css规则的混合器通过@include包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。举个例子，看看下边的sass代码，这个例子中使用了no-bullets这个混合器：
ul.plain {
color: #444;
@include no-bullets;
}
//编译后
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
给混合器传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
sass基础
css功能拓展嵌套
sass嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
编译为
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }
嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理：
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
pre { font-size: 3em; }
}
编译为
#main {
width: 97%; }
#main p, #main div {
font-size: 2em; }
#main p a, #main div a {
font-weight: bold; }
#main pre {
font-size: 3em; }
父选择器 &嵌套
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
编译为
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
编译为
#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red; }
属性嵌套 (Nested Properties)
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
//编译为
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
注释 /* */ 与 //
Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会。
//为静默注释
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
编译后
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black; }
a {
color: green; }
SassScript
在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。
通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助
Interactive Shell
Interactive Shell 可以在命令行中测试 SassScript 的功能。在命令行中输入 sass -i，然后输入想要测试的 SassScript 查看输出结果：
$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
变量 $
(1)SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：
$width: 5em;
直接使用即调用变量：
#main {
width: $width;
}
(2)转换全局变量！global
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
编译后
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
数据类型
SassScript 支持 6 种主要的数据类型：
(1)数字，1, 2, 13, 10px
(2)字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
(3)颜色，blue, #04a3f9, rgba(255,0,0,0.5)
(3)布尔型，true, false
(4)空值，null
(5)数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
(6)maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。
1.字符串 (Strings)
SassScript 支持 CSS 的两种字符串类型：有引号字符串 与无引号字符串,在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{} (interpolation) 时，有引号字符串将被编译为无引号字符串，这样便于在mixin 中引用选择器名：
@mixin name($selector) {
body #{$selector}:before {
content: "hello world!";
}
}
@include name(".header");
编译后：
body .header:before {
content: "hello world!"; }
2.数组 (Lists)
这样通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。数组本身没有太多功能，但 sass数组函数赋予了数组更多新功能：
（1）nth 函数可以直接访问数组中的某一项；
（2）join 函数可以将多个数组连接在一起；
（3）append 函数可以在数组中添加新值；
（4）@each 指令能够遍历数组中的每一项。
空数组：
用 () 表示不包含任何值的空数组，空数组不可以直接编译成 CSS，比如编译 font-family: () Sass 将会报错。如果数组中包含空数组或空值，编译时将被清除，比如 1px 2px () 3px 或 1px 2px null 3px 可用用逗号解决空数组报错，例如 (1,) 表示只包含 1 的数组，而 (1 2 3,) 表示包含 1 2 3 这个以空格分隔的数组的数组。这样做的意义是强调数组的结构关系
3.Maps（对象）
Maps可视为键值对的集合，键被用于定位值 在css种没有对应的概念。 和Lists不同Maps必须被圆括号包围，键值对被都好分割 。 Maps中的keys和values可以是sassscript的任何对象。
4.颜色 (Colors)
任何CSS颜色表达式都返回一个SassScript颜色值。这包括大量命名的颜色，它们与未加引号的字符串无法区分。在压缩输出模式下，Sass将输出颜色的最小CSS表示。例如，#FF0000在压缩模式下输出为红色，但是blanchedalmond输出为#FFEBCD。用户在使用命名颜色时遇到的一个常见问题是，由于Sass倾向于使用与其他输出模式相同的输出格式，所以在压缩时，插入到选择器中的颜色将成为无效的语法。为了避免这种情况，如果要在选择器的构造中使用命名的颜色，请始终引用它们。
运算
所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。
1.数字运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。
(1)除法运算/
以下三种情况 / 将被视为除法运算符号：
如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分
p {
font: 10px/8px;
$width: 1000px;
width: $width/2;
width: round(1.5)/2;
height: (500px/2);
margin-left: 5px + 8px/2px;
}
编译后
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
2.颜色值运算
颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：
p {
color: #010203 + #040506;
}
//计算过程：01 + 04 = 05 02 + 05 = 07 03 + 06 = 09
编译后：
p {
color: #050709;
}
需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。（透明度不同颜色不做运算）
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译为
p {color: rgba(255, 255, 0, 0.75); }
颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
$translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
编译为：
p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25);
}
/注： opacity是将原来的alpha和现在alpha相加
transparentize是将原来的alpha更改现在的值
3.字符串运算
（1）+ 可用于连接字符串
p {
cursor: e + -resize;
}
编译后：
p {
cursor: e-resize; }
（2）在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值
p:before {
content: "I ate #{5 + 10} pies!";
}
编译后：
p:before {
content: "I ate 15 pies!"; }
（3）空的值被视作插入了空字符串
4. 布尔运算
SassScript 支持布尔型的 and or 以及 not 运算。
5. 数组运算
数组不支持任何运算方式，只能使用 list functions 控制。
函数function
（1）nth 函数可以直接访问数组中的某一项；
（2）join 函数可以将多个数组连接在一起；
（3）append 函数可以在数组中添加新值；
（4）@each 指令能够遍历数组中的每一项。
插值语句 #{}
通过 #{} 插值语句可以在选择器或属性名中使用变量,使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译为
p .foo{
border-color: blue }
&父级
就像在选择器中使用时一样，SassScript中的&指向当前的父选择器。它是由空格分隔的列表组成的逗号分隔的列表。例如
.foo.bar .baz.bang, .bip.qux {
$selector: &;
}
如果没有父选择器，&的值将为空。这意味着你可以在mixin中使用它来检测父选择器是否存在:
@mixin does-parent-exist {
@if & {
&:hover {
color: red;
}
} @else {
a {
color: red;
}
}
}
!default赋值
可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
编译后：
#main {
content: "First content";
new-content: "First time reference"; }
//！default 已赋值使用，未赋值添加
变量是 null 空值时将视为未被 !default 赋值。
@指令
@指令分 控制指令 (control directives) 与 混合指令 (mixin directives) 两个部分
1. @import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
@import载入文件方法：
# 文件拓展名是 .css；
# 文件名以 http:// 开头；
# 文件名是 url()；
# @import 包含 media queries。
如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。
（1）嵌套@import
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。
2. @media媒体查询
Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
编译为:
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
3.@extend继承
@extend告诉 Sass 将一个选择器下的所有样式继承给另一个选择器
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
控制指令
@if
当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译为
p {
border: 1px solid; }
@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译为:
p {
color: green; }
@for
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式:
@for $var from start through end
@for $var from start to end
through 与 to 的区别：through 包含end to不包含end
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译为
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
@each
@each 指令的格式是 $var in list, $var 可以是任何变量名，比如 $length 或者 $name，而 list 是一连串的值，也就是值列表。@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
编译后：
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
@while
@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
编译后：
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
混合指令@Mixin
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
1.定义混合指令 @mixin ----可用=号表示
混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
2. 引用混合样式 @include----可用+表示
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示
函数指令
Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) *$gutter-width;
}
#sidebar { width: grid-width(5); }
编译为
#sidebar {
width: 240px;
}
输出格式
Sass 默认的 CSS 输出格式很美观也能清晰反映文档结构，为满足其他需求 Sass 也提供了多种输出格式。
Sass 提供了四种输出格式:
1.:nested（嵌套）样式
:nested是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时，这种样式可以很容易地分析文件的主要结构。
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; }
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; }
2.:expanded（手写）样式
expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
3.:compact(独行)样式
Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
4.:compressed（删除）样式
Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
Sass预处理器的更多相关文章
- 项目中使用sass预处理器
安装sass npm install node-sass sass-loader --save 新建样式文件后缀为 .scss 在使用样式的页面引入:import 'xx.scss';
- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？
最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...
- 【前端知识体系-CSS相关】CSS预处理器
1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CS ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- 关于前端CSS预处理器Sass的小知识！
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- CSS 预处理器（框架）初探：Sass、LESS 和 Stylus
现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...
- 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
随机推荐
- 前端基础问题整理-HTML相关
DOCTYPE的作用以及常见的DOCTYPE类型 <!DOCTYPE>声明位于文档中的最前面的位置,处于 <html> 标签之前,用来告知浏览器页面目前的文件是用哪种版本的HT ...
- C# 语法糖测试--未完待续
/// <summary> /// string扩展方法,可以用字符串变量加.的形式直接调用,this是关键 /// </summary> public static clas ...
- PAT B1002写出这个数
读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式: 每个测试输入包含 1 个测试用例,即给出自然数 n 的值.这里保证 n 小于 1. 输出格式: 在一行内输出 n 的 ...
- JavaScript实现表单的校验以及匹配正则表达式
运行效果: 未填写信息报错: 匹配正则表达式: 信息校验无误: 源代码如下: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 ...
- MySQL---什么是事务
什么是事务 一个数据库事务通常包含对数据库进行读或写的一个操作序列.它的存在包含有以下两个目的: 为数据库操作提供了一个从失败中恢复到正常状态的方法,同时提供了数据库即使在异常状态下仍能保持一致性的方 ...
- kafka生产者调优手册
目录 第一章 kafka硬件配置选择 1.1 场景说明 1.2 服务器台数选择 1.3 磁盘选择 1.4 内存选择(堆内存,页缓存) 1.4.1 堆内存配置 1.4.2 页缓存选择 1.5 cpu选择 ...
- rabbitmq简单运用
<?php /** * 生产者 */ $connection = new AMQPConnection([ 'host' => '192.168.23.130', 'port' => ...
- OpenHarmony标准设备应用开发（二）——布局、动画与音乐
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 邢碌 上一章我们讲解了应用编译环境准备,设备编译环境准备,开发板烧录,将一个最简单的 OpenAtom OpenHar ...
- 【面试普通人VS高手系列】HashMap是怎么解决哈希冲突的？
常用数据结构基本上是面试必问的问题,比如HashMap.LinkList.ConcurrentHashMap等. 关于HashMap,有个学员私信了我一个面试题说: "HashMap是怎么解 ...
- js 修改页面样式的两种方式
1. element.style 行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <hea ...