scss 知识整理

最新推荐文章于 2024-06-07 01:04:43 发布

「已注销」

最新推荐文章于 2024-06-07 01:04:43 发布

阅读量518

点赞数

本文链接：https://blog.csdn.net/sz861128/article/details/116149508

版权

使用预处理语言也有 5 年多了，从 less sass 到 scss 零零散散的也整理过一些文章，但最终随着时间流逝都未完整的保存。近来在整理浏览器收藏夹，相关文章自己收藏了不少，索性重新整理一篇以作知识积累。

SCSS 是什么

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

这一章部分转自 Sass中文网，但对内容顺序做了调整以及精简。

1. 静默注释;

css 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能看到所有注释。

sass 另外提供了一种不同于 css 标准注释格式 /* … */ 的注释语法，即静默注释，其内容不会出现在生成的 css 文件中。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

2. 导入 SASS 文件;

css 有一个特别不常用的特性，即 @import 规则，它允许在一个 css 文件中导入其他 css 文件。然而，后果是只有执行到 @import 时，浏览器才会去下载其他 css 文件，这导致页面加载起来特别慢。

sass 也有一个 @import 规则，但不同的是，sass 的 @import 规则在生成 css 文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个 css 文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

使用 sass 的 @import 规则并不需要指明被导入文件的全名。你可以省略 .sass 或 .scss 文件后缀。

通常，有些 sass 文件用于导入，你并不希望为每个这样的文件单独地生成一个 css 文件。对此，sass 用一个特殊的约定来解决。

2-1. 使用 SASS 部分文件;

当通过 @import 把 sass 样式分散到多个文件时，你通常只想生成少数几个 css 文件。那些专门为 @import 命令而编写的 sass 文件，并不需要生成对应的独立 css 文件，这样的 sass 文件称为局部文件。

sass 局部文件的文件名以下划线开头。这样，sass 就不会在编译时单独编译这个文件输出 css，而只把这个文件用作导入。

2-2. 默认变量值;

假如你写了一个可被他人通过 @import 导入的 sass 库文件，你可能希望导入者可以定制修改 sass 库文件中的某些值。使用 sass 的 !default 标签可以实现这个目的。

$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

在上例中，如果用户在导入你的 sass 局部文件之前声明了一个 $fancybox-width 变量，那么你的局部文件中对 $fancybox-width 赋值 400px 的操作就无效。如果用户没有做这样的声明，则 $fancybox-width 将默认为 400px 。

2-3. 嵌套导入;

跟原生的 css 不同，sass 允许 @import 命令写在 css 规则内。

举例说明，有一个名为 _blue-theme.scss 的局部文件，内容如下：

aside {
  background: blue;
  color: white;
}

然后把它导入到一个 CSS 规则内，如下所示：

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

2-4. 原生的CSS导入;

由于 sass 兼容原生的 css，所以它也支持原生的 CSS@import。下列三种情况下会生成原生的 CSS@import，这会造成浏览器解析css时的额外下载：

被导入文件的名字以. css 结尾；
被导入文件的名字是一个 URL 地址（比如 http://www.sass.hk/css/css.css），由此可用谷歌字体 API 提供的相应服务；
被导入文件的名字是 CSS 的 url() 值。

这就是说，你不能用 sass的@import 直接导入一个原始的 css 文件，因为sass会认为你想用 css 原生的 @import。但是，因为sass的语法完全兼容 css，所以你可以把原始的 css 文件改名为 .scss 后缀，即可直接导入了。

3-1. 变量声明;

sass 让人们受益的一个重要特性就是它为 css 引入了变量。你可以把反复使用的 css 属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。

sass 使用 $ 符号来标识变量

$highlight-color: #F90;

这意味着变量 $highlight-color 现在的值是 #F90。任何可以用作 css 属性值的赋值都可以用作sass的变量值，甚至是以空格分割的多个属性值。

与 CSS 属性不同，变量可以在 css 规则块定义之外存在。当变量定义在 css 规则块内，那么该变量只能在此规则块内使用。

3-2. 变量引用;

凡是 css 属性的标准值可存在的地方，变量就可以使用。

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

// 编译后
.selected {
  border: 1px solid #F90;
}

看上边示例中的 $h i g h l i g h t - c o l o r 变量，它被直接赋值给 b o r d e r 属性，当这段代码被编译输出 c s s 时，$ highlight-color 会被 #F90 这一颜色值所替代。

