溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
weex 是一個可以利用 vue 或者 Rax 編寫跨平臺手機應用的框架。為了讓在 weex 有更好的樣式編寫體驗，遂有了以下的方案。
1.初始化一個 weex 工程
npm install weex-toolkit -g weex create weex-test cd weex-test npm run start
這時候就可以在瀏覽器看到界面了
2.接著為了可以在vue里面寫scss， 我們需要安裝兩個東西， sass-loader、node-sass
npm install -D sass-loader@7.3.1 node-sass
在這里要注意一點sass-loader要安裝 7 版本的，不然會報錯，這是因為sass版本高導致的，接下來就可以愉快的寫scss，還要注意一點需要在style標簽加上語言標記scss
<style lang="scss"> </style>
3.為了更好的組織項目結夠和樣式的統一，我們會把一些主題顏色、字體大小、文字顏色提取到一個scss文件,我們把它命名為variable.scss如下：
$theme-color: blue; $font-big: 32px; $font-nor: 28px; $font-small: 24px;
我們把它放到項目的src/common/scss下， 需要的時候就在vue文件中引用, 比如在 index.vue 頁面引用
<style lang="scss">
@import './common/scss/variable.scss'
div {
background-color: $theme-color;
}
</style>
這樣就可以讓應用的主體部分的樣式保持一致了。
4.在 weex 中有一些屬性不支持簡寫的方式比如 border，還有一些需要寫兩三條的樣式如文字超出隱藏，這種樣式我們可以將它們定義成scss的混合宏（mixin）,我們把它命名為mixins.scss
@mixin border($width, $style, $color) {
border-width: $width;
border-style: $style;
border-color: $color;
}
@mixin border-top($width, $style, $color) {
border-top-width: $width;
border-top-style: $style;
border-top-color: $color;
}
我們把它放到項目的src/common/scss下， 需要的時候就在vue文件中引用, 比如在 index.vue 頁面引用
<style lang="scss">
@import './common/scss/variable.scss';
@import './common/scss/mixins.scss';
div {
@include border(1px, solid, $theme-color);
}
</style>
這樣我們就可以將一些常用的css代碼寫進混合宏了
5.在weex中由于不支持類名的權重覆蓋，只支持后面的定義的同類樣式覆蓋前面的樣式，這樣就會導致我們不能很好的組織 css 代碼， 又不能利用 scss 的優勢代碼層級嵌套。為此我們引入BEM命名方法，并通過scss的混合宏讓其在寫法上支持嵌套，首先我們在 src/common/scss 下創建 bem.scss，并寫入如下代碼：
$namespace: '';
$element-separator: '__';
$modifier-separator: '--';
@mixin b($block) {
@if $namespace == '' {
$B: $block !global;
} @else {
$B: $namespace+'-'+$block !global;
}
@if '#{&}' == '' {
.#{$B} {
@content;
}
} @else {
@at-root {
.#{$B} {
@content;
}
}
}
}
@mixin e($element) {
$E: $element !global;
$selector: &;
@if str-index('#{&}', '__') {
@at-root {
.#{$B + $element-separator + $element} {
@content;
}
}
} @else {
@at-root {
#{&+$element-separator+$E} {
@content;
}
}
}
}
@mixin m($modifier)
$M: $modifier !global;
@at-root {
#{&+$modifier-separator+$M} {
@content;
}
}
}
由于weex不支持層級所以我們只能用@at-root將所有類名提升到第一層。接著我們在index.vue中引入這個文件：
<template>
<div class="header">
<div :class="['header__back', `header__back--${status}`]"></div>
<div class="header__content"></div>
<div class="header__other"></div>
</div>
</template>
<script>
export default {
data(){
return {
status: 'black'
}
}
}
</script>
<style lang="scss">
@import './common/scss/variable.scss';
@import './common/scss/mixins.scss';
@import './common/scss/bem.scss'
@include b('header') {
height: 100px;
width: 750px;
flex-direction: row;
align-items: center;
@include e('back') {
flex: 1;
@include m('black') {
background-color: #000000;
}
@include m('white') {
background-color: #ffffff;
}
}
@include e('content') {
flex: 3;
}
@include e('other') {
flex: 1;
}
}
</style>
編譯后的樣式為：
.header {
height: 100px;
width: 750px;
flex-direction: row;
align-items: center;
}
.header__back {
flex: 1;
}
.header__back--black {
background-color: #000000;
}
.header__back--white {
background-color: #ffffff;
}
.header__content {
flex: 3;
}
.header__other {
flex: 1;
}
這樣看起來用scss的寫法代碼的結構性和可維護性就會更好一些。
6.由于這三個文件都是需要在每一個vue文件引入的，為了偷一下懶，我們可以用sass-resources-loader 這個loader來讓每一個vue文件都注入這幾個scss文件
npm install -D sass-resources-loader
然后修改根目錄下的 configs/utils.js ,找到如下，進行更改
const generateLoaders = (loader, loaderOptions) => {
let loaders = options.useVue ? [cssLoader] : []
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
//這里加入以下代碼
if (loader === 'sass') {
loaders.push({
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/common/scss/variable.scss'),
path.resolve(__dirname, '../src/common/scss/mixins.scss'),
path.resolve(__dirname, '../src/common/scss/bem.scss')
]
}
})
}
if (options.useVue) {
return ['vue-style-loader'].concat(loaders)
}
else {
return loaders
}
}
這樣就可以在weex工程中愉快的編寫scss了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
