scss的基础使用

Sass（Syntactically Awesome Stylesheets）和 SCSS（Sassy CSS）都是用于样式表的预处理器，它们扩展了普通的 CSS 语法，提供了更多的功能和灵活性。以下是它们的主要区别：

语法格式：

Sass 使用严格的缩进来表示代码块，类似于 Python。

SCSS 使用更接近于常规 CSS 的花括号和分号的语法。

文件扩展名：

Sass 文件使用 .sass 扩展名。

SCSS 文件使用 .scss 扩展名。

语法风格：

Sass 更加简洁，省略了许多常见的符号，如花括号和分号。

SCSS 更接近于常规的 CSS 语法，因此更容易学习和迁移。

兼容性：

由于 SCSS 的语法更接近于 CSS，因此它更容易被现有的 CSS 代码接受，并且可以逐步地将现有的 CSS 文件重命名为 SCSS 并继续工作。

Sass 的语法相对较新，可能需要一些时间来适应。

选择：

选择使用 Sass 还是 SCSS 取决于个人偏好和项目要求。一些开发者喜欢 Sass 的简洁性，而另一些喜欢 SCSS 的类似 CSS 的语法。

在实际使用中，两者都提供了相似的功能，包括变量、嵌套规则、混合（Mixins）等，因此可以根据团队的需求和开发者的偏好进行选择。

1、`#{ }`（插值语句）

有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名：

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

通过 #{}插值语句可以在选择器或属性名中使用变量

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
// 编译为：
p.foo {
  border-color: blue; 
}

2、混入指令

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式
@include 指令可以将混入（mixin）引入到文档中

2.1、标准形式

// 定义页面一个区块基本的样式
@mixin block {
    width: 96%;
    margin-left: 2%;
    border-radius: 8px;
    border: 1px #f6f6f6 solid;
}

// 使用混入
.container {
    .block {
        @include block;
    }
}

2.2、嵌入选择器

@mixin warning-text {
    .warn-text {
        font-size: 12px;
        color: rgb(255, 253, 123);
        line-height: 180%;
    }
}

// 使用混入
.container {
    @include warning-text;
}

2.3、使用变量（单参数）

// 定义flex布局元素纵轴的排列方式
@mixin flex-align($aitem) {
    -webkit-box-align: $aitem;
    -webkit-align-items: $aitem;
    -ms-flex-align: $aitem;
    align-items: $aitem;
}

// 只有一个参数，直接传递参数
.container {
    @include flex-align(center);
}

// 给指定参数指定值
.footer {
    @include flex-align($aitem: center);
}

2.4、使用变量（多参数）

// 定义块元素内边距
@mixin block-padding($top, $right, $bottom, $left) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

// 按照参数顺序赋值
.container {
    @include block-padding(10px, 20px, 30px, 40px);
}

// 可指定参数赋值
.container {
    @include block-padding($left: 20px, $top: 10px, $bottom: 10px, $right: 30px);
}

2.5、指定默认值

// 定义块元素内边距，参数指定默认值
@mixin block-padding($top:0, $right:0, $bottom:0, $left:0) {
    padding-top: $top;
    padding-right: $right;
    padding-bottom: $bottom;
    padding-left: $left;
}

// 可指定参数赋值
.container {
    // 不带参数
    @include block-padding;
    //按顺序指定参数值
    @include block-padding(10px,20px);
    //给指定参数指定值
    @include block-padding($left: 10px, $top: 20px)
}

2.6、可变参数

/** 
   定义线性渐变
   @param $direction  方向
   @param $gradients  颜色过度的值列表
*/

@mixin linear-gradient($direction, $gradients...) {
    background-color: nth($gradients, 1);
    background-image: linear-gradient($direction, $gradients);
}

.table-data {
    @include linear-gradient(to right, #F00, orange, yellow);
}

3、继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用，@extend 很好的体现了代码的复用

3.1、基本使用

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

3.2、多层继承

例如定义两个类，important类继承alert类的样式，alert-danger类继承important的样式

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.important {
    @extend .alert;
    font-weight: bold;
    font-size: 14px;
}

.alert-danger {
    @extend .important;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

4、流程控制语句

4.1、`@if`

同 JavaScript 中的 if….else、if …else。代码形式：

.container{
    // if
    @if(/* 条件 */){
        // ...
    }


    // if、else
    @if(/* 条件 */){
        // ...
    }@else{
        // ...
    }
    
    // if、else if、else
    @if(/* 条件 */){
        // ...
    }@else if(){
        // ...
    }@else{
        // ...
    }
}

4.2、`@for`

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动
这个指令包含两种格式：

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

区别在于 through 与 to 的含义：

使用 through 时，条件范围包含 <start> 与 <end> 的值
使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值

$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

4.3、`@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'); }

4.4、`@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; }

5、三元条件函数

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

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

$theme:'light';
.container {
    color: if($theme=='light', #000, #FFF);
}

6、Map函数

函数	描述
map-get(map, key)	返回 Map 中 key 所对应的 value(值)。如没有对应的 key，则返回 null 值
map-has-key(map, key)	判断 map 是否有对应的 key，存在返回 true，否则返回 false
map-keys(map)	返回 map 中所有的 key 组成的队列
map-merge(map1, map2)	合并两个 map 形成一个新的 map 类型，即将 map2 添加到 map1的尾部
map-remove(map, keys…)	移除 map 中的 keys，多个 key 使用逗号隔开
map-values(map)	返回 map 中所有的 value 并生成一个队列

7、`@use`

@use也可以看作是对 @import 的增强
通过@use引入的样式默认把文件名作为模块名使用，你可以通过as的形式重新取一个别名
@use引入多个文件时，每个文件都是单独的模块，相同变量名不会覆盖，通过模块名访问，而@import变量会被覆盖
可能@use '<url>' as *来取消命名空间，这种方式加载的模块被提升为全局模块

@use '<url>' [as alias|namespace]