[Day 07] Sass - Project Structure

Project Structure

这篇文章我们来建立我们Sass专案的架构~

一般Sass专案内都会有一个主要的.scss档案，其用来负责将所有有用到的.scss import进来，而这次在我们专案内就是main.scss担任这个角色，所以我们先将之前在main.scss练习的样式全部清除，并贴上以下程序码:

// main.scss

// variables & functions
// 常用到的变数和函式
@import 'variables'; // 变数
@import 'functions'; // 函式

// base & layout
// 元素基本样式的定义、Media query、gird等排版样式
@import 'base'; // 基本样式像是css reset或是字型
@import 'breakpoints'; // RWD断点
@import 'grid'; // 网格排版系统

// colors
// 颜色
@import "colors";

// components (button, card, navbar etc)
// 组件
@import 'components/card'; // 卡片
@import 'components/button'; // 按钮

// utilities (margin, padding, opacity, etc)
// 常用工具类的class
@import 'utilities';

这就是我们这次的专案架构，可以看到将比较常用到以及能共用的都提出来，这样未来在使用上就会比较方便，不用一直重复写~

既然架构规划好了，我们就来将档案建立起来吧!

接下来的几天目标就是将这些档案完成，我会在边讲解Sass观念时顺便将这些档案一起完成，最後文章结束後大家都可以有一套自己的CSS Libray，切版的速度一定也会加快很多!

今天我们就先来将_base.scss完成
_base.scss内我放的是一些基本元素样式的定义、元素预设的样式(CSS Reset)、字型，这边就可以依个人使用习惯去做定义，那这边我就写上我比较习惯的定义和字型:

// _base.scss

// 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');

*, *:before, *:after {
  box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul, li {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: Poppins;
}

a {
  text-decoration: none;
}

ol, ul {
  list-style: none;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

那今天的文章就到这边结束了，专案架构的话每个人都可以依照个人习惯去做调整，这次仅提供一个简单的架构供大家参考
最後附上目前使用率比较高的CSS Library的Sass架构给大家参考，相信大家都可以在参考的过程中规划出属於自己的架构!

Bootstrap
Foundation
Bulma