在声明变量时，变量值也可以引用其他变量。当你通过粒度区分。

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

// 编译后
.selected {
  border: 1px solid #F90;
}

这里，$highlight-border 变量的声明中使用了 $highlight-color 这个变量。产生的效果就跟你直接为 border 属性设置了一个 1px $highlight-color solid 的值是一样的。

再重温 scss 同时，自己也在推进 freeCodeCamp 中文社区的课程挑战。本来凭借自己多年的前端经验信誓旦旦，结果越到后期越心虚，果然还是学习之路慢慢，自己还有很多的欠缺。

在该挑战 CSS 基础：使用 CSS 变量一次更改多个元素单元得知 css 本身也具有变量概念，课程示例如下：
.penguin {
--penguin-skin: gray;
}
.penguin-top {
background: var(--penguin-skin, gray); // 这里 var 中第一个参数为引用变量，第二个参数为备用色值
}

// 编译后
.penguin-top {
background: gray;
}

4. 嵌套 CSS 规则;

在 Sass 中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass 在输出 css 时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

// 编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

4-1. 父选择器的标识符 &;

一般情况下，sass 在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边（article 和 aside）形成（#content article 和 #content aside）。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接，最常见的一种情况是当你为链接之类的元素写：hover这种伪类时。

article a {
  color: blue;
  :hover { color: red }
}

这意味着 color: red 这条规则将会被应用到选择器 article a :hover，article 元素内链接的所有子元素在被 hover 时都会变成红色。这是不正确的！

解决之道为使用一个特殊的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 }
}

// 编译后
#content aside {color: red};
body.ie #content aside { color: green }

4-2. 群组选择器的嵌套;

在 CSS 里边，选择器 h1 h2 和 h3 会同时命中 h1 元素、h2 元素和 h3 元素。这种选择器称为群组选择器。群组选择器 的规则会对命中群组中任何一个选择器的元素生效。

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

对于内嵌在群组选择器内的嵌套规则，处理方式也一样：

nav, aside {
  a {color: blue}
}

4-3. 子组合选择器和同层组合选择器：>、+ 和 ~;

上边这三个组合选择器必须和其他选择器配合使用，以指定浏览器仅选择某种特定上下文中的元素。

article > section { border: 1px solid #ccc }

你可以用子组合选择器 > 选择一个元素的直接子元素。上例中，选择器只会选择 article 下紧跟着的子元素中命中 section 选择器的元素。

在下例中，你可以用同层相邻组合选择器 + 选择 header 元素后紧跟的 p 元素：

header + p { font-size: 1.1em }

你也可以用同层全体组合选择器 ~，选择所有跟在 article 后的同层 article 元素，不管它们之间隔了多少其他元素：

article ~ article { border-top: 1px dashed #ccc }

这些组合选择器可以毫不费力地应用到sass的规则嵌套中。

4-4. 嵌套属性;

在 sass 中，除了 CSS 选择器，属性也可以进行嵌套。

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;
}

5. 混合器;

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过 sass 的混合器实现大段样式的重用。

混合器使用 @mixin 标识符定义。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

// 编译后
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

5-1. 何时使用混合器;

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如 rounded-cornersfancy-font 或者 no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

混合器在某些方面跟 css 类很像。都是让你给一大段样式命名，所以在选择使用哪个的时候可能会产生疑惑。最重要的区别就是类名是在 html 文件中应用的，而混合器是在样式表中应用的。这就意味着类名具有语义化含义，而不仅仅是一种展示性的描述：用来描述 html 元素的含义而不是 html 元素的外观。而另一方面，混合器是展示性的描述，用来描述一条 css 规则应用之后会产生怎样的效果。

5-2. 混合器中的CSS规则;

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性，如下代码:

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

当一个包含 css 规则的混合器通过 @include 包含在一个父规则中时，在混合器中的规则最终会生成父规则中的嵌套规则。

ul.plain {
  color: #444;
  @include no-bullets;
}

sass 的 @include 指令会将引入混合器的那行代码替换成混合器里边的内容。最终，上边的例子如下代码:

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

5-3. 给混合器传参;

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。如果你写过JavaScript，这种方式跟JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
  @include link-colors(blue, red, green);
}

// Sass 最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

当你 @include 混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass 允许通过语法 $name: value 的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

a {
  @include link-colors(
    $normal: blue,
    $visited: green,
    $hover: red
  );
}

5-4. 默认参数值;

为了在 @include 混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用 $name: default-value 的声明形式，默认值可以是任何有效的 css 属性值，甚至是其他参数的引用，如下代码：

@mixin link-colors($normal, $hover: $normal, $visited: $normal){
  color: $normal;
  &:hover {
    color: $hover;
  }
  &:visited {
    color: $visited;
  }
}

如果像下边这样调用：@include link-colors(red) $hover 和 $visited 也会被自动赋值为 red。

6. 使用选择器继承来精简 CSS;

使用 sass 的时候，最后一个减少重复的主要特性就是选择器继承。基于 Nicole Sullivan 面向对象的 css 的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过 @extend 语法实现，如下代码:

// 通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

在上边的代码中，.seriousError 将会继承样式表中任何位置处为 .error 定义的所有样式。

6-1. 何时使用继承;

混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。继承应该是建立在语义化的关系上。当一个元素拥有的类（比如说 .seriousError）表明它属于另一个类（比如说 .error）。

这一章部分转自易百教程，但过滤掉了上述重复的知识内容，并对内容做了补充修改。

括号混合

括号是对其通过圆括号 () 或方括号 []，它提供符号逻辑影响操作的顺序，通常都标示了标志。

p {
  font-size:  5px + (6px * 2);
  color:#ff0000;
}

// 编译后
p {
  font-size: 17px;
  color: #ff0000;
}

插值

它提供了使用 #{} 语法选择器和属性名的 SassScript 变量。可以在大括号中指定变量或属性名称。

p:after {
  content: "I have #{8 + 2} books on SASS!";
}

// 编译后
p:after {
  content: "I have 10 books on SASS!";
}

占位符选择器

内容补充参考来自：Sass - 占位符选择器(%placeholder)

占位选择器看起来很像普通的 class 和 id 选择器，只是 # 或 . 被替换成了 % ，他可以像 class 或者 id 选择器那样使用，需要注意的是，它本身的规则不会被编译到 CSS 文件中。

%demo1 {
  border-radius:50%;
}

// 编译后
null(空)

如果不被 @extend 调用的话，不会产生任何代码。而使用 @extend 调用后：

%demo1 {
  border-radius:50%;
}
a {
  @extend %demo1;
}

// 编译后
a {
  border-radius: 50%;
}

使用 @extend 调用定义好的选择器占位符 %placeholder 有所限制，他不能在不同的 @media 中运行：

%demo1 {
  border-radius:50%;
}
a {
  @extend %demo1;
}
@media screen {
  a {
    @extend %demo1;
  }
}

此时会抛出错误，解释为：因为 @extend 是将一个选择器样式扩展到另一个选择器当中，而实际上在不同的 @media 中却无需复制这些样式。

操作符

1. 数字

sass 允许数学运算，如 + 、- 、* 、/。sass支持关系运算符如 < ，> ，<= ，>= 和等于运算符 == ，!=。

$size: 25px;
h2 {
  font-size: $size + 5;
}
h3 {
  font-size: $size / 5;
}
.para1 {
  font-size: $size * 1.5;
}
.para2 {
  font-size: $size - 10;
}

// 编译后
h2 {
  font-size: 30px;
}
h3 {
  font-size: 5px;
}
.para1 {
  font-size: 37.5px;
}
.para2 {
  font-size: 15px;
}

2. 颜色

sass 允许使用颜色分量以及算术运算和任何颜色表达式返回 SassScript 颜色值。

$color1: #333399;
$color2: #CC3399;
p {
  color: $color1 + $color2;
}

// 编译后
p {
  color: #ff66ff;
}

3. 布尔

可以通过使用与，或，非操作符来执行 sass 脚本布尔运算。

$age:20;
.bool {
  @if ($age > 10 and $age < 25) {
    color: green;
  }
}

// 编译后
.bool {
  color: green;
}

规则和指令

1. @at-root 指令

@at-root 选择器默认不包括选择器是嵌套的规则的集合，它能够使样式块在文档的根目录。

@media print {
  .style {
    height: 8px;
    @at-root (without: media) {
      color: #808000;;
    }
  }
}

