scss

SCSS 与 Sass 异同： http://sass.bootcss.com/docs/scss-for-sass-users/ ； 欢迎加入前端交流群来py ： 749539640 转载请标明出处！ 废话不多说，直接进入正题； 安装Sass和Compass sass 基于 Ruby 语言开发而成，因此安装sass前需要 安装Ruby 。（注:mac下自带Ruby无需在安装Ruby!） window 下安装 SASS 首先需要安装 Ruby ，先从官网 下载Ruby 并安装。安装过程中请注意勾选 Add Ruby executables to your PATH 添加到系统环境变量。如下图： 安装完成后需测试安装有没有成功,运行 CMD 输入以下命令： ruby - v // 如安装成功会打印 ruby 2.2 .2p95 ( 2015 - 04 - 13 revision 50295 ) [i386-mingw32] 如上已经安装成功。但因为国内网络的问题导致 gem 源间歇性中断因此我们需要更换 gem 源。（使用淘宝的gem源 https://ruby.taobao.org/ ）如下： // 1.删除原gem源 gem sources --remove https: // rubygems.org/ // 2.添加国内淘宝源 gem sources -a https: //

背景 在我们新开始的项目中，我们打算使用scss来作为我们的样式书写语言。同时，所有的sass/scss文件经过编译转化成css文件后要存放到跟scss/sass文件相同的目录下。整个前端团队已经有实时的代码编译构建工具，那么我们只需要书写自己的实时scss/sass构建工具，生成对应的css文件后，团队的实时构建工具也会触发编译，做打包构建处理。 第三方包选型 基于gulp的sass/scss编译工具有：基于node-sass的 gulp-sass 以及基于Ruby的 gulp-ruby-sass 。但是为了免得再安装Ruby以及一些特定的原因（ gulp-ruby-sass与gulp-sass ），我选择了使用gulp-sass。 运行方式及运行效果 你需要全局安装gulp：npm install -g gulp,你需要在你项目的根目录下新建gulpfile.js文件。运行方式就是直接在命令行项目根目录下执行：gulp即可。编译成功后会给出编译成功的提示（当然也可以配置关闭该提示），编译失败则会给出编译失败的提示，并且会在命令行控制台打印出详细的错误信息，同时，错误提示的时候会带有音效。在编译之后的css代码，我们使用了cssbeautify对其进行了格式化，同时，你还可以针对自己的需求对其进行语法检查等。 代码 最终的代码在下面。需要注意的是，

1.1.定义变量 $开头就可以定义点亮：比如$sidebar-width、$highlight-color 1.2.变量引用 1.3下划线 '_' 和 中划线 '-' sass 的变量名可以与 css 中的属性名和选择器名称相同，包括中划线和下划线 2.1嵌套规则 css 中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个 ID ： 2.2父选择器的标识符&; 1.普通用法 编译后 2.特殊用法：给当前&添加上层选择器 2.3群组选择器的嵌套 1.群组在外 编译后： 2.群组在内 编译后： 2-3. 子组合选择器和同层组合选择器：>、+和~; ' '（空格)：表示 子选择器 ，可以是 直接子 和 间接子 >：表示 直接子选择器 +：表示 当前元素 的 后一个 兄弟元素 ~： 表示当前元素 的 后全部 兄弟元素 2-4. 嵌套属性; 目的 写法1： 写法2： 3. 导入SASS文件; 1.css中的@import 规则：只有执行到 @import 时，浏览器才会去下载其他 css 文件，这导致页面加载起来特别慢。 2.scss中 @import 规则：所有相关的样式被归纳到了同一个 css 文件中，而无需发起额外的下载请求 3.可以省略 .sass 或 .scss 文件后缀： @import "sidebar"; 这条命令将把

