知道Weex吗？就是那个用Vue或Rax做手机应用超级方便的神器！
npm install weex-toolkit -g weex create weex-test cd weex-test npm run start
咋整？咱们来瞅瞅怎么开个 Web 应用的项目呗！特简单，就在浏览器里面找到它就成了～简易得很还不赶快试试看！
npm install -D sass-loader@7.3.1 node-sass
首先你得装两个东西，sass-loader和node-sass。这俩货可是咱们玩scSS的必备工具！注意，只有最新的（版本7）才能满足咱的要求，别用错了然后把style标签里的代码换成scss形式就欧了，简直太简单了~
想要项目美观又工整？赶紧到”variable.scss”文件里调调主题色和字号这些关键部分！这样一来，主要元素就能一致。
$theme-color: blue; $font-big: 32px; $font-nor: 28px; $font-small: 24px;
@import './common/scss/variable.scss'
div {
background-color: $theme-color;
}
额，有时候，属性可不敢随便省略，你看那个Border，还有样式，有时候写起来可是挺费劲的。文章太长怎么办？别担心，SCSS能帮咱们解决这个问题。我们就把它叫作 mixins.scss，放在项目路径sour/Common/scss那里。要用的话，再在vue文件里面调出来就好了。比如说，index.vue这个文件呀。
哥们儿，咱们正搞Weex开发，遇到个小麻烦。同样名字的东西，新样式老会给刷掉，CSS代码变乱七八糟了。别急，我这儿有个好招儿——BEM命名法！它能帮你理清CSS，加上SCSS的混合宏，嵌套更简单了。那咱怎么办?先建个bem.scss文件放 src/common/scs 里，把要用的都丢进去。要注意，因为 Weex 不用目录层级，所以类名得通过 @at-root 跳到上面去，这样出来的样式才能好看。最后别忘了在 index.vue 文件里引用这个文件，大功告成!
@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;
}
来，把这三个tscss文件扔到每个vue文件里头，方便为主。好，我们要用一个叫做sass-resources-loader的东东，在配置文件那儿找配 valoads/utils.js那儿改改就行了。弄完这些，你就可以随心所欲地在weex项目中编辑这个tscss文件~
@import './common/scss/variable.scss';
@import './common/scss/mixins.scss';
div {
@include border(1px, solid, $theme-color);
}
各位朋友们，今天的文章分享就到这儿！希望大家有所收获，一定要关注我们！如果有啥不明白的地方，或者想要聊聊自己的想法，都尽管告诉我们！另外，记得给我们加点赞，分享出去！今天我要给大家介绍一个超级好用的Weex框架，学会了它，你就能用Vue或React轻轻松松做出手机App了。还教你怎么创建Weex项目，咋样用Vue来编写CSS，怎么搭建漂亮一致的项目布局和样式，怎么设置混搭宏，怎么用BEM命名法，怎么加入CSS文件等等。希望这些小技巧能帮助到你们！不要忘记点赞和分享呦！
评论0