// 编译后
@media print {
  .style {
    height: 8px;
  }
}
.style {
  color: #808000;
}

2. @debug 指令

@debug 指令检测错误，并显示 SassScript 表达值到标准错误输出流。示例如下：

$font-sizes: 10px + 20px;
$style: (
  color: #bdc3c7
);
.container{
  @debug $style;
  @debug $font-sizes;
}

当你运行上面的命令，它会自动创建 debug.css 文件。无论何时更改 scss 文件， debug.css 文件将得到自动更新。

3. @warn 指令

@warn 指令用于提供有关问题的警告性建议。它显示 SassScript 表达值到标准错误输出流。

$main-color:  #bdc3c7;
@warn "Darker: " darken($main-color, 30%);

当运行上面的命令，它会自动创建 warn.css 文件。无论何时更改 scss 文件，该文件 warn.css 将得到自动更新。

4. @error指令

@error 指令显示 SassScript 表达式的值作为致命错误。

$colors: (
  blue: #c0392b,
  black: #2980b9,
);
@function style-variation($style) {
  @if map-has-key($colors, $style) {
    @return map-get($colors, $style);
  }
  @error "Invalid color: '#{$style}'.";
}
.container {
  style: style-variation(white);
}

当运行上面的命令，它会自动创建 error.css 文件。无论何时更改 scss 文件，error.css 文件将得到自动更新。

if() 函数

内置 if() 函数从两个可能的结果返回一个结果。所述函数结果可能不能定义或进一步计算变量。

h2 {
  color: if( 1 + 1 == 2 , green , red);
}

// 编译后
h2 {
  color: green;
}

@if 指令

@if 指令接受 SassScript 表达式和使用嵌套样式,无论表达式的结果只不过是 false 或 null。

p {
  @if 10 + 10 == 20   { border: 1px dotted;   }
  @if 7 < 2     { border: 2px solid;  }
  @if null    { border: 3px double; }
}

// 编译后
p {
  border: 1px dotted;
}

@else if 指令

@else if 语句用来与@if指令一起使用。当 @if 语句失败时，则 @else if 语句测试，如果它们也无法测试满足时再 @else 执行。

$type: audi;
p {
  @if $type == benz {
    color: red;
  } @else if $type == mahindra {
    color: blue;
  } @else if $type == audi {
    color: green;
  } @else {
    color: black;
  }
}

// 编译后
p {
  color: green;
}

@for through 关键字

@for 指令使用 through 关键字，包括 <start> 和 <end> 这两个值的范围。

语法：

@for $var from <start> through <end>

语法简要说明如下：

$var：它代表了变量的名称如 $i
<start> 和 <end> ：这些 SassScript 表达式将返回整数。如果大于则计数器变量递减，当比小计数器变量会增加。

示例：

@for $i from 1 through 4 {
  .p#{$i} { padding-left : $i * 10px; }
}

// 编译后
.p1 {
  padding-left: 10px;
}
.p2 {
  padding-left: 20px;
}
.p3 {
  padding-left: 30px;
}
.p4 {
  padding-left: 40px;
}

控制指令

1. @for to 关键字

@for 指令使用 to 关键字指定从 <start> 值到值 <end> 值的范围。

语法：

@for $var from <start> to <end>

语法简要说明如下：

$var：它代表了变量的名称如 $i
<start> 和 <end> ：这些 SassScript 表达式将返回整数。如果大于则计数器变量递减，当比小计数器变量会增加

示例：

@for $i from 1 to 4 {
  .p#{$i} { padding-left : $i * 10px; }
}

// 编译后
.p1 {
  padding-left: 10px;
}
.p2 {
  padding-left: 20px;
}
.p3 {
  padding-left: 30px;
}

2. @each 指令

在 @each 变量的定义，其中包含的每个项目的列表中的值。

语法：

@each $var in <list or map>

语法简要说明如下：

$var：它代表了变量的名称。 @each 规则将 $var 每个项目在列表中使用 $var 值输出样式。
<list 或 map>：这是 SassScript 表达式这将返回一个列表或映射。

示例：

@each $color in red, green, yellow, blue {
  .p_#{$color} {
    background-color: #{$color};
  }
}

// 编译后
.p_red {
  background-color: red;
}
.p_green {
  background-color: green;
}
.p_yellow {
  background-color: yellow;
}
.p_blue {
  background-color: blue;
}

