css --- 使用scss生成常用的基本css样式

"工具样式"的概念和 SASS(SCSS)

在webpack中使用sass

安装sass和sass-loader

$ npm i sass sass-loader

由于使用了脚手架,安装完毕后重启前端即可

样式重置

其实就是样式的初始化

// reset* {box-sizing: border-box; // 以边框为准. css3盒模型outline: none; // 不需要高亮: 有时候在页面中使用tab切换,a标签可能会出现高亮
}html {font-size: 13px; // 定义网址的基础字体大小 1rem = 13px
}body {margin: 0;font-family: Arial, Helvetica, sans-serif;line-height: 1.2em;background: #f1f1f1;
}a {color: #999
}

网站色彩和字体定义(colors, text)

生成网站的色调

首先定义基色掉

// colors
$colors: ("primary": #db9e3f,"white": #fff,"light":#f9f9f9,"grey": #999,"dark-1": #343440,"dark": #222,"black": #000,
);

使用网站的色调 + scss 生成网站的文字颜色和背景颜色

// $colors是上面定义的6种颜色
@each $colorKey, $color in $colors{.text-#{$colorKey}{color: $color}.bg-#{$colorKey} {background: $color}
}

以上生成的等价于下面的css(部分)

.text-white{color: #fff
}
.text-light{color: #f9f9f9
}
.text-grey: {color: #999
}

生成字体大小

假设网站主要有 10px、 12px、 13px、 14px和16px。我们想生成网站的主要字体尺寸(vscode中,下载插件 px to rem, 然后点击设置, 输入px to rem, 将Px-to-rem: Px-per-rem设为13).

之后写如下函数

// font size: 10px 12px 13px 14px 16px
$font-sizes: (xs: 10px, sm: 12px, md: 13px, lg: 14px, xl: 16px);

选中以上,按alt + z, 以上代码就变为如下

$font-sizes: (xs: 0.7692rem, sm: 0.9231rem, md: 1rem, lg: 1.0769rem, xl: 1.2308rem);

@each $sizeKey, $size in $font-sizes{.fs-#{$sizeKey}{font-size: $size}
}

编译完后,会生成以下的css

.fs-xs {font-size: 0.7692rem
}
.fs-sm {font-size: 0.9231rem
}
.fs-md {font-size: 1rem
}
.fs-lg {font-size: 1.0769rem
}
.fs-xl {font-size: 1.2308rem
}

生成文本的左中右对齐

@each $val in (left, center, right) {.text-#{$val}{text-align: $val}
}

以上生成等价于下面

.text-left{text-align: left
}
.text-center{text-align: center
}
.text-right {text-align: right
}

通用flex布局样式定义

flex布局

// 主轴是水平方向
.d-flex{display: flex;
}
// 主轴是竖直方向
.flex-column{flex-direction: column;
}
.flex-1 {flex: 1
}
.flex-grow-1 {flex-grow: 1
}

主轴上面的排序方式

$flex-jc:(start: flex-start,end: flex-end,center: flex-center,between: space-between,around: space-around
);
// 主轴上面的元素排序方式
@each $key, $value in $flex-jc{.jc-#{$key} {justify-content: $value}
}
// 侧轴上面元素的排序方式
$flex-ai:(start: flex-start,end: flex-end,center: center,stretch: stretch
);@each $key, $value in $flex-ai{.ai-#{$key} {align-items: $value}
}

常用边距(margin,padding)

常用的边距属性,参考bootstrap里面类名的定义,大致有下面几种:

.m-0 {margin: 0rem;
}
.mx-0 {margin-left: 0rem;margin-right: 0rem
}
.mt-0 {margin-top: 0rem;
}

下面使用工具样式生成常用边距

首先定义边距的类型: 主要有margin和padding

$spacing-types: (m: margin, p: padding)

定义边距的方向: top、right、bottom、left

$spacing-directions: (t: top, r: right, b: bottom, l: left)

定义边距类的基础大小

$spacing-base-size: 1rem;

定义边距类的尺寸

$spacing-sizes: (0:0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3)

之后是使用定义的变量,动态生成常用的边距类(css)

@each $typeKey, $type in $spacing-types{// .m-1@each $sizeKey, $size in $spacing-sizes{.#{$typeKey}-#{$sizeKey} {#{$type}: $size * $spacing-base-size    }}@each $sizeKey, $size in $spacing-sizes{// .mx-0,  .mx-1,  .mx-2 ....#{typeKey}x-#{$sizeKey} {.#{$type}-left: $size * $spacing-base-size;.#{$type}-right: $size * $spacing-base-size;}// .my-0,  .my-1,   .my-2  ....#{typeKey}y-#{$sizeKey} {.#{$type}-top: $size * $spacing-base-size; .#{$type}-bottom: $size * $spacing-base-size;}}// .mt-1, .mr-1@each $directionKey, $direction in $spacing-directions{@each $sizeKey, $size in $spacing-sizes{// .mt-1{margin-top: 0.25rem}.#{$typeKey}#{$directionKey}-#{$sizeKey}{#{$type}-#{$direction}: $size * $spacing-base-size;}}}
}

css --- 使用scss生成常用的基本css样式相关推荐

Html5 css文本属性,html5常用文本标签、CSS文本外观属性，你了解多少？
一.HTML5中常用的文本标签 1.标题标签 (1)定义及用法: HTML中,定义了6级标题,分别为h1. h2.h3.h4. h5. h6,每级标题的字体大小依次递减,1级标题字号最大,6级标题字号 ...
vue组件中通过css或scss修改三方组建的style样式
层叠样式要修改三方ui组件的样式必须先了解css样式的层叠优先级,比较简单来说, !important > 行style > id选择 > 多class选择 > 元素类型选择 ...
css div 段落,一些常用的DIV+CSS的网页布局所用的代码段
单行一列以下是引用片段: body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; m ...
2021-11-15 入门前端VScode必装的常用插件, HTML+CSS常用属性速记.
Html + Css 学习一.VSCode常用 //1. VScode常用快捷键 * 新建文件:ctrl + N * 切换自动换行:alt + Z * 复制当前行:ctrl + C:ctrl + V ...
常用的一些 CSS 技巧二 — 选择器（伪类与伪元素）
你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧一常用的一些 CSS 技巧三 CSS 重置盒模型 *, *::before, *::after {box-sizing: border- ...
CSS入门六、常用技巧
零.文章目录 CSS入门六.常用技巧 1.精灵图 (1)为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大 ...
css文件如何设置scss,在SCSS文件中导入常规CSS文件？
回答(14) 3 years ago 截至撰写本文时,看起来这是未实现的: https://github.com/sass/sass/issues/193 对于libsass(C / C实现),导入对 ...
Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
在SCSS文件中导入常规CSS文件？
本文翻译自:Import regular CSS file in SCSS file? Is there anyway to import a regular CSS file with Sass's ...