快捷導(dǎo)航

vue中scss語法的使用你了解嗎

更新時(shí)間：2022年03月31日 11:38:15 作者：小渣亮

這篇文章主要為大家詳細(xì)介紹了vue中scss語法的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

vue之scss語法使用

引入scss文件

css / test.scss

$testColor:red;

home.vue

<!--
描述：
  作者：xzl
  時(shí)間：03月30日190506
-->
<template>
  <div class="Home">
    Home
    <div class="test">測試</div>
    <div class="small-title">小標(biāo)題</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定義一個(gè)變量

<!--
描述：
  作者：xzl
  時(shí)間：03月30日190506
-->
<template>
  <div class="Home">
    Home
    <div class="test">測試</div>
    <div class="small-title">小標(biāo)題</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函數(shù)

@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
  時(shí)間：03月30日190506
-->
<template>
  <div class="Home">
    Home
    <div class="test">我就是一個(gè)</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
  時(shí)間：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>

效果

在這里插入圖片描述