技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-2.sass工具的变量

简介: 上篇文章我们学习了如何在node + vue中安装sass工具,并对 嵌套 (nested rules) 功能做出了演示,本篇文章我们对sass工具的另一大功能 变量(variables) 进行学习和使用。

上篇文章我们学习了如何在node + vue中安装sass工具,并对 嵌套 (nested rules) 功能做出了演示,本篇文章我们对sass工具的另一大功能 变量(variables) 进行学习和使用。

1.为什么使用变量(variables)功能

设计师在整个页面的视觉设计工作中,会根据网站特性、产品功能、企业文化等特点对页面进行一个色彩的基础定位,每个成功的网站设计都会有其确定的主色、辅助色和点缀色等。同样的,一个网站中的字体同样影响着一个网站的整体视觉。
当我们在全局对一个颜色、字体进行变量的定义,并且在页面中使用该变量颜色后,在后期颜色、字体的调整中会变得方便且严谨,不需要在每个页面查找需要修改的颜色和字体,也不用担心少改了哪个部分。

2.定义颜色变量在这里插入图片描述

通过键值对形式对颜色变量进行定义,格式与数组相同,但语法符号有差异。其中$color中的变量名可以不加引号,由于黑色白色等与后面定义的颜色有冲突容易引起错误,所以一般都用引号引起避免键值对与定义颜色字段的冲突(如 white: white, 就容易引发冲突,所以我们常用 "white": white, 来定义)。

3.使用颜色变量

颜色我们已经定义好了,该如何使用呢?并不是直接在前端组件中引入这个sass变量,而是将我们定义的变量进行遍历,其逻辑是用少量的代码生成大量我们需要的样式。

// colors常用颜色
$colors: (
    // 主色
    "primary": #a80506,
    // 辅色
    "auxiliary": #054ea8,
    // 点缀色
    "Embellishment":#db9e3f,

    // 白色
    "white": #fff,
    // 黑色
    "black": #000,
    // 灰色
    "gray": #777,
);
// 从$colors变量中找到 $colorKey 键值,再找到 $color 色值,进行遍历。
// 在class名中使用变量需要用 "#{}" 方法,而色值中使用直接使用变量即可。
@each $colorKey, $color in $colors {
    // 文字颜色
    .text-#{$colorKey} {
        color: $color;
    }
    // 背景颜色
    .bg-#{$colorKey} {
        background: $color;
    }
}
AI 代码解读

此时我们进入web端,查看一下生成的颜色。

cd web 
npm run serve 
AI 代码解读

在这里插入图片描述
此时,我们定义的颜色就以类名的形式生成了css代码,我们可以随时使用。

4.使用直接量定义类名

同样使用遍历方法生成css类名,但某些时候我们没有必要为了几个值定义一个变量,例如文本的左中右对其
普通css中,我们需要编写css:

text-left{
    text-align: left;
}
text-right{
    text-align: right;
}
text-center{
    text-align: center;
}
AI 代码解读

如果我们使用sass中的遍历方法:

@each $var in (left, center, right) {
    .text-#{$var}{
        text-align: $var;
    }
}
AI 代码解读

同样可以生成类名:
在这里插入图片描述
同样的方法,我们还可以定义字体大小、粗细等样式。

// 使用px to rem插件设置默认字体大小为13px
// 设置基础字体大小
$base-font-size: 1rem;
// 根据基础字体大小设置字体大小
$font-size: (
    // 使用px to rem插件,alt + z 转化px到rem
    // xs为10px
    xs: 0.7692,
    // sm为12px
    sm: 0.9231,
    // md为13px
    md: 1,
    // lg为14px
    lg: 1.0769,
    // xl为16px
    xl: 1.2308,
);
@each $sizeKey, $size in $font-size {
    // 文字颜色
    .fs-#{$sizeKey} {
        // 尺寸比例 * 基础字体大小
        font-size: $size * $base-font-size;
    }
}
AI 代码解读

在这里插入图片描述

px是相对于 浏览器和显示屏分辨率进行大小的定义,而rem是针对 HTML根元素进行大小比例的定义。

这就是sass的 变量 (variables) 功能,掌握了这个方法,我们应该就掌握做出像bootstrap, layui等常见大型css框架的类名定义方法。

5.参考bootstrap制作间距类名
// 间距spacing
// bootstrap中,mt-1 -> margin-top: 1rem, pb-2 -> padding-bottom: 2rem

// 类型
$spacing-types: (m: margin, p: padding);
// 方向
$spacing-directions: (t: top, r: right, b: bottom, l:left);
// 尺寸
$base-spacing-size: 1rem; // 基础尺寸
$spacing-sizes: (0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3); // 基础尺寸为准的倍数
@each $typeKey, $type in $spacing-types {
    @each $directionKey, $direction in $spacing-directions {
        @each $sizeKey, $size in $spacing-sizes {
            // 样版: .mt-1 { margin-top: 0.25rem }
            .#{$typeKey}#{$directionKey}-#{$sizeKey} {
                #{$type}-#{$direction}: $size * $base-spacing-size;
            }
        }
    }
}
AI 代码解读

在这里插入图片描述
在这里插入图片描述
除了margin-top: 1rem;等以外还有margin: 1rem;等:

// m-1, p-1等只需要嵌套类型变量$spacing-directions和尺寸变量$spacing-sizes
@each $typeKey, $type in $spacing-types {
    @each $sizeKey, $size in $spacing-sizes {
        // 样版: .mt-1 { margin-top: 0.25rem }
        .#{$typeKey}-#{$sizeKey} {
            #{$type}: $size * $base-spacing-size;
        }
    }
}
AI 代码解读

在这里插入图片描述
以此类推,还有上下边距(margin-top + margin- bottom)和左右边距(margin-left + margin-right),分别为mx-0,px-0和my-0,py-0。

// 水平、垂直方向边距
@each $typeKey, $type in $spacing-types {
    @each $sizeKey, $size in $spacing-sizes {
        // mx-1,px-1
        .#{$typeKey}x-#{$sizeKey} {
            #{$type}-left: $size * $base-spacing-size;
            #{$type}-right: $size * $base-spacing-size;
        }
        // my-1,py-1
        .#{$typeKey}y-#{$sizeKey} {
            #{$type}-top: $size * $base-spacing-size;
            #{$type}-bottom: $size * $base-spacing-size;
        }
    }
}
AI 代码解读

在这里插入图片描述
如此,就可以实现像bootstrap中的类名样式。

相关文章
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
121 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
91 23
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
Node.js开发
Node.js开发
99 13
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
417 14
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
147 6
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
162 1
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
292 1

热门文章

最新文章