Scss基础用法

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

1. 语法格式：
   • Sass 使用严格的缩进来表示代码块，类似于 Python。
   • SCSS 使用更接近于常规 CSS 的花括号和分号的语法。
2. 文件扩展名：
   • Sass 文件使用 .sass 扩展名。
   • SCSS 文件使用 .scss 扩展名。
3. 语法风格：
   • Sass 更加简洁，省略了许多常见的符号，如花括号和分号。
   • SCSS 更接近于常规的 CSS 语法，因此更容易学习和迁移。
4. 兼容性：
   • 由于 SCSS 的语法更接近于 CSS，因此它更容易被现有的 CSS 代码接受，并且可以逐步地将现有的 CSS 文件重命名为 SCSS 并继续工作。
   • Sass 的语法相对较新，可能需要一些时间来适应。
5. 选择：
   • 选择使用 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]