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. 首先我们 ...
随机推荐
- APICloud重磅支持Atom编辑器，并建立开发工具核心库
APICloud技术再次升级,不仅支持Atom编辑器开发工具,并推出核心开发工具库,使开发者进行App开发更便捷高效. APICloud支持Atom编辑器开发工具 APICloud始终坚持多开发工具支 ...
- hibernate 联合主键 composite-id
如果表使用联合主键(一个表有两个以上的主键),你可以映射类的多个属性为标识符属性.如:<composite-id>元素接受<key-property> 属性映射(单表映射)和& ...
- 移动端页面中点击input输入框的时候弹出的键盘将输入框挡住的问题
使用的是vux框架, 以为是框架问题, 后来发现是把当前页面的高度写死为了height:200%: 只要把高度去掉就能让页面自动弹到输入框的上方:
- C++篇：第八章_类_知识点大全
C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 八.类 (一)类的概念与规则 "子类"和"子类型& ...
- JavaScript基础第01天笔记
JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...
- 『现学现忘』Git基础 — 6、Git的操作流程
目录 1.Git的基本操作流程 2.工作区.暂存区.版本库的区别 (1)工作区 (2)版本库 (3)暂存区 (4)通过新增文件理解三个区的关系 (5)说明 1.Git的基本操作流程 初始化一个本地版本 ...
- ionic系列教程 2 ---- 安装
开发平台注意点首先,我们需要注意构建Ionic App需要的最低配置:Ionic只支持iOS6 +和Android 4.0 + ,(虽然2.3可以工作,但会有点卡).但是,Android设备众多,可能 ...
- partTwo自动出题程序第一阶段
课堂测试1:像二柱子那样,花二十分钟写一个能自动生成30道小学四则运算题目的 "软件" 代码实现 import java.util.Random;//import java.uti ...
- 从.net开发做到云原生运维(八)——DevOps实践
1. DevOps的一些介绍 DevOps(Development和Operations的组合词)是一组过程.方法与系统的统称,用于促进开发(应用程序/软件工程).技术运营和质量保障(QA)部门之间的 ...
- 认识python-个人笔记篇
认识python 1 .python 的发展历史 一种广泛使用的解释型.高级编程.通用型编程语言,由"龟叔"吉多·范罗苏姆创造,第一版发布于1991年. Python的设计哲学强调 ...