遥遥领先

sass

https://blog.csdn.net/weixin_44395929/article/details/104724866open in new window

一、sass 是什么

  • css 的预编译语言

       可以把这个文件编译成 css 文件(就是把 css 写成代码)
          => 可以定义变量
          => 可以定义函数
          => 可以有 if 语句 可以有 for 循环语句
  • sass 文件后缀是 .sass 或者 .scss .sass 文件 和 .scss 文件的区别 => 1.scss 文件里面和写 css 的语法基本一致 => 2.sass 文件里面就没有大括号 和 分号, 全部依靠缩进来维持关系 //但是 这两个文件被编译成 css 文件以后是一样的

二、sass 的安装环境

=> 使用 npm 进行 安装 => 安装一个全局工具 -> npm install --global sass -> 简写: npm i -g sass

三、sass 的语法

  1. 一次定义一个变量,可多次使用(和函数的思路有点像) 语法 $名字: 值;(只要这里值改变了,那么在其它位置的引用的这个变量值也会改变)
$color: green;
$fs: 30px;
$border: 10px solid #333;

div {
  width: 100px;
  height: 100px;
  color: $color;
  font-size: $fs;
  border: $border;
}
  1. sass 的注释
// 1. 单行注释, 再编译的时候不进行编译
div {
  // 下面设置的是 元素的 宽度
  width: 100px;
}

/* */
  2. 多行注释
    => 再编译的时候会保留
    => 再使用 gulp 打包的时候不会保留

/*! */
  3. 强力注释
    => 再编译的时候会保留
    => 再使用 gulp 打包的时候也会保留
  1. sass 的条件分支语句 //和自己定义的变量搭配使用
   if 语句
       语法: @if 变量 == 值 { 样式 }
   if else 语句
       语法: @if 变量 == 值 { 样式 } @else { 样式 }
   if else if 语句
       语法: @if 变量 == 值 { 样式 } @else if 变量 == 值 { 样式 }

//代码如下


$type: c;
div {
  width: 100px;
  @if $type == a {
    color: red;
  }
}

p {
  height: 200px;
  @if $type == a {
    color: red;
  } @else {
    color: green;
  }
}

h1 {
  width: 100px;
  height: 100px;
  @if $type == a {
    color: red;
  } @else if $type == b {
    color: green;
  } @else if $type == c {
    color: skyblue;
  }
}
  1. sass 的循环语句
  for 循环
    => 依赖变量使用
    => 语法: 有两种
      1. @for 变量 from 数字 to 数字 { 代码 }
        -> 包含开始数字, 不包含结束数字
        -> 在循环里面使用变量
          => 再选择器中使用 #{变量}
          => 再样式里面使用 变量
      2. @for 变量 from 数字 through 数字 { 代码 }
        -> 包含结束数字
        -> 在循环里面使用变量
          => 再选择器中使用 #{变量}
          => 再样式里面使用 变量

  each 循环
    => 依赖一个 sass 数组使用
    => 写一个 sass 数组
      -> 语法: 变量: (), (), (), (), ...
    => each 的使用
      -> 语法: @each 变量1, 变量2, ... in 数组
1234567891011121314151617181920

//代码如下

/* each 循环 */
// 准备一个数组
//   每一个小括号就是数组里面的每一项
// $arr: (1, 5px, red), (2, 6px, green), (3, 9px, skyblue);

// // 写一个循环
// @each $index, $fs, $color in $arr {
//   li:nth-child(#{$index}) {
//     font-size: $fs;
//     color: $color;
//   }
// }

$colorArr: (1, red), (2, green), (3, skyblue), (4, purple), (5, orange), (6, yellow);

li {
  width: 100px;
  height: 100px;
}

@each $index, $color in $colorArr {
  li:nth-child(#{$index}) {
    background-color: $color;
  }
}

/* for 循环 */
// 这个循环的数字变化是 1 2, 不包含 3
// @for $i from 1 to 3 {
//   li:nth-child(#{$i}) {
//     width: 10px*$i;
//   }
// }

// 这个循环的数字变化是 1 2 3
// @for $i from 1 through 3 {
//   li:nth-child(#{$i}) {
//     height: 10px*$i;
//   }
// }

sass 实现主题切换

.item {
  width: 100px;
}

混合

@mixin flexCenter {
}

.header {
  @include flexCenter;
}

@mixin flex($layout) {
  justify-content: $layout;
}
.nav {
  @include flex(center);
  @include flex(start);
}
//

@mixin respon-to($breakname) {
  @if $breakname == "phone" {
    @media (min-width: 320px) and (max-width: 480px) {
      height: 50px;
      .header2 {
        height: 100px;
      }
      @content; // 插槽
    }
  } @else if $breakname == "pad" {
    @media (min-width: 481px) and (max-width: 768px) {
      height: 60px;
      @content; // 插槽
    }
  }
}

.header {
  @include respon-to("phone") {
    width: 100px;
  }
}

$breakpoints:(
  'phone':(
    320px,
    480px,
  ),
  'pad':(
    320px,
    480px,
  )
)
@mixin respond-to($breakname) {
  $bp: map-get($breakpoints, $breakname);
  $if type-of($bp) =="list" {
    $min: nth($bp, 1);
    $max: nth($bp, 2);
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  }
}

主题切换

html[data-theme="light"] .item {
  background: #fff;
  color: #000;
}

html[data-theme="dark"] .item {
  background: #000;
  color: #fff;
}

@mixin useTheme() {
  html[data-theme="light"] & {
    background: #fff;
    color: #000;
  }
  html[data-theme="dark"] & {
    background: #000;
    color: #fff;
  }
}
.item {
  @include useTheme;
}

@mixin useTheme() {
  @each $key, $value in $themes {
    // $curTheme:$key !global;
    html[data-theme="#{$key}"] & {
      background: #fff;
      color: #000;
      @content;
    }
  }
}

sass 模块化

@use "./var.scss";
.foo {
  color: var.$color;
}

@use "./var.scss" as b;
.foo {
  color: b.$color;
}

私有得

$_n: 6;

sass 简化媒体查询

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header {
  display: flex;
  width: 100%;
  @include flexCenter;
}

@mixin flex($layout) {
  display: flex;
  justify-content: $layout;
  align-items: $layout;
}

.nav {
  @include flex(center);
}

@mixin respond-to($breakname) {
  @if $breakname == "phone" {
    @media (min-width: 320px) and (max-width: 480px) {
      height: 50px;
    }
  } @else if $breakname == "pad" {
    @media (min-width: 481px) and (max-width: 768px) {
      height: 60px;
    }
  }
}
.header {
  display: flex;
  width: 100%;
  @include respond-to("phone");
  @include respond-to("pad");
}

.header {
  display: flex;
  width: 100%;
}

@media (min-width: 320px) and (max-width: 480px) {
  .header {
    height: 50px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .header {
    height: 60px;
  }
}

@function getVar($key) {
  $themeMap: map-get($themes, $curTheme);
  @return map-get($themeMap, $key);
}

. {
  background: getVar("bgColor");
}
Last Updated:
Contributors: 刘荣杰