【Sass学习笔记】004-Sass 的基本特性-基础（重要）

最新推荐文章于 2023-08-24 19:30:33 发布
最新推荐文章于 2023-08-24 19:30:33 发布
阅读量388 收藏
点赞数
分类专栏： Sass Web 文章标签： sass 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/124872710
版权
Web 同时被 2 个专栏收录
74 篇文章 7 订阅
订阅专栏
Sass
5 篇文章 0 订阅
订阅专栏

文章目录

四、Sass 的基本特性-基础（重要）

1 声明变量

1.1 定义变量的语法

在有些编程语言中（如，JavaScript）声明变量都是使用关键词“var”开头，但是在 Sass 不使用这个关键词，而是使用大家都喜欢的美元符号“$”开头。我想用一张图来解释，我一直坚信，一图胜千言万语：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2kmlnAY5-1652968615436)(551e065c0001435e07870307.jpg)]

上图非常清楚告诉了大家，Sass 的变量包括三个部分：

  1. 声明变量的符号“$”
  2. 变量名称
  3. 赋予变量的值

1.2 简单示例

假设你的按钮颜色可以给其声明几个变量

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color : #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

如果值后面加上 !default 则表示默认值。

注：了解 Bootstrap 的 Sass 版本的同学，就一眼能看出，上面的示例代码是 Bootstrap 定义 primarybutton 的颜色。

1.3 代码演示

//Welcome to imooc learning Sass
$width: 200px;

2 普通变量与默认变量

2.1 普通变量

定义之后可以在全局范围内使用。

$fontSize: 12px;
body{
    font-size:$fontSize;
}

编译后的css代码：

body{
    font-size:12px;
}

2.2 默认变量

sass 的默认变量仅需要在值后面加上 !default 即可。

$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

body{
    line-height:1.5;
}

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

注意：这里是在默认变量之前声明来覆盖默认变量的值！

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

body{
    line-height:2;
}

可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

3 变量的调用

在 Sass 中声明了变量之后，就可以在需要的地方调用变量。调用变量的方法也非常的简单。

比如在定义了变量

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7
$btn-primary-color: #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

在按钮 button 中调用，可以按下面的方式调用

.btn-primary {
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}

编译出来的CSS:

.btn-primary {
  background-color: #337ab7;
  color: #fff;
  border: 1px solid #2e6da4;
}

4 局部变量和全局变量

4.1 概述

Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近，规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。

4.2 全局变量与局部变量

先来看一下代码例子：

// SCSS
$color: orange !default; // 定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color; // 调用全局变量
}
em {
  $color: red; // 定义局部变量
  a {
    color: $color; // 调用局部变量
  }
}
span {
  color: $color; // 调用全局变量
}

css 的结果：

// CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码：

$color:orange !default;

$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。

除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。

4.3 全局变量的影子

当在局部范围（选择器内、函数内、混合宏内…）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。

// SCSS
$color: orange !default; //定义全局变量
.block {
  color: $color; // 调用全局变量
}
em {
  $color: red; // 定义局部变量（全局变量 $color 的影子）
  a {
    color: $color; // 调用局部变量
  }
}

4.4 什么时候声明变量

我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：

  1. 该值至少重复出现了两次；
  2. 该值至少可能会被更新一次；
  3. 该值所有的表现都与变量有关（非巧合）。

基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。

温馨小提示：您在学习 sass 时，除了在慕课网的网页上可以做练习，还有一个便利在线编辑器网址如下：

http://sassmeister.com/

5 嵌套

5.1 概述

Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。

选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种：

  • 选择器嵌套
  • 属性嵌套
  • 伪类嵌套

5.2 选择器嵌套

假设我们有一段这样的结构：

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：

nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中，就可以使用选择器的嵌套来实现：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

5.3 属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

5.4 伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助&符号一起配合使用。我们就拿经典的“clearfix”为例吧：

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

编译出来的 CSS：

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

