SCSS的基本使用(一)

目录

一、使用&符号来引用父选择器

二、scss的语法

 三、变量（Variables）

四、嵌套（Nesting）

五、@mixin 和 @include

六、@extend 继承

七、@import 与 Partials

八、@if简单判断

九、@if复杂判断

一、使用&符号来引用父选择器

在嵌套规则中使用父选择器。这样可以避免重复编写选择器，并且在生成的CSS中保持正确的层级关系。

.button {
  background-color: blue;

  &:hover {
    background-color: darkblue;
  }

  &.active {
    background-color: red;
  }

  .icon {
    color: white;
    font-size: 16px;
  }
}

在上面的示例中，.button选择器是父选择器。在嵌套规则中，使用&引用父选择器。

• &:hover表示当鼠标悬停在.button元素上时，应用这个样式。
• &.active表示当.button元素有.active类时，应用这个样式。
• .icon表示嵌套在.button元素内的.icon元素，不使用&引用父选择器。 在编译为CSS后，生成的代码如下：

  .button {
    background-color: blue;
  }
  
  .button:hover {
    background-color: darkblue;
  }
  
  .button.active {
    background-color: red;
  }
  
  .button .icon {
    color: white;
    font-size: 16px;
  }

  通过使用&引用父选择器，可以编写更具可读性和维护性的代码。

  父选择器的引用可以嵌套在任何层级的规则中，并且可以与其他选择器和修饰符组合使用。

二、scss的语法

• （1）// 注释的内容不会编译到css文件中去

• /* 我的注释内容会编译到css文件中去 */
  body {
      margin: 0;
  }

• （2） /* */ 注释的内容会编译到css文件中，但是不能是压缩的编译排版格式（--style compressed）

/* 我的注释内容会编译到css文件中去 */
body {
    margin: 0;
}

• （3）强制注释 /!* */，这种注释在编译排格式为compressed中也能存在。
• 总结：// 一般注释scss内的变量、函数等，/* / 去注释样式说明，非常重要的注释采用/! */。

 三、变量（Variables）

• 变量名以 $ 开头，变量的值无需加引号，变量名与变量值之间用冒号
• 一个变量中可以使用其他变量

  // 变量名以 $ 开头，变量的值无需加引号，变量名与变量值之间用冒号
  $baseColor: pink;
  $bg_color: #ccc;
  
  // 一个变量中可以使用其他变量
  $base-border: 1px solid $baseColor;
  
  
  .box {  
    color: $baseColor;
    background-color: $bg_color;
    border: $base-border;
  }

  .box {
    color: pink;
    background-color: #ccc;
    border: 1px solid pink;
  }

  四、嵌套（Nesting）

• 普通后代选择器的嵌套

.box {
  background-color: pink;
    
  ul {
    /* ul 样式 */
    list-style: none;
        
    li {
        /* li 样式 */
        font-size: 1rem;
    }
  }
}

@charset "UTF-8";
.box {
  background-color: pink;
}
.box ul {
  /* ul 样式 */
  list-style: none;
}
.box ul li {
  /* li 样式 */
  font-size: 1rem;
}

伪类选择器的嵌套需要使用&符号, &的一个作用就是让两个元素之间没有空格，让他们紧密连接在一起；

.box{
  width: 300px;
  
  a{
    color:red;  
    
    &:hover {
      font-size: 30px;
    }
  }
}

.box {
  width: 300px;
}
.box a {
  color: red;
}
.box a:hover {
  font-size: 30px;
}

• 属性嵌套

.box {
  font:{
    size:12px;
    weight: 400;
  }
}

.box {
  font-size: 12px;
  font-weight: 400;
}

五、@mixin 和 @include

可以理解为js的函数

// 声明：如果没有参数，括号可省略
@minxin 名字(参1,参2,..) {
  // 样式代码，里面也可以写任何标签嵌套
}

// 调用，可以在某个标签下调用，也可单独调用；没有参数可以省略括号；
.box {
  @include 名字
}

@include 名字

• 无参数

