"工具樣式"的概念和 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样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。