Scss小结_喵巨人笔记

简介

整理了scss使用过程中，常用的语法等

安装

sass解析需要使用模块：sass；

mkdir scss
npm init -y
npm i sass

新建style.scss文件

touch style.scss

修改package.json文件，添加build命令

{
  // ...
  "scripts": {
    // ...
    "build": "scss style.scss resStyle.css"
  },
  // ...
}

修改的style.scss文件，需要编译时，运行npm run build

引用外部文件 @import

@import "@/themes/variables.scss";
@import "./colors.scss";
@import "~taro-ui/dist/style/components/icon.scss";

变量

使用$声明一个变量
重复赋值时，后赋值的会替换先赋值的
可以在变量后面加!default兜底。如果该变量之前没有赋值过，会赋予新的值
如果变量需要镶嵌到字符串中，需要写在#{}中
示例代码

$primary-color: #ffaf53;
$primary-color: #207BE4;           // 前面有定义的$primary-color，会覆盖，使用新值 #207BE4
$primary-color: #00A588 !default;  // 前面有定义的$primary-color，不覆盖，继续使用原来的值
$position: top;

.test {
  color: $primary-color;    // 变量使用
  .border_#{$position} {    // 字符串中，通过 #{} 使用变量
    border-#{$position}: 1px solid $primary-color;
  }
  &::after {                // 嵌套代码中，使用 & 引用父元素
    content: '*';
    color: green;
  }
}

编译后代码

.test {
  color: #207BE4;
}
.test .border_top {
  border-top: 1px solid #207BE4;
}
.test::after {
  content: "*";
  color: green;
}

Maps

Maps可视为键值对的集合

map-get函数用于查找键值，
map-merge函数用于map和新加的键值融合，
@each命令可添加样式到一个map中的每个键值对。

Maps可用于任何Lists可用的地方，在List函数中 Map会被自动转换为List

$theme-mutual: (
  primaryColor: #ffaf53,
  bgColor: #f4f4f4,
  fontSize: 32px,
  borderRadius: 4px,
);

@function getThemed($theme, $key) {
  @return map-get($theme, $key);
}

@mixin commonTheme($theme) {
  .test {
    color: getThemed($theme, primaryColor);
  }
}

.mutual {
  @include commonTheme($theme-mutual);
}

// 编译后
// .mutual .test {
//   color: #ffaf53;
// }

运算符

所有数据类型均支持相等运算 == 或 !=

数字支持加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
关系运算 <, >, <=, >= 也可用于数字运算

布尔型支持 and or 以及 not 运算。

+ 可用于连接字符串

语句

条件语句 @if

$position: top;

.test {
  position: absolute;
  left: 0;
  right: 0;
  @if $position=="top" {
    top: 0;
  } @else if $position=="bottom" {
    bottom: 0;
  } @else {
    top: 0;
    bottom: 0;
  }

  $index: 5;
  @if $index > 3 {
    color: red;
  } @else {
    color: green;
  }
}

循环语句 @for

@for $i from <start> through <end>    // through: 包括 end 这个数
@for $i from <start> to <end>         // to: 不包括 end 这个数
// <start> 和 <end> 必须是整数值

示例代码

@for $i from 1 to 5 {
  .hr_#{$i * 5} {
    display: block;
    width: 100%;
    height: ($i * 5) + px;
    clear: both;
  }
}

循环语句 @each

@function addUnit($v, $unit: px) {
  @return $v+$unit;
}

$widthList: 24, 50, 100;
@each $w in $widthList {
  .w_#{$w} {
    width: addUnit($w, px);
  }

  .h_#{$w} {
    height: addUnit($w, px);
  }

  .wh_#{$w} {
    width: addUnit($w, px);
    height: addUnit($w, px);
  }

  @each $h in $widthList {
    @if $w != $h {
      .wh_#{$w}_#{$h} {
        width: addUnit($w, px);
        height: addUnit($h, px);
      }
    }
  }
}

循环语句 @while

$i: 1;
@while $i < 6 {
  .hr_#{$i * 5} {
    display: block;
    width: 100%;
    height: $i * 5 + px;
    clear: both;
  }
  $i: $i + 2;
}

函数 @function

// 定义方法，可以设置默认值 $unit: px
@function addUnit($v, $unit: px) {
  @return $v+$unit;
}

$width: 50;
$borderRadius: 4;
.test {
  width: addUnit($width, px);
  height: addUnit($width);        // 有默认值的可以省略
  border-radius: addUnit($unit: px, $v: $borderRadius); // 可以指定传入的变量，这时候顺序无所谓了
}

继承 @extend

SCSS允许一个选择器，继承另一个选择器。使用@extend

.test {
  color: red;
}
.test2 {
  width: 100px;
  height: 200px;
  @extend .test;
}

// 编译后
// .test, .test2 {
//   color: red;
// }
// .test2 {
//   width: 100px;
//   height: 200px;
// }

.test {
  color: red;
  .content {
    color: green;
  }
}
.test2 {
  width: 100px;
  height: 200px;
  @extend .content;
}

// 编译后
// .test {
//   color: red;
// }
// .test .content, .test .test2 {
//   color: green;
// }
// .test2 {
//   width: 100px;
//   height: 200px;
// }

混入 @mixin、@include

使用@mixin定义代码块，使用@include调用mixin

@mixin ellipsis($num: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
}

.test {
  color: green;
  @include ellipsis(2);
}

SASS vs SCSS

sass就是css的预处理器，scss是sass3版本中引入的新语法特性。

简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。
语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号

sass代码如下

.test-wrapper
  width: 100px;
  height: 100px;
  .test
    color: red;

scss代码如下

.test-wrapper {
  width: 100px;
  height: 100px;
  .test {
    color: red;
  }
}

Scss小结

简介

安装