您的位置:首页 > 财经 > 产业 > 网站建设系统开发_东营网格员招聘_济宁seo公司_引擎seo优

网站建设系统开发_东营网格员招聘_济宁seo公司_引擎seo优

2024/12/23 11:32:52 来源:https://blog.csdn.net/m0_67444449/article/details/143330354  浏览:    关键词:网站建设系统开发_东营网格员招聘_济宁seo公司_引擎seo优
网站建设系统开发_东营网格员招聘_济宁seo公司_引擎seo优

SCSS在Vue中的用法

  • 一、安装相关依赖
    • 1、安装sass - loader和node - sass(或dart - sass)
  • 二、在组件中使用SCSS
    • 1、单文件组件(.vue)中的样式使用
    • 2、**全局样式使用SCSS**
    • 3、在组件中使用变量和混入(Mixins)等SCSS特性
  • 三、常用全局变量
    • 1. 设置变量
    • 2. 使用变量
  • 四、使用全局变量
    • 1. 变量
    • 2. 嵌套
    • 3. 引入
    • 4. 混合
    • 5. 继承
    • 6. if / else / each / for
      • 1、@if 和 @else
      • 2、 @each
      • 3、@for循环
    • 7. 其他(作为变量使用)

一、安装相关依赖

1、安装sass - loader和node - sass(或dart - sass)

  • 如果使用Vue CLI创建的项目,可以通过以下命令安装:
  • 对于node - sass(基于LibSass,编译速度较快,但可能存在兼容性问题):
npm install sass - loader node - sass --save - dev
  • 对于dart - sass(官方Sass实现,兼容性更好):
npm install sass - loader dart - sass --save - dev

二、在组件中使用SCSS

1、单文件组件(.vue)中的样式使用

  • 在Vue的单文件组件中,可以直接在< style>标签中使用SCSS语法。需要给< style>标签添加 lang = “scss” 属性来表明使用的是SCSS。(可以使用嵌套式写法)
<template><div class="my-component"><p>这是一个使用SCSS样式的组件</p></div>
</template>
<style lang="scss">
.my-component { background-color: #f5f5f5; p{ color: blue; &:hover { color: red; } } } 
</style>

2、全局样式使用SCSS

可以创建一个main.scss(名称可自定义)文件来定义全局样式。然后在main.js(或入口文件)中导入这个文件。

  • 例如,在main.scss中:
$primary-color: rgb(20, 236, 56);
body {font-family: Arial, sans-serif;color: $primary-color;
}
  • main.js中:
import { createApp } from 'vue'
import App from './App.vue'
import './main.scss';const app = createApp(App)app.mount('#app')

3、在组件中使用变量和混入(Mixins)等SCSS特性

  • 变量使用
  • 可以在组件的<style lang = "scss">中定义变量,也可以从外部导入变量文件。
  • 例如,创建一个_variables.scss文件:
 $text-color: #444;
  • 在组件中导入并使用
<template><div class="my-other-component"><p>这个组件使用了外部定义的SCSS变量</p></div> 
</template><style lang="scss">
@import './variables';
.my-other-component{ p { color: $text-color; } } 
</style >  
  • 混入使用
  • 定义一个混入文件,例如_mixins.scss
@mixin buttonStyle1 {background-color: blue;color: white;padding: 10px 20px;border-radius: 5px;}@mixin buttonStyle2 {background-color: green;color: white;padding: 12px 22px;border-radius: 3px;}
  • 在组件中使用混入:
  • 通过点击事件,切换_mixins.scss中不同的样式
<template><button :class="buttonClass" @click="toggleButtonStyle">切换按钮样式</button>
</template>
<script>
export default {data() {return {isStyle1: true};},computed: {buttonClass() {return this.isStyle1? 'button-style-1' : 'button-style-2';}},methods: {toggleButtonStyle() {this.isStyle1 =!this.isStyle1;}}
};
</script>
<style lang="scss">
@import './main.scss';.button-style-1 { @include buttonStyle1; } 
.button-style-2 { @include buttonStyle2; } </style>

三、常用全局变量

1. 设置变量

在全局变量文件里面写入变量($),混合(@mixin,括号里面为默认值,可有可无),继承(%)等语法。


// 变量
$color: #ff0;
$bac_color: blue;
$bac_color: rgb(204, 132, 38);.main {color: $color;background: $bac_color; /*$bac_color被$bac-color覆盖*/}//混合
@mixin buttonStyle1($num:8px) {background-color:$color;  /*引用变量*/color: white;padding: 10px 20px;border-radius: $num;  /*引用小括号num的变量*/}@mixin buttonStyle2 {background-color: green;color: white;padding: 12px 22px;border-radius: 3px;}// 继承
%cricle {width: 50px;height: 50px;background: red;border-radius: 50%;}

2. 使用变量

.div{// 变量background: $color;// 混合@include borderRadius(20px); /*()不传值用默认值8px*/// 继承@extend %cricle;
}

四、使用全局变量

1. 变量

  1. 变量以 $ 开头,用来存储一些在css中需要复用的参数;
  2. 变量存在作用域,内部声明的变量无法在外面使用,外部如需引用内部的变量,可在变量值的后面添加!global声明;
  3. 变量名中,中划线等同下划线,值会被第二次定义的变量覆盖。
    scss代码
$color = #333;
$bac_color = #222;
$bac-color = #111;.main {color: $color;background: $bac_color; /*$bac_color被$bac-color覆盖*/
}
/*编译后:*/
.main{color : #333;background: #111;
}

