@import导入css样式及scss变量用法与static目录

于 2024-09-09 17:03:49 发布
阅读量638 收藏 7
点赞数 14
文章标签： css scss 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ou050719/article/details/142062289
版权

App.vue

app.vue里面也可以写样式,在这里面写的样式是全局样式,也就是说会作用与这个项目所有的页面,但是app.vue的权限很低,只有别的页面定义了这个样式就会覆盖掉app.vue

Css样式

为什么使用CSS：
CSS（层叠样式表）是一种用来描述网页上元素样式的技术。使用CSS的主要原因包括以下几点：

①有效的传递页面信息
②使用CSS美化网页使网页漂亮、美观、吸引用户
③可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
④具有良好的用户体验
CSS中的样式使用
字体样式：
一、字体样式的概念及使用
①font-family：设置字体类型/举例：font-family："楷书"
②font-size：设置字体大小(单位：px(像素)、em、rem、cm、mm、pt、pc)/举例：font-size：12px
③font-style：设置字体风格(normal(默认标准)、italic(倾斜)和oblique(倾斜))/举例：font-style：italic
④font-weight：设置字体的粗细
normal：默认值,定义标准字体
bold：粗体字体
bolder：更粗的字体
lighter：更细的字体
100、200……900(步长100)：定义由细到粗的字体,400等同于normal,700等同于bold
举例：font-weight：bold
⑤foot：在一个声明中设置所有字体属性
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/Jin_Xiang123/article/details/135023559

SCSS

可以使用自己定义的或者是项目里面自带的

项目里面自带的

使用:

比如颜色,这个uni.scss里面自己定义了一些样式

新建一个页面,定义一个盒子大小都是200px,然后定义背景颜色直接使用nuiscss里面的已经写好的

效果图:

自己定义的

自己可以在uni.scss里面自己定义个样式如下

使用和上面的一样

