SASS——自定义我的css样式

（ps：grid布局和extend懒得写了）

准备工作

  • npm install gulp gulp-sass sass --save-dev ，进行基本配置的安装

  • npm install -g gulp，如果下面输入gulp命令无法识别请全局安装

  • 在项目中创建gulpfile.js文件，在文件中配置如下

    • 这些配置里面资源使用*代表全部编译，因为把scss文件都放置到shinobi文件夹下，所以做一些基本修改，/**表示全部子文件

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      const { src, dest, watch, series } = require('gulp');
      const sass = require('gulp-sass')(require('sass'));

      function buildStyles() {
        return src('shinobi/**/*.scss')
          .pipe(sass())
          .pipe(dest('css'))
      }

      function watchTask() {
        watch(['shinobi/**/*.scss'], buildStyles)
      }

      exports.default = series(buildStyles, watchTask)

  • 之后创建index.scss在里面编写样式即可

变量使用

创建一个_variables.scss文件用于保存样式变量，前面的_是为了不被编译为css文件，下面放置一个简单的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
// theme colors
$primary: #326dee;
$secondary: #1ac888;
$error: #d32752;
$info: #f6c31c;

// spacing
$base-padding: 0.75rem;
$base-margin: 0.75rem;

// borders
$base-border-thickness: 1px;
$base-border-radius: 20px;

基础环境

创建一个_base.scss文件用于放置基础的reset styles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// import google font
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* reset styles */
* {
  color: inherit;
  margin: 0;
}

body {
  font-family: Poppins;
}

ul {
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
}

hr {
  border: 0;
  border-top: 1px dotted #efefef;
}

img {
  max-width: 100%;
}

工程准备

按照教程里的内容，创建了一个文件夹shinobi用来放置scss文件。

在index.scss文件中做如下基本配置（需要就引入，需要注意顺序）：

1
2
3
4
5
6
7
8
9
10
11
// varibales & functions
@import 'variables';

// base & layout
@import 'base';

// colors

// components (button, card, navbar)

// utilities (margin, padding, opacity)

数学使用

使用变量和数学运算可以在修改时更加方便，简单举个例子

1
2
3
4
5
// font sizes
$base-font-size: 1rem;
$font-size-sm: $base-font-size * 0.75;
$font-size-lg: $base-font-size * 1.5;
$font-size-xl: $base-font-size * 2;

在组件中使用时

1
2
3
4
5
@use 'sass:math';

.card{
    border-radius: math.div($base-font-size, 4);
}

打印查错

使用语句进行检查

1
@debug ...

map函数简单示例

在_variables.scss文件中创建

1
2
3
4
5
6
7
// color palette
$colors: (
  "primary": $primary,
  "secondary": $secondary,
  "blue": #1919e6,
  "red": #e61919,
);

在_colors.scss中进行map的简单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@each $key, $val in $colors {
  .text-#{$key} {
    color: $val;
  }
  .bg-#{$key} {
    background-color: $val;
  }

  // light variations
  @for $i from 1 through 9{
    .text-#{$key}-light-#{$i} {
      color: mix(white, $val, $i * 10%);
    }
    .bg-#{$key}-light-#{$i} {
      background-color: mix(white, $val, $i * 10%);
    }
  }
}

mixin函数使用示例

首先提一点小知识，我们可以使用@if``@else来作判断，可以使用&:来添加属性。mixin函数可以传递参数，这里也设置了默认参数，其余的内容如代码所示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@mixin btn($bg-color: #e2e2e2) {
  // public
  background-color: $bg-color;
}

@each $key, $val in $colors {
  .btn-#{$key} {
    @include btn($val);
    // extra
    &:hover{
      
    }
  }
  .btn-outlined-#{$key} {
    @include btn(#fff);
    // extraa
  }
}

function函数使用示例

同样创建一个_functions.scss文件，引入

1
2
3
4
5
@function light-comp($colors) {
  $complement: complement($color);
  $light-complement: lighten($complement, 30%);
  @return $light-complement;
}

utilities使用示例

同样创建文件引入，感觉和tailwindcss有点像hh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@use 'sass:math';

$utilities: (
  "padding": (
    "prefix": "p",
    "values": (
      "0": 0,
      "1": $base-padding,
      "2": $base-padding * 2,
    )
  )
);

@each $property, $map in $utilities {
  $prefix: map-get($map, "prefix");
  $values: map-get($map, "values");

  @each $k, $v in $values {
    @if($k == "default") {
      .#{$prefix} {
        #{$property}: $v;
      }
    }else {
      .#{$prefix}-#{$k}{
        #{$property}: $v;
      }
    }
  }
}

breakpoints使用示例

根据不同大小进行设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$breakpoints: (
  "xs": 0,
  "sm": 480px,
  "md": 720px,
  "lg": 960px,
  "xl": 1200px,
);

@mixin xs{
  @media (min-width: map-get($breakpoints, "xs")){
    @content;
  }
}

// ...

@mixin brealpoint($bp: 0) {
  @media (min-width: $bp) {
    @content;
  }
}

减少生成的css代码

安装npm install gulp-purgecss --save-dev

在gulpfile.js文件中引入

1
2
3
const purgecss = require('gulp-purgecss');
//在下面补上
.pipe(purgecss({content: []}))

后记

懒了，感觉还是得多写css才能做好自己的css样式QAQ有缘再见，说不定哪天能写出通用的css放到github上。