2. 嵌套

nav {ul {list-style: none;}li { display: inline-block; }
}
/*编译后:*/
nav ul{list-style: none;}
nav li{display: inline-block;}

3. 引入

  1. scss通过 @import 可以把多个文件结合到一起;
  2. 以 _开头命名的文件不会直接生成为CSS文件,只在使用@import指令的位置被导入;
  3. 可全局引入或局部引入;
  4. scss中引入片段时,可以缺省文件扩展名;
  5. css原生的@import会通过额外的HTTP请求获取引入的样式片段,而scss的@import则会直接将这些引入的片段合并至当前CSS文件,并且不会产生新的HTTP请求。
/*_one.scss*/
nav {ul {list-style: none;}li { display: inline-block; }
}
/*two.scss*/
@import '_one' /*全局导入,缺省后缀*/.main{@import '_one'/*局部导入*/color : #333;background: #111;
}

4. 混合

  1. 通过 @mixin 定义一个类或方法,在其它位置通过 @include 引用这个类或方法
  2. @mixin 如果没有调用,不会被渲染
  3. 多个参数时,传参指定参数的名字,可以不用考虑传入的顺序
@mixin border-radius($radius:5px) {  /*设置默认值为5px*/border-radius: $radius;-ms-border-radius: $radius;-moz-border-radius: $radius;-webkit-border-radius: $radius;
}
.box {@include border-radius(); /*未传参数,默认值为5px*/
}
.box1 {@include border-radius(10px); /*传入参数,值为10px*/
}
/*编译后:*/
.box {border-radius: 5px;-ms-border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;
}
.box1 {border-radius: 10px;-ms-border-radius:10px;-moz-border-radius: 10px;-webkit-border-radius:10px;
}

5. 继承

  1. 使用%定义一个被继承的样式,它本身不起作用,只用于被其他人继承
  2. 样式如果没有被继承,不会输出到最终生成的CSS文件
  3. 注意,不能继承 @extend .box .main 这种连续组合的类,应该写为@extend .box, .main
%err-color {color:red;
}.errBox{@extend %err-color;padding: 10px;
}
.errBox2{@extend %err-color;padding: 5px;
}
/*编译后:*/
.errBox, .errBox2{color:red;
}
.errBox{padding: 10px;
}
.errBox2{padding: 5px;
}

6. if / else / each / for

1、@if 和 @else

@if 条件为真 {//code
} @else {//code
}

2、 @each

遍历变量所存在的所有数据。

@each $color in red, green, yellow, blue {.p_#{$color} { /*插值,第七点会讲到*/background-color: #{$color};}
}
/*编译后:*/
.p_red { background-color: red; }
.p_green { background-color: green; }
.p_yellow { background-color: yellow; }
.p_blue { background-color: blue; }

3、@for循环

(1) 关键字 through 表示包括终点值这个数,
(2) 关键字 to 不包括终点值这个数。

@for $i from 1 through 3 { /*through  包括3这个终点值*/.item-#{$i} { width: 2px * $i;}
}
/*编译后:*/
.item-1 {width: 2px;
}
.item-2 {width: 4xp;
}
.item-3 {width: 6px;
}

7. 其他(作为变量使用)

1、插值
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性名称或在某些特殊情况下则必须要以 #{$XXX} 形式使用。
如下,变量作为属性名的情况使用插值的形式使用

@each $color in red, green, yellow, blue {.p_#{$color} { /*插值,第七点会讲到*/background-color: #{$color};}
}$box_w: 100px;
.box {width: calc(100% - #{$box_w});
}
$static_imgUrl:"/static";
div{background: #fff url($static_imgUrl+"/images/login/background.jpg") no-repeat center center;
}

2、注释
(1) 使用//注释的内容编译后不存在
(2) 使用/* */注释的内容编译后会存在css文件中

通过以上方法,就可以在Vue项目中充分利用SCSS的强大功能来编写样式。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com