scss

这篇文章是记录的在VUE项目中SCSS的使用 vue项目上安装SCSS和开发入门 ① 使用vue-cli模板创建新项目：vue init webpack myvue ② 安装sass 依赖包 ，在cmd界面输入： npm install sass-loader --save-dev npm install node-sass --sava-dev ③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } ④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错 ⑤ scss使用测试：如下测试修改字体颜色 <style lang="scss"> $color:red; div {color:$color;} </style> 我这样做完以后，运行一下，报错 Modele build failed: TypeError: this.getResolve is not a function at Object.loader... 这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下， 找到package.json文件，里面的

本文来源： https://www.jianshu.com/p/1a47fac01077 Odoo12 Javascript 参考指南 本文介绍了odoo javascript框架。从代码行的角度来看，这个框架不是一个大的应用程序，但它是非常通用的，因为它基本上是一个将声明性接口描述转换为活动应用程序的机器，能够与数据库中的每个模型和记录交互。甚至可以使用Web客户端修改Web客户端的接口。 概览 这个Javascript框架主要设计用于三个地方使用： web客户端：这是一个私有的web应用，可以在其中查看和编辑业务数据。这是一个单页应用程序（永远不会重新加载该页，只在需要时从服务器提取新数据）。 网站：这是Odoo的公共部分。它允许身份不明的用户作为客户端浏览某些内容、购物或执行许多操作。这是一个经典的网站：各种各样的带有控制器的路由和共同协作的Javascript代码。 POS：这是销售点的接口。它是一个特定的但也应用程序。 Web客户端 单页应用 简而言之，webclient实例是整个用户界面的根组件。它的职责是协调所有的子组件，并提供服务，如RPC、本地存储等等。 在运行时，Web客户端是单页应用程序。每次用户执行操作时，它不需要从服务器请求整页。相反，它只请求它所需要的，然后替换/更新视图。此外，它还管理URL：它与Web客户机状态保持同步。 这意味着

前天用gulp-sass编译sass： outputStyle: 'compact' 1 gulp.task('sass', function() { 2 return gulp 3 .src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs 4 .pipe(sass({ outputStyle: 'compact' }).on('error', sass.logError)) 5 .pipe(gulp.dest('dist/css')) 6 }) 但是得到的css是空行显示的（和官方结果不一样，知道的码友，欢迎留言解惑） 解决办法： 工具： sublime· sublime打开你变异后的css文件，右键有个css format，里边的四个选项值都可以得到你想要的 compact 紧凑型（未断开选择器，有空格） compact(no spaces) 紧凑型（无空格） compact(break selector) 紧凑型（断开选择器） compact(break selector,no spaces) 紧凑型（断开选择器，无空格） 我也好奇gulp-sass的compact，没有解释， 但老师也说关注源码本身，编译最终是要压缩的。 =============