暮夜明
关注
SCSS的混合器、占位符、继承
weixin_70815247的博客
07-25 2268
当你的代码中需要用到大段大段重用样式代码的时候，可以通过SCSS的混合器实现大段样式的重用。混合器使用@mixin定义。使用混合器利用混合器，可以很容易地在样式表的不同地方共享样式。如果发现自己在不停地重复一段样式，那就应该把这段代码构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说就是一组放在一起有意义的属性。如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体)，那么使用变量来统一处理这种情况是非常不错的选择。...
详解scss的继承、占位符和混合宏
weixin_33775572的博客
06-02 615
1、继承和占位符 两者都是通过@extend来引用。 1.1 继承 一个已经存在的css样式类，可以被其他样式类继承。 例如，实现以下css样式： .btn, .btn--primary, .btn--info { border: 1px solid blue; } .btn--primary { color: black; } .btn--info { color: gr...
【SCSS入门】8、继承（Inheritance）
weixin_52938153的博客
06-08 944
Sass（Syntactically Awesome Stylesheets）是一种强大的CSS预处理器，它通过引入变量、嵌套、混合（mixins）、继承和函数等高级特性，显著增强了CSS的功能和灵活性。Sass允许你使用更简洁和模块化的语法来编写样式表，从而提高代码的可读性和可维护性。变量使得颜色、字体和其他值可以重复使用，嵌套规则让样式结构更加清晰，混合可以创建可重用的代码块，继承和函数则提供了更高级的样式控制。最终，Sass代码会被编译成标准的CSS，使其兼容所有浏览器。这种预处理器特别适用于大型项目
Scss-混入和继承且如何正确使用
weixin_43856422的博客
11-15 1548
是版本当中引入的新语法特性，完全兼容CSS3的同时继承了强大的动态功能。混入（）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用，Scss目前使用指令来进行混合操作。上面的代码建立了一个名为的Mixin，并传递了一个变量$radius作为参数，然后在后续代码中通过继承是Scss中非常重要的一个特性，可以通过@extend上面代码将.message中的CSS属性应用到了.success、.error、
scss中的样式复用：继承；占位符；混合宏
努力学习前端的阿猪
01-10 4405
文章目录一、@extend-待更新学习 一、@extend-待更新学习 .title { color : #f5f5f5; font-size:57px; font-family: PingFangSC; } .cusTitle1 { width : 100px; @extend .title; } .cusTitle2 { width : 200px; @extend .title; }
在 vue-cli v3.0 中使用 SCSS/SASS的方法
08-27
有时候我们可能想定义一个通用的 SCSS/SASS，我们可以在项目目录中创建一个 SCSS 文件，比如一些只想在特定组件中使用的通用样式或是一些 SCSS 变量等。我们可以在组件中使用 `@import` 进行样式导入，例如：`@...
uni-app 全局使用scss
想吃凤梨酥的博客
08-18 1470
uni-app 全局使用scss的方法
import { createVitePlugins } from './build/vite/plugins'; import { initProxy } from './build/vite/proxy'; import { resolve } from 'path'; import { ConfigEnv, loadEnv, UserConfig } from 'vite'; import { wrapperEnv } from './build/utils'; const pathResolve = (dir: string) => { return resolve(process.cwd(), '.', dir); }; // https://vitejs.dev/config/ export default function ({ command, mode }: ConfigEnv): UserConfig { const isProduction = command === 'build'; const root = process.cwd(); const env = loadEnv(mode, root); const viteEnv = wrapperEnv(env); return { root, base:'./', resolve: { alias: [ { find: 'vue-i18n', replacement: 'vue-i18n/dist/vue-i18n.cjs.js', }, // /@/xxxx => src/xxxx { find: /\/@\//, replacement: pathResolve('src') + '/', }, // /#/xxxx => types/xxxx { find: /\/#\//, replacement: pathResolve('types') + '/', }, ], }, server: { host: true, hmr: true, proxy: initProxy(), }, plugins: createVitePlugins(viteEnv, isProduction), build: { assetsDir:'static', minify: 'terser', terserOptions: { compress: { //生产环境时移除console drop_console: true, drop_debugger: true, }, }, }, css: { preprocessorOptions: { scss: { // 配置 nutui 全局 scss 变量 additionalData: `@import "/@/styles/variables.scss";@import '/@/styles/mixin.scss';`, }, }, }, }; }在这段配置里，我要加入vuesetupextend这个插件，代码如何修改
06-13
要使用vuesetupextend插件，你需要先安装它。可以通过以下命令进行安装： ``` npm install --save-dev vuesetupextend ``` 然后，在你的vite配置文件中，可以通过以下方式进行使用： ``` import { ...
uniapp scss定义全局变量
08-16
这样，你就成功在UniApp中定义了全局的SCSS变量和样式类。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [uniapp 添加scss全局变量、scss公共...
【uni-app笔记整理三】uni样式（scss）
小异常的博客
12-25 1134
本篇博客主要向大家介绍 uni-app 的样式，其实样式我们完全使用 CSS 即可，但这还不够，我要向大家介绍一个更强大的 CSS 扩展语言，也是 uni-app 官方推荐的 SCSS 语言。 　 简单介绍一下，SCSS 是一门 CSS 扩展语言，它完全兼容所有版本的 CSS，它的稳定性要比 CSS 更强大，使用起来更加的舒畅。 　 SCSS 让人们受益的一个重要特性就是为 CSS 引入了变量。你可以把反复使用的 CSS 属性值 定义成变量，然后通过变量名来引用它们，无需重复书写这一属性值。本篇将结合 un
Scss基础
weixin_41989250的博客
02-20 5596
混入(mixin)通过 @mixin 指令来定义。... }
Sass(Scss) 学习笔记（三）--- 混合器和继承
weixin_45092437的博客
01-03 1987
一、混合器 1、概念 ​ 在sass我们可以通过变量来复用小规模的样式（颜色、字体等），但如果我们想要复用一整段的样式代码，那变量就没办法了。还好sass定义了一个新特性 — 混合器 ，来专门实现多行代码的复用。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起实现某个特定的页面样式。 ​ 混合器的样式也不一定是一成不变的，可以通过参数的形式没生成特定的样式。 ​ 但混合器也不能滥用，滥用混合器，可能会导致代码很少，但生成的样式
SCSS的基本使用(一)
大圣归来圣骑士清欢的博客
04-22 1325
SCSS的基本使用、语法
scss--混入@mixin、@inclue、占位选择器 %、继承 @extend、插值语法 #{}、
weixin_42017221的博客
02-07 1702
mixin混入可以用于定义重复使用的样式，比如下面CSS代码我们可以发现，.header和.footer存在相同重复的样式定义，此时SCSS可以将这段重复样式提取到混入@mixin中，再在.header和.footer中通过@inclue引入混入样式。
CSS学习7--CSS三大特性：层叠、继承、优先级（权重）
最新发布
qq_54641174的博客
08-31 805
CSS三大特性
scss混合mixin与继承extend的使用(继承篇)
小白成长记
07-30 774
继承(extend) 理解： 包含多个样式的‘变量’，一个正常使用的样式类，不管以后继不继承，都会被编译解析。 若单独为继承而写的样式类，本身不想被编译解析，可以使用占位符%来定义样式类。 解析时是将用了继承样式类的选择器复制到一起，复制的是选择器，而不是定义的样式类。 基本使用： 优点： 编译后不会产生大量样式代码 缺点： 1. 不能带参 2. 后代选择器( )和兄弟选择器(+)，sass-loader@10.2 已经支持了 ...
scss的继承@extend 和站位符 %
潇湘子的博客
08-26 2113
继承： @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。 如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。 这样就可以达到复用的目的，减少代码的重复量。 比如： .container-a { width: 200px; height: 100px; margin-left: 10px; } container-b 和 contaienr-a 有几乎同样的样式属性，则可以这样来写： .container-b { @extend .con
SASS - @extend（继承）指令
吴吃辣
06-12 2187
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS – @extend（继承）指令 SASS – 操作符 SASS – 函数 SASS – 输出格式 @extend指令可以让一个CSS类继承另一个CSS类。 当多个元素之间共享一组属性值，同时又有...
scss@importcss
10-21
在SCSS中，@import指令用于导入其他SCSS文件或CSS文件。通过使用@import，我们可以将样式表分解为多个文件，以便更好地组织和维护代码。在导入SCSS文件时，我们可以省略下划线和扩展名。例如，@import "colors"将导入名为_colors.scss的文件。但是，如果我们导入的文件是CSS文件，则需要包含文件扩展名。此外，如果@import包含媒体查询，则它将被视为普通的CSS语句，而不是导入Sass文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值