3. @each 多重分配

多个值也可以用 @each 指令中使用。如， $var1, $v a r 2,$ var3, … 在。

语法：

@each $var1, $var2, $var3 ... in <list>

语法简要说明如下：

$var1, $var2 和 $var3：这些代表变量的名称。
：它代表列表的列表，每个变量将持有子列表的元素。

示例：

@each $color, $border in (aqua, dotted), (red, solid), (green, double) {
  .#{$color} {
    background-color: $color;
    border: $border;
  }
}

// 编译后
.aqua {
  background-color: aqua;
  border: dotted;
}
.red {
  background-color: red;
  border: solid;
}
.green {
  background-color: green;
  border: double;
}

4. @each 多重分配与映射

多多重任务可以很好地处理映射，他们被认为是列表对。如果你想使用映射，那么必须改变 @each 声明和使用多个任务。

语法：

@each $var1, $var2 in <map>

语法简要说明如下：

$var1, $var2：这些代表变量的名称。
：它代表列表的列表，每个变量将持有子列表的元素。

示例：

@each $header, $color in (h1: red, h2: green, h3: blue) {
  #{$header} {
    color: $color;
  }
}

// 编译后
h1 {
  color: red;
}
h2 {
  color: green;
}
h3 {
  color: blue;
}

5. @while 指令

类似于其他的控制指令，@while 指令也需要 SassScript 表达式和直到该语句的计算结果为假之前，它会反复输出嵌套样式。需要注意的关键一点是，在每个迭代记数变量需要递增/递减。

$i: 50;
@while $i > 0 {
  .paddding-#{$i} { padding-left: 1px * $i; }
  $i: $i - 10;
}

// 编译后
.paddding-50 {
  padding-left: 50px;
}
.paddding-40 {
  padding-left: 40px;
}
.paddding-30 {
  padding-left: 30px;
}
.paddding-20 {
  padding-left: 20px;
}
.paddding-10 {
  padding-left: 10px;
}

这一章部介绍 Sass 的内置函数，文章来自 Sass函数功能汇总、Sass自定义函数。

Sass函数功能汇总

Sass 自备了一系列的函数功能，大部分能通过普通的 css 语句直接调用。这篇文章会详细介绍 Sass 的字符串函数、数字函数、列表函数、Introspection 函数、三元函数等等，尽量将 Sass 函数方面的知识汇总。

1. 字符串函数

unquote（$string）：删除字符串中的引号；
- 不管是双引号还是单引号包裹的字符串，引号皆被去掉；
- 只能删除字符串最前边和最后边的引号，没法去掉中间的引号；
- 如果字符串没有带引号，则返回原字符串；
- 若引号中，有半个不成对的引号；
quote（$string）：给字符串添加引号；
- 若字符串本身带有引号，就不添加；
- 若字符串带有单引号，则跟换为双引号；
- 若双引号中有单引号，则不变，单引号不受影响；
- 若字符串中间有空格或者半块的单引号、双引号时，需要用单引号或双引号括起，不然编译会报错；
- 碰到特殊符号，比如： !、?、> 等，除中折号 - 和下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错；
To-upper-case（$string）：将字符串小写字母转换为大写字母
To-lower-case（$string）：将字符串大写字母转换为小写字母

2. 数字函数

percentage($value)：将不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：向上取整；
floor($value)：向下取整；
abs($value)：取数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值；
random(): 获取随机数；

3. 列表函数

length($list)：返回一个列表的长度值；
nth($list, $n)：返回一个列表中指定的某个标签值；
join($list1, $l i s t 2, [$ separator])：将两个列给连接在一起，变成一个列表；
append($list1, $v a l, [$ separator])：将某个值放在列表的最后；
zip($lists…)：将几个列表结合成一个多维的列表；
index($list, $value)：返回一个值在列表中的位置值；

4. Introspection函数

type-of($value)：返回一个值的类型；
unit($number)：返回一个值的单位；
unitless($number)：判断一个值是否带有单位；
comparable($number-1, $number-2)：判断两个值是否可以做加、* 减和合并；

5. 三元条件函数

if($condition,$if-true,$if-false);

判断 $condition，如果条件成立，则返回 $if-true 的结果，如果条件不成立，则返回 $if-false 的结果。

6. Maps的函数