5.5 避免选择器嵌套

也许很多时候已经不再去看编译成的 CSS 代码了，维护的时候也来看 Scss 代码就好了，可读性就好多了！

  • 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
  • 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。

6 混合宏

6.1 概述

几处小样式类似：变量；

重复使用大段样式：混合宏。

如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。在这一节中，主要向大家介绍 Sass 的混合宏。

6.2 声明混合宏

不带参数的混合宏

在 Sass 中，使用“@mixin”来声明一个混合宏。如：

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

其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

带参数的混合宏
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
复杂的混合宏

上面是一个简单的定义混合宏的方法，当然， Sass 中的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情，如：

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

注：复杂的混合宏中的逻辑关系（@if…@else）后面小节会有讲解。

6.3 调用混合宏

在 Sass 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用：

button {
    @include border-radius;
}

这个时候编译出来的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

代码示例：

//welcome to imooc learn Sass
@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

button {
    @include border-radius;
}

6.4 传一个不带值的参数

在混合宏中，可以传一个不带任何值的参数，比如：

注意：不带值的参数，指的是声明一个不带默认值的参数变量！

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候可以给这个混合宏传一个参数值：

.box {
  @include border-radius(3px);
}

这里表示给混合宏传递了一个“border-radius”的值为“3px”。

编译出来的 CSS：

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

代码示例：

//welcome to imooc learn Sass
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(3px);
}

6.5 传一个带值的参数

在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：

@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。

在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:

.btn {
  @include border-radius;
}

编译出来的 CSS：

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：

.box {
  @include border-radius(50%);
}

编译出来的 CSS：

.box {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

6.6 传多个参数

Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：

@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的：

.box-center {
  @include center(500px,300px);
}

编译出来 CSS:

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

在实际调用中：

.box {
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

编译出来的CSS:

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

6.7 混合宏的不足

混合宏调用时会在对应的地方补充 CSS 代码，多次调用则多次补充的是同样的代码，这就导致代码冗余，这是混合宏的不足之处。因此在实际应用场景中，应合理搭配使用变量和混合宏。

混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如：

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}

示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS：

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

上例明显可以看出，Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

7 扩展/继承

继承对于了解 CSS 的同学来说一点都不陌生，先来看一张图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-usq041tx-1652968615438)(55261e8200017bfc07910449.jpg)]

图中代码显示“.col-sub .block li,.col-extra .block li” 继承了 “.item-list ul li”选择器的 “padding : 0;” 和 “ul li” 选择器中的 “list-style : none outside none;”以及 * 选择器中的 “box-sizing:inherit;”。

在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：

// SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译出来之后：

// CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：

.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

代码示例：

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

8 占位符 %placeholder

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。**因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。**来看一个演示：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译出来的CSS

这里倒是挺智能的，代码很简化！

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。

代码示例：

%mt5 {
  margin-top: 5px;
}

.btn {
  @extend %mt5;
}

9 混合宏 VS 继承 VS 占位符

9.1 概述

初学者都常常纠结于这个问题“什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果。

9.2 代码示例

// SCSS中混合宏使用
@mixin mt($var){
  margin-top: $var;  
}

.block {
  @include mt(5px);

  span {
    display:block;
    @include mt(5px);
  }
}

.header {
  color: orange;
  @include mt(5px);

  span{
    display:block;
    @include mt(5px);
  }
}

// SCSS 继承的运用
.mt{
  margin-top: 5px;  
}

.block {
  @extend .mt;

  span {
    display:block;
    @extend .mt;
  }
}

.header {
  color: orange;
  @extend .mt;

  span{
    display:block;
    @extend .mt;
  }
}

// SCSS中占位符的使用
%mt{
  margin-top: 5px;  
}

.block {
  @extend %mt;

  span {
    display:block;
    @extend %mt;
  }
}

.header {
  color: orange;
  @extend %mt;

  span{
    display:block;
    @extend %mt;
  }
}

