vue之scss语法使用
引入scss文件
css / test.scss
$testColor:red;home.vue
<!--
描述：
作者：xzl
时间：03月30日190506
-->
<template>
<div class="Home">
Home
<div class="test">测试</div>
<div class="small-title">小标题</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {},
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped>
@import './css/test.scss';
$titleColor: red;
$smallTitleColor: #a22;
.Home {
.test {
color: $testColor;
}
.small-title {
color: $smallTitleColor;
}
}
</style>
效果
scss定义一个变量
<!--
描述：
作者：xzl
时间：03月30日190506
-->
<template>
<div class="Home">
Home
<div class="test">测试</div>
<div class="small-title">小标题</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {},
data() {
return {}
},
methods: {}
}
</script>
<style lang="scss" scoped>
$titleColor: red;
$smallTitleColor: #a22;
.Home {
.test {
color: $titleColor;
}
.small-title {
color: $smallTitleColor;
}
}
</style>
效果
scss里面使用算法 ±*/
.test {
width: 50px * 2;
height: calc(90px / 3);
border: 1px solid #ccc;
}
效果
定义mixin函数
@mixin text-overflow($width: 100%, $display: 'block') {
width: $width;
display: $display;
white-space: nowrap;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}
.Home {
.test {
width: 50px * 2;
height: calc(90px / 3);
border: 1px solid #ccc;
@include text-overflow(100px);
}
.small-title {
width: 80px;
@include text-overflow(80px);
}
}
效果
使用占位符 padding margin等
<!--
描述：
作者：xzl
时间：03月30日190506
-->
<template>
<div class="Home">
Home
<div class="test">我就是一个</div>
<div class="small-title">我是小白兔</div>
</div>
</template>
<style lang="scss" scoped>
%pt5 {
padding-top: 5px;
}
%mt10 {
margin-top: 10px;
}
.Home {
.test {
@extend %mt10;
width: 50px * 2;
height: calc(90px / 3);
border: 1px solid #ccc;
}
.small-title {
@extend %pt5;
width: 80px;
}
}
</style>
效果
继承 @entend XX
<!--
描述：
作者：xzl
时间：03月30日190506
-->
<template>
<div class="Home">
<div class="caiji">我是菜鸡</div>
</div>
</template>
<style lang="scss" scoped>
%pt5 {
padding-top: 5px;
}
.testClass {
font-size: 30px;
color: #ff0;
}
.Home {
.caiji {
@extend %pt5;
@extend .testClass;
}
}
</style>
效果
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