map-get( $m a p,$ key)：根据给定的 key 值，返回 map 中相关的值；
map-has-key( $m a p,$ key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false；
map-keys($map)：返回 map 中所有的 key；
map-values($map)：返回 map 中所有的 value；
map-merge( $m a p 1,$ map2)：将两个 map 合并成一个新的 map；
map-remove( $m a p,$ key)：从 map 中删除一个 key，返回一个新 map；
keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value；

Sass中map的形式如下：
用 $ 加上命名空间来声明 map，后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，key 和 value 是成对出现。

$map: (
  $key1: value1,
  $key2: value2,
  $key3: value3
)

对应的一些例子：

//SCSS
$colors: ( // $map
        redColor: #FF2C60, // $key:value
        greenColor:#168009,
        blueColor:#7BA5FF
);

@if map-has-key($colors, meat) { // 当 $map 中有这个 $key，则函数返回 true，否则返回 false。
  div {
    color: map-get($colors, redColor); // 根据 $key 参数，返回 $key 在 $map 中对应的 value 值。
    color: map-get($colors, yellowColor); // 如果 $key 不存在 $map中，将返回 null 值,并且不会把css编译出来。
  }
} @else {
  div {
    color: green
  }
}

.btn-#{nth(map-keys($colors),1)} { // 函数将会返回 $map 中的所有 key,并通过nth（）获取某值
  color: nth(map-values($colors), 2); // 函数将会返回 $map 中的所有 value,并通过nth（）获取某值
}

$div1: (
        text: #f36,
        link: #f35,
        border: #384
);
$div2: (
        width:300px,
        height:100px,
        z-index:3
);
$newMap: map-merge($div1, $div2); // map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。
div {
  @each $x, $y in $newMap {
    #{$x}: #{$y};
  }
}

$newMap: map-remove($div1, link); // 用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。
div {
  @each $x, $y in $newMap {
    #{$x}: #{$y};
  }
}

// CSS
div {
  color: green;
}
.btn-redColor {
  color: #168009;
}
div {
  text: #f36;
  link: #f35;
  border: #384;
  width: 300px;
  height: 100px;
  z-index: 3;
}
div {
  text: #f36;
  border: #384;
}

7. 颜色函数

rgb( $r e d,$ green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba( $r e d,$ green, $b l u e,$ alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix( $c o l o r - 1,$ color-2,[$weight])：把两种颜色混合在一起；

8. 自定义函数

Sass 和其他脚本语言有类似之处，可以利用变量来构建自己的函数，这使 Sass 可以像写 JavaScript 那样拥有自己的逻辑。下面是 Sass 自定义函数的基本结构：

@function function-name($args) {
  @return value-to-be-returned;
}
body{
  font-size: function-name($args);
}

创建自定义函数需要两个 Sass 指令， @function 和 @return。前者创建函数，后者表明了函数将返回的值
function-name 代表函数名，在 Sass 中 function-name 和 function_name 是相同的函数，所以可使用破折号或下划线调用函数，无论命名时使用的是哪个。
传递到函数中的参数$args是可选的，通常会使用传递过去的参数进行运算，也可能是一些所有函数都可以访问的全局变量。

// SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width(3, 8);
}
.col-5 {
  width: column-width(5, 8);
}

// CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 62.5%; }

传参的时候有时候会不知道每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，Sass 允许通过语法 $name: value 的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

// SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:3, $total:8);
}
.col-5 {
  width: column-width($total:5,$col:8);
}

// CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 160%; }

为了在使用函数是不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用 $name: default-value 的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用。

// SCSS
@function column-width($col:3, $total:8) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:2, $total:4);
}
.col-5 {
  width: column-width();
}

// CSS
.col-3 {  width: 50%; }
.col-5 {  width: 37.5%; }

「已注销」

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
scss 知识整理

使用预处理语言也有 5 年多了，从 less sass 到 scss 零零散散的也整理过一些文章，但最终随着时间流逝都未完整的保存。近来在整理浏览器收藏夹，相关文章自己收藏了不少，索性重新整理一篇以作知识积累。SCSS 是什么世界上最成熟、最稳定、最强大的专业级CSS扩展语言！这一章部分转自 Sass中文网，但对内容顺序做了调整以及精简。1. 静默注释;css 中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你并不希望每个浏览网站源码的人都能.
复制链接

扫一扫