9.3 Sass 中的混合宏

见代码示例 2-24 行

**总结：**编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。

个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

9.4 Sass 中的继承

同样的，将上面代码中的混合宏，使用类名来表示，然后通过继承来调用：

见代码示例

**总结：**使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。

个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

9.5 占位符

最后来看占位符，将上面代码中的基类 .mt 换成 Sass 的占位符格式：

见代码示例

**总结：**编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

9.6 比较

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gwsx4Qej-1652968615439)(55263aa30001913307940364.jpg)]

10 插值#{}

使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子：

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

@each…in…语句会在《Sass进阶篇》中 1-6 @each循环 中讲解。

它可以让变量和属性工作的很完美，上面的代码编译成 CSS：

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

这是 Sass 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

编译出来的 CSS:

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

一旦你发现这一点，你就会想到超级酷的 mixins，用来生成代码或者生成另一个 mixins。然而，这并不完全是可能的。第一个限制，这可能会很删除用于 Sass 变量的插值。

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) {
    margin-top: $margin-#{$size};
}
.login-box {
    @include set-value(big);
}

上面的 Sass 代码编译出来，你会得到下面的信息：

error style.scss (Line 5: Undefined variable: “$margin-".)

所以，#{}语法并不是随处可用，你也不能在 mixin 中调用：

@mixin updated-status {
    margin-top: 20px;
    background: #F00;
}
$flag: "status";
.navigation {
    @include updated-#{$flag};
}

上面的代码在编译成 CSS 时同样会报错：

error style.scss (Line 7: Invalid CSS after “…nclude updated-”: expected “}”, was “#{$flag};”)
幸运的是，可以使用 @extend 中使用插值。例如：

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
.navigation {
    @extend %updated-#{$flag};
    @extend .selected-#{$flag};
}

上面的 Sass 代码是可以运行的，因为他给了我们力量，可以动态的插入 .class 和 %placeholder。当然他们不能接受像 mixin 这样的参数，上面的代码编译出来的 CSS：

.navigation {
    margin-top: 20px;
    background: #F00;
}
.selected-status, .navigation {
    font-weight: bold;
}

在 Sass 的社区正在积极讨论插值的局限性，谁又知道呢，也许我们很快将能够使用这些技术也说不定呢。

代码示例：

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

11 注释

注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式，我暂且将其命名为：

  1. 类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
  2. 类似 JavaScript 的注释方式，使用“//”

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：

//定义一个占位符

%mt5 {
  margin-top: 5px;
}

/*调用一个占位符*/

.box {
  @extend %mt5;
}

编译出来的CSS

.box {
  margin-top: 5px;
}

/*调用一个占位符*/

12 数据类型

Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：

  • 数字: 如，1、 2、 13、 10px；
  • 字符串：有引号字符串或无引号字符串，如，“foo”、 ‘bar’、 baz；
  • 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
  • 布尔型：如，true、 false；
  • 空值：如，null；
  • 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。

后两个小节详细讲解字符串和值列表数据类型，其它类型与JavaScript中的用法一致。

13 字符串

SassScript 支持 CSS 的两种字符串类型：

  • 有引号字符串 (quoted strings)，如 “Lucida Grande” 、‘http://sass-lang.com’；
  • 无引号字符串 (unquoted strings)，如 sans-serifbold。

在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

编译为：

cbody.firefox .header:before {
  content: "Hi, Firefox users!"; }

需要注意的是：当 deprecated = property syntax 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。

14 值列表

所谓值列表 (lists) 是指 Sass 如何处理 CSS 中：

margin: 10px 15px 0 0

或者：

font-face: Helvetica, Arial, sans-serif

像上面这样通过空格或者逗号分隔的一系列的值。

事实上，独立的值也被视为值列表——只包含一个值的值列表。

Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进阶会有讲解）：

  1. nth函数（nth function） 可以直接访问值列表中的某一项；
  2. join函数（join function） 可以将多个值列表连结在一起；
  3. append函数（append function） 可以在值列表中添加值；
  4. @each规则（@each rule） 则能够给值列表中的每个项目添加样式。

值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式，要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时，Sass 不会添加任何圆括号，因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表。

可以用 () 表示空的列表，这样不可以直接编译成 CSS，比如编译 font-family: ()时，Sass 将会报错。如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Sass 变量 $var、@import与Partials
qq_41872385的博客
04-14 1803
Sass 变量 $var、@import与Partials，如果在项目中得当使用，会非常方便项目中样式的维护。
sass变量详解——你不知道的sass。
weixin_34220623的博客
04-22 394
写在前面： 现在一直使用sass写css，当初入门的时候，看的很多教程，当时看的云里雾里的，现在看来还是蛮详细的，就是一点，不够小白。本人文章类型一直比较偏小白的，想要更好的为不会用sass提供一点学习的资料，相信本文对想要学习sass的人，还是有极大的参考价值的。里面有些细节，也许对已经学会使用sass的大手子也有一定的参考价值。 变量是什么？ w3c关于JavaScript 变量的介绍： 可以...
css中var()函数小结
weixin_63297813的博客
06-04 3688
var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。 函数语法: var(name,value) 例如: --set-color:red var(--set-color) 第一行是设置自定义的属性的名字与值。 第二行是通过这个属性名来调用这个值。 注:名字可随意设置但必须以双破折号开头。 一共两种写法 第一种，私域写法。 #div1{ --size1:20px; --size2:20; font-size:var(--size1);//.
Sass入门：第三章
weixin_33769207的博客
05-24 132
1.声明变量 　　Sass声明变量以美元符号"$"开头。例如： $width : 300px; 上面的例子中，Sass的变量包括三个部分： 　　(1)声明变量的符号"$" 　　(2)变量 　　(3)赋予变量的值 再看一个定义按钮颜色的例子： $brand-primary : darken(#428bca, 6.5%) !default; // #337ab7 $btn...
sass 通过 变量 设置颜色 并转存（color: var(--font-color)；）
ge18737872469的博客
10-28 1051
sass 通过 变量 设置颜色 并转存（color: var(--font-color);）
Sass学习笔记-Sass快速入门04
01-08
文章目录一、Map与相关函数1.1定义Map类型数据1.2 map-get(参数1，参数2) 可以根据键来得到值1.3 map-keys(参数1) 返回对象当中的所有key1.4 map-values(参数1) 返回对象当中所有的value1.5 map-has-key(参数1,参数2...
Sass学习笔记.md
09-14
Sass学习笔记.md
07-Sass语法学习笔记.md
最新发布
09-01
07-Sass语法学习笔记
Sass入门学习笔记
03-08
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的...
bootstrap学习笔记-html5
12-22
通过这个“bootstrap学习笔记-html5”压缩包，初学者可以学习如何结合HTML5的新特性与Bootstrap的便利性，创建出功能丰富且视觉吸引人的网页。从简单的案例开始实践，逐步掌握这两个工具的使用方法，将对提升网页...
Sass小结
weixin_47489898的博客
05-05 412
1、嵌套 1、选择器嵌套 2、属性嵌套 比如font-family，font-size，font-weight都以font作为属性的命名空间 2、父选择器& 也可以使用&进行选择器名称拼接 3、注释 编译成css文件后： /* …*/ 中的注释会保留 //中的注释不会保留 4、变量 1、原生css变量： --变量名:变量值定义，var(--变量名)进行使用 2、scss变量 以美元符号$开头 3、注意 变...
02 【Sass语法介绍-变量】
Instanceztt的博客
04-27 900
Sass 为 CSS 引入了变量这一功能，在实际项目中使用最普遍的除了 Sass 嵌套 就是 Sass 变量了，你可以把 CSS 的某个属性值定义为变量，然后在项目中任何需要它的地方来使用它。本节主要讲解 Sass 变量的主要语法：变量的声明、引用、作用域等，同时还会讲解在实际项目中一般是如何来维护 Sass 变量的。Sass 简介中提到 Sass是 CSS的扩展语言，变量是 CSS的扩展功能。举个例子，假如我们项目中很多地方要设置一个字体颜色为红色，那么我们完全可以把这个颜色抽出来作为一个变量。
【SCSS变量】$ | & | var | @for | @include | @function | @each 等常用方法使用
sunshineTing2的博客
08-24 2625
include。
你真的需要了解一下CSS变量 var()的用法
weixin_34198762的博客
01-18 771
当Web项目变得越来越大时，他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题，新的CSS变量很快就会出现在主流浏览器中，它让开发人员能够重用并轻松编辑重复出现的CSS属性。用过SASS或Less的人应该知道他的变量功能有多棒，但这些变量是预处理器，需要在使用前进行编译。现在变量在vanilla CSS中可用，您可以...
学习笔记--SASS编程基础（一）变量
gavincz的博客
03-26 390
变量——VariablesSASS 中的变量，必须是$符号开头，后面紧跟变量名，变量名称和变量值之间要使用冒号:进行分隔（参考 CSS 属性和值的设定语法），如果值后面加上[!default]就表示默认值。变量的使用：引用变量的值，只需直接使用变量名称，即可引用定义的变量的值。例如：   sass编译： $color:#fff;                                   ...
CSS变量之var()函数的应用——动态修改样式 & root的使用
weixin_44867717的博客
04-08 5918
CSS变量之var()函数的应用——动态修改样式 & :root的使用 一、css变量 body { --foo: #7F593F; --urls: './img/xxx.jpg'; } 如上述代码，意思为：在body选择器里面声明了两个变量：–foo 和 –bar； css声明变量不像Less的@foo， 也不像sass的$foo，而是采取了不同形式的–foo，声明出来的变量和color、background-url 等正式属性没有什么不同 ，所以 CSS 变量又叫做**“CSS 自定义
Vue换肤sass
weixin_46759393的博客
05-05 242
创建_theme.scss文件 /*定义两种风格主体*/ $light: ( themeColor: #99bdcc, themeBgColor: #000, ); $dark: ( themeColor: #fffff, themeBgColor: #f0f010, ); /*统一放到$themes下 类似于对象*/ $themes: ( light: $light, dark: $dark, ); 创建_mapThemes.scss 并引入_theme.scss.
sass和less的区别以及如何使用
weixin_46419373的博客
09-23 8515
一. Sass/Scss、Less是什么? 页面越来越复杂，需要加载的 CSS 文件也越来越大，我们有必要把大文件切分开来，否则难以维护。传统的 CSS 文件切分方案基本上就是 CSS 原生的 @import 指令，或在 HTML 中加载多个 CSS 文件，这些方案通常不能满足性能要求。 CSS 预处理器扩展了 @import 指令的能力，通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题，另一方面也解决了一堆小文件在加载时的性能问题。 Sass (Syntactically
利用css3的var()实现运行时改变scss的变量值
热门推荐
ggunlics的博客
01-04 2万+
title: 利用css3的var()实现运行时改变scss的变量值 tags: css,css3,var(),runtime change,scss grammar_cjkRuby: true create_date: 2018-12-24 var()介绍与使用   详情(MDN) IE无效,其余主流浏览器有效 var()使用   只能在{}内声明,作用范围由{}的选择器决定 &lt;!-...
Vue CLI2 项目 node-sass切换为dart-sass
06-06
您可以按照以下步骤将 Vue CLI2 项目中的 node-sass 切换为 dart-sass： 1. 首先，使用 npm 安装 `sass-loader` 和 `sass`： ``` npm install sass-loader sass --save-dev ``` 2. 打开 `webpack.base.conf.js` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值