在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间。关于如何在 vue-cli v3.0 中使用 SCSS/SASS，这里提供三种方案。前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器)，否则无法在项目中直接使用。 方案一：在组件中直接使用 在组件中直接使用 SCSS/SASS 是最简单的方式： < style lang = "scss" scoped > </ style > 复制代码 通过 lang 选项可以选择使用的语法： scss/sass。如果希望样式能够在全局范围内生效，就将 scoped 删除。 方案二：在组件中导入 .scss 文件 有时候我们可能想定义一个通用的 scss/sass 我们可以在项目目录中创建一个 .scss 文件，比如一些只想在特定组件中使用的通用样式或是一些 scss 变量等。 我们可以在组件中使用 @import 进行样式导入，例如： @ import '../src/static/common.scss' ; 复制代码 注意路径不要写错了。而且这种方案的前提是在导入组件中使用了 方案一 。否则的话 .scss 不可能直接在普通 css 样式表中进行编译，需要保持样式表格式的统一。 方案三：使用全局 scss/sass 文件 如果你希望定义一下全局能够使用的 scss

hi，好久不见，之前写过scss的变量、宏、继承、插值、占位、下面来介绍介绍sass的 基本特性-运算 ，自从知道了 scss 有有着和javascript一样的运算功能，就开始喜欢上了scss/sass。 运算 加法： sass ：.box{width:20px+30px} css：.box{width:50px} 注意：两个不同类型单位相加会报错例如 10px+1em 减法 sass ： $width:900px $border-width:200px; .box{widht:$width - $border-width} css：.box{700px;} 注意：两个不同类型单位相减会报错例如 10px+1em 乘法 sass ： .box{widht:10px * 2 } //正确 .box{widht:10px * 2px} //错误：一个单位不能同时声明两个值 css： .box{width:20px} 注意：两个不同类型单位相乘会报错例如 10px+1em 除法 在sass中接着使用"/"符号做为除号时将不会生效，编译时候既不会得到我们想要的结果也不会报错。 .box{widht:100px/2} //不会报错 编译出来的 css .box{ 100px/2} 想要编译出正确的css就需要给运算字符的外面添加一个小括号（）； sass： .box{widht:

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 时 不带有大括号和分号 ，其主要是依靠

转自： https://blog.csdn.net/wytbr666/article/details/77477182 安装Ruby:https://rubyinstaller.org/downloads/ 安装成功后，用命令进行检查，成功会显示版本信息 ruby -v gem -v 安装sass 在命令行输入： gem install sass 安装成功后，在D:\Ruby23-x64\bin里面会有scss.bat的文件 在webstorm中添加Watcher File -> Settings -> Tools -> File Watchers -> + -> SCSS 1、Arguments:配置编译后的文件的输出路径: --no-cache --update --sourcemap watch $FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css 2、Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map 3、Program: 同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的 不能带有中文，无论是路径名,文件名,文件里的内容

首先 npm install sass-loader@7.3.1 --save-dev// 注意版本号，否则会因为版本号过高而报错 npm install --save-dev node-sass 其次在build>webpack.base.conf中添加 { test: /\.scss$/, loaders: ['style', 'css', 'sass'] }, 来源： https://www.cnblogs.com/lipu12281/p/11877400.html

1.装包 cnpm i sass-loader -D peerDependencies WARNING sass-loader@* requires a peer of node-sass@^4.0.0 but none was installed peerDependencies WARNING sass-loader@* requires a peer of sass@^1.3.0 but none was installed peerDependencies WARNING sass-loader@* requires a peer of fibers@>= 3.1.0 but none was installed 使用npm安装sass-loader一般是安装不下来的，所以使用cnpm安装 cnpm i node-sass -D 2.配置规则 module:{//这个节点，用于配置所有第三方模块加载器 rules:[//所有第三方模块的匹配规则 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理.scss文件的第三方loader规则 ] } 注意：webpack 1.x版本匹配规则可以省略loader rules:[//所有第三方模块的匹配规则 {test:/\.scss$/,use

这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的比较 4、为什么选择使用Sass而不是Less？ 什么是Sass和Less？   Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？   CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。   转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。 为什么要使用CSS预处理器？   作为前端开发人员，大家都知道，Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。 CSS有具体以下几个缺点：   语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；   没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。   这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。   但是