什么是saas、scss？ saas是一种动态样式语言，属于CSS预处理器，为CSS增加了一些编程特性，比如变量、嵌套、函数、继承、运算等等。开发人员可以像使用js等语言一样使用saas进行css的编程开发。 scss是saas改进版本saas 3的简称，它对原saas的语法兼容，区别于使用 {} 代替了原来的缩进； 1.安装与引入配置 初始化vue-cli项目，这里就不详述了，需要的可以查看之前写的一篇随笔， 穿梭>>> 依赖安装，执行以下安装命令： npm install node-sass --save-dev npm install sass-loader --save-dev 配置webpack.base.conf.js --- 在module节点rules数组中添加以下代码 { //配置编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"] } 2.使用示例 ①变量定义 ($) <style lang="scss" scoped> $fontcolor: #88f1e8; // 定义变量fontcolor, 格式'$变量名: value' .myscss { color: $fontcolor； // 使用变量 } </style> ✦定义格式： ‘$变量名: value’，注意value 不需要

这篇文章是算是前两天学习sass的一个摘要和总结吧，简单记载下。希望对大家有所帮助 对于什么是sass，我想现在大家可能都有所了解了。其实就是css的一种开发工具，或者也可以说是将css编程化。其实和less是有很大的相似点的。或者说几乎都是相同的。但是对于这两种的高级用法，其实个人更加的偏向于sass！ 关于sass的安装以及编译之类的这个东西上网一查一大把的就不多说了 我这里是用koala编译的。 下面简单的总结下sass的几个特点吧。 1、变量： sass中允许使用变量，在sass中变量都是以$开头的。 $blue:#249804; div{ color:$blue; } 如果需要将变量嵌入在字符串中则就必须写在#{}中 类似于我在汇联易中自定义的栅格宽度的sass写法： @mixin colWidth($value:20%) { -webkit-box-flex: 0; -webkit-flex: 0 0 $value; -moz-box-flex: 0; -moz-flex: 0 0 $value; -ms-flex: 0 0 $value; flex: 0 0 $value; } $i:1; @while $i<=100{ .col-#{$i}{ @include colWidth($i*1%); $i:$i+1; } } ／／这里用到的Mixin和循环后面会讲到。

一：插件 1:better-scroll 插件实现左右轮播滚动 2:vue-lazyload 插件实现图片懒加载 3:实现移动端自适应: 3.1: postc ss 插件引到项目里 功能：把你自己写的代码px转化为rem（对于引入的外部插件，不做单位转化) 3.2：main.js 中引入一段js代码，设置html标签中的font-size大小 window.onresize = setHtmlFontSize function setHtmlFontSize () { const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth const htmlDom = document.getElementsByTagName('html')[0] htmlDom.style.fontSize = htmlWidth / 10 + 'px' } setHtmlFontSize() 4：vue-resource插件类似于axios插件 5:main.js中全局引入mint ui框架，页面里面随便使用该框架的组件 6:Vue页面中，<script></script>代码中注释文字用 // 而不是 <!-- --> 这种格式 <template></template>模板中用 <!-- --

　　我们在用webpack构建项目的时候，有两种配置打包文件的方式： import或者require ：a-loader!b-loader!.././static/dog.png（打包某一个文件） 配置webpack.config.js文件的module.rules（打包某一类的文件） 　　针对于以上的第二种方式我贴下我之前一篇博客中的配置 Vue动态注册异步组件（非同一个工程的组件） var path = require('path') var webpack = require('webpack') module.exports = { entry: process.NODE_ENV === 'development' ? './src/main.js' : './src/component/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'async-component.js' }, module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /\.scss$/, use: [ 'vue-style-loader',

npm install --global vue-cli 错误提示：vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件 解决: 如果是npm安装的 执行 npm -g bin 把地址添加到环境变量中 如果是yarn 安装的 执行 yarn global bin 把地址添加到环境变量中 运行：yarn run serve 下面为错误提示：（解决方法 ：npm rebuild node-sass） yarn run v1.13.0 $ vue-cli-service serve INFO Starting development server... 64% building 543/596 modules 53 active ...les\core-js\library\modules\_defined.jsBrowserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist` 98% after emitting CopyPlugin ERROR Failed to compile with 17 errors 10:21:18 AM error in ./src/components/error-page/403

一. Sass/Scss&Less是什么？ Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。 Less 一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。less 中文站 Sass与Scss有什么差别 Sass原先跟Haml一样的缩排语法，对于写惯Css的前端来说是很不直观的，也不能将原来的Css加到Sass里面，因此Sass改良了语法，Sass 3就变成了Scss(Sassy CSS)。与原来的语法兼容，只是用{}取代了原来的缩进。 Sass .content margin:10px auto h1 font-size:24px; Scss .content{ margin:10px auto h1{ font-size:24px; } } 二. Sass/Scss&Less区别？ 1.Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

我们平时都称之为 Sass，其实可分成sass和scss， 其中Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，以“.sass”后缀为扩展名；而 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的语法书写和我们的 CSS 语法书写方式非常类似，较为宽松，以“.scss”后缀为扩展名；二者可以说是一个东西 sass嵌套 选择器嵌套 <header> 　　<nav> <a href="#">home</a> <a href="#">page</a> </nav> </header> nav a { color:red; } header nav a { color:green; } nav { a { color: red; header & { color:green; } } } 属性嵌套(有相同的属性前缀) 如 font, background等，也有可能是 -webkit- .box { font-size: 12px; font-weight: bold; } .box { font: { size: 12px; weight: bold; } } 来源： https://www.cnblogs.com/wuliujun521/p/11359126.html