快捷導(dǎo)航

vue中scss語(yǔ)法的使用你了解嗎

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

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

vue之scss語(yǔ)法使用

引入scss文件

css / test.scss

$testColor:red;

home.vue

<!--
描述：
  作者：xzl
  時(shí)間：03月30日190506
-->
<template>
  <div class="Home">
    Home
    <div class="test">測(cè)試</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">測(cè)試</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>

效果

在這里插入圖片描述

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

vue 路由懶加載詳情
這篇文章主要介紹了vue 路由懶加載，當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript 包會(huì)變得非常大，影響頁(yè)面加載，這便是vue 路由懶加載，接下來(lái)隨小編一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧
2021-10-10
vue?指令與過(guò)濾器案例代碼
這篇文章主要介紹了vue?指令與過(guò)濾器，本文通過(guò)案例代碼給大家詳細(xì)講解，給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-11-11
在vue3中動(dòng)態(tài)加載遠(yuǎn)程組件的流程步驟
在一些特殊的場(chǎng)景中（比如低代碼、減少小程序包體積、類似于APP的熱更新）,我們需要從服務(wù)端動(dòng)態(tài)加載.vue文件,然后將動(dòng)態(tài)加載的遠(yuǎn)程vue組件渲染到我們的項(xiàng)目中,今天這篇文章我將帶你學(xué)會(huì),在vue3中如何去動(dòng)態(tài)加載遠(yuǎn)程組件,感興趣的小伙伴跟著小編一起來(lái)看看吧
2024-08-08
vue使用國(guó)密SM4進(jìn)行加密、解密的過(guò)程
國(guó)密SM4算法是一種對(duì)稱加密算法，適用于對(duì)稱密鑰加密和解密的場(chǎng)景，這篇文章主要介紹了vue使用國(guó)密SM4進(jìn)行加密、解密,需要的朋友可以參考下
2023-07-07
Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法
Vue 路由過(guò)渡是對(duì) Vue 程序一種快速簡(jiǎn)便的增加個(gè)性化效果的的方法，這篇文章主要介紹了Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法，感興趣的可以了解一下
2021-05-05
使用Vue實(shí)現(xiàn)調(diào)用接口加載頁(yè)面初始數(shù)據(jù)
今天小編就為大家分享一篇使用Vue實(shí)現(xiàn)調(diào)用接口加載頁(yè)面初始數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue style屬性設(shè)置背景圖片的相對(duì)路徑無(wú)效的解決
這篇文章主要介紹了vue style屬性設(shè)置背景圖片的相對(duì)路徑無(wú)效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue3項(xiàng)目啟動(dòng)自動(dòng)打開(kāi)瀏覽器以及server配置過(guò)程
這篇文章主要介紹了vue3項(xiàng)目啟動(dòng)自動(dòng)打開(kāi)瀏覽器以及server配置過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
使用Vue進(jìn)行數(shù)據(jù)可視化實(shí)踐分享
在當(dāng)今的數(shù)據(jù)驅(qū)動(dòng)時(shí)代,數(shù)據(jù)可視化變得越來(lái)越重要,它能夠幫助我們更直觀地理解數(shù)據(jù),從而做出更好的決策,在這篇博客中,我們將探索如何使用 Vue 和一些常見(jiàn)的圖表庫(kù)（如 Chart.js）來(lái)制作漂亮的數(shù)據(jù)可視化效果,需要的朋友可以參考下
2024-10-10
Vue之監(jiān)聽(tīng)方法案例詳解
這篇文章主要介紹了Vue之監(jiān)聽(tīng)方法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-07-07