CSS - Sass

学习博客：Sass入门

Sass

CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间，且易于维护。引入合理的样式复用机制：变量、混入、选择器、继承、内置函数。

安装

// vue-cli2 中需要手动安装，vue-cli3 在初始化项目时可以选配安装
npm install node-sass --save-dev
npm install sass-loader@7.3.1 --save-dev

sass-loader最新版本8.0会报错，降级到7.3可以解决

简写形式

// -D 代表 --save-dev，开发时的依赖，安装的模块是开发时使用
// -S 代表 --save，运行时的依赖，安装的发布时使用
npm i node-sass sass-loader@7.3.1 -D

安装node-sass依赖python2.x环境，需要先安装python再配置环境变量

参考博客：node-sass 安装失败的各种坑、Error: Can't find Python executable "python", you can set the PYTHON env variable.解决办法

vue-cli项目使用

建立src/common/style文件夹存放.scss文件，建立base.scss

变量

// 变量声明，以$开头
$color1: red;
$color2: blue;
$fs-small: 14px;
$fs-middle: 16px;

@import 引入

在home.vue在引入base.scss，注意分号不能省略

<style scoped lang="scss">
@import '@/common/style/base.scss';

// 使用变量
.text {
 color: $color1;
 font-size: $font-size-small;
}
</style>

嵌套

.title {
  .text {
    color: $color1;
  }
  &:after {
    // 等价于 .title:after
  }
  &.title-text {
    // 声明<div class="title title-text">中title-text的样式
  }
}

@mixin @include 混入

@import是引入整个样式文件，混入是在一个样式片段中插入另一个样式片段

在src/common/style文件夹下建立mixins.scss

// 加载2、3倍图，可传入变量
@mixin bg-image ($url) {
  background-image: url($url + '@2x.png');
  background-size: 100%;
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + '@3x.png');
    background-size: 100%;
  }
}

// 1px边框，也可以设置默认值，插值#{}
@mixin border-1px ($color: #000, $position: bottom) {
  position: relative;
  &:after {
    display: block;
    content: '';
    position: absolute; 
    #{$position}: 0; // 默认为bottom。可传入top
    left: 0;
    width: 100%; 
    height: 1px;
    background: $color; 
    transform: scaleY(0.5); 
  }
}

// 单行溢出省略
@mixin textoverflow {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行溢出省略
@mixin textoverflows($line) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

可变参数混入

有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。例如，用于创建盒子阴影（box-shadow）的一个混入（mixin）可以采取任何数量的 box-shadow 作为参数

@mixin box-shadow ($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

在home.vue在引入mixins.scss，注意分号不能省略

<style scoped lang="scss">
@import '@/common/style/base.scss';
@import '@/common/style/mixins.scss';

// 使用变量
.text {
 color: $color1;
 font-size: $font-size-small;
}

// 使用mixin，@include插入代码片段。支持同时插入多个mixin
.icon-logo {
  width: 16px;
  height: 16px;
  @include bg-image('icon_sy_xq');
  @include border-1px(#f1f1f1);
}
</style>

@extend 继承

从一个class中继承所有样式代码，如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

.border-base {
  margin: 20px 0;
  padding-bottom: 10px;
  color: $color2;
  font-size: $fs-middle;
}

.border-1 {
  @extend .border-base;
  border-bottom: 1px solid #000;
}

.border-2 {
  @extend .border-base;
  @include border-1px(blue)
}

<div class="border-1"><i class="icon-border"></i>1px像素的线</div>
<div class="border-2"><i class="icon-border"></i>1px像素的线</div>

函数

使用场景：px转rem

@function px2rem ($px) {
  @return ($px / 100) + rem;
}

// 使用时需要先引入函数所在文件
.search-box {
  width: px2rem(300);
  height: px2rem(150);
}

与Less的比较

大同小异，日常开发经常使用到的就是变量、嵌套、混入。Sass在混入需要声明@mixin、@include，在编写样式时很显得更规范、一目了然；而Less混入并不需要声明，直接引入使用。