泉州找工作网站,凡客资源,住房及城乡建设部信息中心网站,学校网站规划SCSS在Vue中的用法 一、安装相关依赖1、安装sass - loader和node - sass#xff08;或dart - sass#xff09; 二、在组件中使用SCSS1、单文件组件#xff08;.vue#xff09;中的样式使用2、**全局样式使用SCSS**3、在组件中使用变量和混入#xff08;Mixins#xff09;… SCSS在Vue中的用法 一、安装相关依赖1、安装sass - loader和node - sass或dart - sass 二、在组件中使用SCSS1、单文件组件.vue中的样式使用2、**全局样式使用SCSS**3、在组件中使用变量和混入Mixins等SCSS特性 三、常用全局变量1. 设置变量2. 使用变量 四、使用全局变量1. 变量2. 嵌套3. 引入4. 混合5. 继承6. if / else / each / for1、if 和 else2、 each3、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。可以使用嵌套式写法
templatediv classmy-componentp这是一个使用SCSS样式的组件/p/div
/template
style langscss
.my-component { background-color: #f5f5f5; p{ color: blue; :hover { color: red; } } }
/style2、全局样式使用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;在组件中导入并使用
templatediv classmy-other-componentp这个组件使用了外部定义的SCSS变量/p/div
/templatestyle langscss
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中不同的样式
templatebutton :classbuttonClass clicktoggleButtonStyle切换按钮样式/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 langscss
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. 变量
变量以 $ 开头用来存储一些在css中需要复用的参数变量存在作用域内部声明的变量无法在外面使用外部如需引用内部的变量可在变量值的后面添加!global声明;变量名中中划线等同下划线值会被第二次定义的变量覆盖。 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. 引入
scss通过 import 可以把多个文件结合到一起以 _开头命名的文件不会直接生成为CSS文件只在使用import指令的位置被导入可全局引入或局部引入scss中引入片段时可以缺省文件扩展名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. 混合
通过 mixin 定义一个类或方法在其它位置通过 include 引用这个类或方法mixin 如果没有调用不会被渲染多个参数时传参指定参数的名字可以不用考虑传入的顺序
mixin border-radius($radius5px) { /*设置默认值为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. 继承
使用%定义一个被继承的样式它本身不起作用只用于被其他人继承样式如果没有被继承不会输出到最终生成的CSS文件注意不能继承 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的强大功能来编写样式。
