在weex中愉快的使用scss的方法步骤
weex是一个可以利用vue或者Rax编写跨平台手机应用的框架。为了让在weex有更好的样式编写体验,遂有了以下的方案。
1.初始化一个weex工程
npminstallweex-toolkit-g weexcreateweex-test cdweex-test npmrunstart
这时候就可以在浏览器看到界面了
2.接着为了可以在vue里面写scss,我们需要安装两个东西,sass-loader、node-sass
npminstall-Dsass-loader@7.3.1node-sass
在这里要注意一点sass-loader要安装7版本的,不然会报错,这是因为sass版本高导致的,接下来就可以愉快的写scss,还要注意一点需要在style标签加上语言标记scss
3.为了更好的组织项目结够和样式的统一,我们会把一些主题颜色、字体大小、文字颜色提取到一个scss文件,我们把它命名为variable.scss如下:
$theme-color:blue; $font-big:32px; $font-nor:28px; $font-small:24px;
我们把它放到项目的src/common/scss下,需要的时候就在vue文件中引用,比如在index.vue页面引用
@import'./common/scss/variable.scss' div{ background-color:$theme-color; }
这样就可以让应用的主体部分的样式保持一致了。
4.在weex中有一些属性不支持简写的方式比如border,还有一些需要写两三条的样式如文字超出隐藏,这种样式我们可以将它们定义成scss的混合宏(mixin),我们把它命名为mixins.scss
@mixinborder($width,$style,$color){ border-width:$width; border-style:$style; border-color:$color; } @mixinborder-top($width,$style,$color){ border-top-width:$width; border-top-style:$style; border-top-color:$color; }
我们把它放到项目的src/common/scss下,需要的时候就在vue文件中引用,比如在index.vue页面引用
@import'./common/scss/variable.scss'; @import'./common/scss/mixins.scss'; div{ @includeborder(1px,solid,$theme-color); }
这样我们就可以将一些常用的css代码写进混合宏了
5.在weex中由于不支持类名的权重覆盖,只支持后面的定义的同类样式覆盖前面的样式,这样就会导致我们不能很好的组织css代码,又不能利用scss的优势代码层级嵌套。为此我们引入BEM命名方法,并通过scss的混合宏让其在写法上支持嵌套,首先我们在src/common/scss下创建bem.scss,并写入如下代码:
$namespace:''; $element-separator:'__'; $modifier-separator:'--'; @mixinb($block){ @if$namespace==''{ $B:$block!global; }@else{ $B:$namespace+'-'+$block!global; } @if'#{&}'==''{ .#{$B}{ @content; } }@else{ @at-root{ .#{$B}{ @content; } } } } @mixine($element){ $E:$element!global; $selector:&; @ifstr-index('#{&}','__'){ @at-root{ .#{$B+$element-separator+$element}{ @content; } } }@else{ @at-root{ #{&+$element-separator+$E}{ @content; } } } } @mixinm($modifier) $M:$modifier!global; @at-root{ #{&+$modifier-separator+$M}{ @content; } } }
由于weex不支持层级所以我们只能用@at-root将所有类名提升到第一层。接着我们在index.vue中引入这个文件: