scss

简介 1. Sass 和 Scss Sass 和 Scss 其实是同一种东西，我们平时都称之为 Sass；Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 Scss文件。 两者之间不同之处有以下两点： 文件 扩展名 不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以 严格的缩进式 语法规则来书写， 不带大括号({})和分号(;) ，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 示例: // Sass 语法 $w:200px; //定义变量 $h:300px; //定义变量 body width:$w; height:$h; // Scss 语法 $w:200px; $h:300px; body{ width:$w; height:$h; } /* 编译出来的css*/ body{ width:200px; height:300px; } 2. Sass/Scss 和 Css Sass 和 Css Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时 不带有大括号和分号 ，其主要是依靠

使用vue-cli安装scss遇到问题 https://www.jianshu.com/p/2899bce3b72a scss使用参考 https://www.jianshu.com/p/2899bce3b72a 来源： https://www.cnblogs.com/wanqingcui/p/11641632.html

最近在vue项目中用到了表格树，like this element-ui以前是不支持表格树的，谁曾想，随着它的升级，居然也支持表格树了 我忙前忙后忙活半天，各种百度，最后弄出来了，发现element-ui支持表格树了，，这找谁说理去？于是我找了个墙角冷静了一会，最终决定还是把代码发上来，供大家参考吧！ 既然是表格树，那么就是一个组件，我直接上代码了，我决定直接开始装逼！ 1.TreeGrid.vue < template > < el-table :data = " data " border style =" width : 100% " :height = " height " :row- style =" showTr " size = " mini " > < el-table-column v-for = " (column,index) in columns " :key = " column.dataIndex " :label = " column.text " show-overflow-tooltip > < template slot-scope = " scope " > < span v-if = " spaceIconShow(index) " v-for = " (space, levelIndex) in scope.row._level "

目录 1、回顾gulp的使用方法 2、sass语法 2.1 css的编译模式 2.2 sass介绍 2.3 如何使用scss 3、sass用法 3.1 安装 sass 模块 3.2 配置处理scss文件gulp的任务 4、学习scss 语法 4.1 学习scss的注释语句 4.2 变量 4.2.1 单值变量 4.2.2 scss做四则运算 4.2.3 多值变量 4.2.4 复杂变量 - 循环 4.3 scss嵌套 4.4 mixin 混入 4.5 扩展 / 继承 4.6 函数 4.7 条件判断 4.8 导入另一个scss文件 1、回顾gulp的使用方法 2、sass语法 2.1 css的编译模式 css --- 普通 sass / scss --- 高效 // ********* less --- 高效 2.2 sass介绍 来源： ruby语言 基础的版本，后缀名为sass：没有{},只能通过缩进来实现 -- 可读性差、难以维护 // css .box {width: 100px} // .sass .box width: 100px; // 据说是这样 .scss 后缀 --- 可读性高、便于维护 html { background: red } // scss语法--嵌套 --- 权重 .box { color: blue; .test { font-size: 20px;

原文链接： https://blog.csdn.net/Young_Gao/article/details/93605428 一、创建项目 1、使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2、进入到项目根目录下，使用npm install 安装依赖 3、npm run dev 在开发环境下运行项目 二、修改项目的host 和 port 在package.json文件中新增如下代码： "config": { "nuxt": { "host": "192.168.124.4", // 此处可以改成自己的ip "port": "1818" // 端口可以随意更改 } }, 　 三、配置全局css样式 新建~assets/css/reset.css，并在nuxt.config.js中添加如下配置： css: ['~assets/css/reset.css'] 四、在nuxt中使用sass 只需要安装 node-sass sass-loader 就可以了 npm i node-sass sass-loader -D 如果需要引入.scss文件，只需在nuxt.config.js中添加如下配置： css:[ '~assets/common.scss' ],

一开始光看了底下没有瞅上面，一直在纠结 .catch()的问题，找了半天也没有找到，百度也没有，后来给我一个同学看了一下他说，是你的css问题，第一行就说了。后来我看了一下webpack的配置的css那块，没有问题的，后来看了看组件里面的css，就是没有写全，lang=”scss”,全部都补好之后就可以了，我用的是sass具体sass跟scss是什么关系，自行查看文档里面都有说明，即使你没有用到sass，但是你写了lang里面是空白的时候也会报错，所以，以后要注意！！！！！ 来源： https://www.cnblogs.com/yuanyuanya/p/11571535.html

封装成mixin复用 在写css的时候, 很多样式都是 很常用但是写起来很麻烦 , 虽然现在有很多成熟的ui框架, 但是我们也不能一个 简单的活动页 也引入那么大个框架吧? 在工作中我也攒下了不少常用css, 我把他们封装成了 mixin , 挑选了5个分享给大家, 希望大家喜欢. 溢出显示省略号 参过参数可以只是单/多行. /** * 溢出省略号 * @param {Number} 行数 */ @mixin ellipsis($rowCount: 1) { @if $rowCount <=1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $rowCount; -webkit-box-orient: vertical; } } web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法 （详细的前端项目实战教学视频，PDF） 真.1px边框 移动端由于像素密度比的问题, 实际的1px边框看起来比较粗, 如果想要更"细

毕业季，毕业设计题目不知道选啥好怎么办啊啊啊~~~ 好了，不慌不慌。 刚刚捣鼓着我的网站，想着全局来切换 css 样式来进行主题颜色的改变。然后，我就想在 js 里面获取我设置的 scss 的全局变量。好了，记一下怎么拿到的。 一、在 scss 文件中用 :export 写入你要获取的变量名： // vars.scss $color-primary: #3c8dbc; $bg: #ffffff; :export { colorPrimary: $color-primary; bgColor: $bg; } 二、之后再你要导入的文件中引入这个文件： import styles from '../assets/css/vars.scss' export default { data () { return { bgColor: styles.bgColor } } } 简简单单搞定~~ 可是主题改变还是有点头痛，再试试~~ 来源： https://www.cnblogs.com/hplwc/p/11565026.html

当我们在src目录下创建.scss文件，并在main.js中引用，运行时会报： ERROR Failed to compile with 1 errors 5:25:07 PM This relative module was not found: * ./main.scss in ./src/main.js 如图所示 解决方法： 新版本的vue-cli已经帮我们把sass-loader配置好了，放在util.js里面了 前面我们通过 cnpm i node-sass sass-loader -D 安装好了scss依赖 并在build文件夹下的webpack.base.conf.js的rules里面添加了如下配置 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 现在不需要这样配置。如果这样配置会报错，因为配置重复了。 只需将此配置删除即可 来源： https://www.cnblogs.com/xjguan/p/11544022.html

第一步 安装scss依赖， cnpm i node-sass sass-loader -D 注：sass-loader用来解析scss文件（-D 是 --save-dev 的简写） 第二步： 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] } 第三步： 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文件，里面的 "sass-loader"的版本更换掉 就行了。 安装的sass-loader的版本为最新8.0.0 改成如下即可 "sass-loader": "^7.3.1" 然后重新安装项目依赖 在终端执行 npm i 之后启动项目 npm run dev 项目启动成功，编译报错问题解决 来源