// 定义不带参mixin
@mixin my() {
  border:1px solid red;
  color: pink;

  p {
    font-size: 24px;
  }
}

.box {
  @include my()
}

.box {
  border: 1px solid red;
  color: pink;
}
.box p {
  font-size: 24px;
}

Partials条件与特点：

body {
  margin: 0;
  padding: 0;
}

.box {
  font-size: 30px;
  color: red;
}

// Partials 文件：_base.scss
body {
  padding: 0;
  margin:0;
}

// 主要scss文件：index.scss
// 导入_base.scss
@import "base";

.box {
  font-size: 30px;
  color: red;
}

• 有参数

  // 定义带参mixin
  @mixin info($text-color, $bg-color) {
    color: $text-color;
    background-color: $bg-color;
  }
  
  .box {
    // 按顺序传实参，传递的参数必须保持一致
    @include info(red, gray)
  }
  
  .box {
    // 这样传参可以不考虑顺序，但是数量要一一对应，不能少写
    @include info($bg-color: red, $text-color:gray)
  }

  .box {
    color: red;
    background-color: gray;
  }
  
  .box {
    color: gray;
    background-color: red;
  }

• 有参数且带默认值

  @mixin btn($color:pink, $bg:orange) {
      color: $color;
      background-color: $bg;
  }
  
  .box {
    // 带默认值的参数，可以不填，等于默认值
    @include btn;
  }
  
  .box {
    // 也可以按顺序填，填一个值，对应@mixin的第一个形参
    @include btn(blue)
  }
  
  .box {
    // 也可指定某个值
    @include btn($bg: black)
  }

  .box {
    color: pink;
    background-color: orange;
  }
  
  .box {
    color: blue;
    background-color: orange;
  }
  
  .box {
    color: pink;
    background-color: black;
  }
  

  六、@extend 继承

• SCSS @extend 继承

  在SCSS中，@extend指令用于共享样式规则。使用@extend可以提高CSS代码的DRY（不要重复自己）原则，减少冗余的代码，并使样式表更易于维护。

  以下是一个简单的例子，演示如何使用@extend：

• // 定义一个基本的类 .base-style
  .base-style {
    color: red;
    font-size: 16px;
  }
   
  // 使用 @extend 继承 .base-style 类的样式
  h1 {
    @extend .base-style;
  }
   
  p {
    @extend .base-style;
  }

  编译后的CSS：

  .base-style, h1, p {
  
  color: red;
  
  font-size: 16px;
  
  }

  在这个例子中，h1和p将会共享.base-style的样式。注意，.base-style自身也会出现在编译后的CSS中，作为这些选择器的一部分，这是因为@extend实质上是在修改选择器，而不是创建新的类。如果不希望.base-style类本身出现在CSS中，可以使用嵌套规则来定义样式，如下：

• // 使用嵌套规则来定义样式
  %base-style {
    color: red;
    font-size: 16px;
  }
   
  h1 {
    @extend %base-style;
  }
   
  p {
    @extend %base-style;
  }

  h1, p {
    color: red;
    font-size: 16px;
  }

  这里使用了%base-style（以百分号开头）定义的混合（placeholder）样式，不会在最终的CSS中生成对应的类。

• 七、@import 与 Partials

• 在传统的css中，就是使用@import导入其他css文件的，但是每次都会去发送http请求，浪费性能；
• scss中，优化了@import，我们会先创建一个主要scss文件index.scss，然后根据需要去创建所需的每一部分的scss文件，我们称每一个部分为Partials；这样有益于模块化；
• 创建文件时，以_开头
• 使用@import导入文件时，名字不需要加_
• 当你使用sass监听一个目录是，不会监听Partials文件

八、@if简单判断

$flg: true;

.box {
  @if $flg {
    font-size: 34px;
  }
  border:2px solid red;
}

.box {
  font-size: 34px;
  border: 2px solid red;
}

九、@if复杂判断

$body-color: red;

body {
  @if $body-color == pink {
    background-color: pink;
  } @else if $body-color == red {
    background-color: red;
  } @else {
    background-color: gray;
  }
}

body {
  background-color: red;
}