- 综合排序
- 最热优先
- 最新优先
- 来自专栏河湾欢儿的专栏
sass
1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(; 1、通过命令安装 Sass 打开电脑的命令终端，输入下面的命令： gem install sass sass -v //查看版本是否安装成功 gem update sass//更新到最新的sass 版本 gem uninstall sass//卸载sass（不要点） ws配置路径：program：C:\Ruby23-x64\bin\sass.bat mixin @mixin alert($color color1,10%); } $padding:10px 5px 10px 5px; .div{ padding: $padding; padding-left: nth($padding,2) background: map-get($maps,background); } @at-root .con{ //跳出嵌套 } @function dobule($cc){ @return $cc*2;
1.8K10发布于 2018-09-06 - 来自专栏『学习与分享之旅』
Sass导入其它Sass文件
和 LESS 一样 SASS 文件中也支持导入其它 SASS 文件，其实原生的 CSS 也支持通过 @import 导入其它的 CSS 文件，只不过不常用，不常用的原因在于原生的 @import 导入其它的 CSS 文件，只有执行到 @import 时浏觅器才会去下载对应 CSS 文件，这导致请求次数变多，页面加载起来特别慢，而 LESS 和 SASS 中的 @import 是直接将导入的文件拷贝到当前文件中生成一份
53820编辑于 2023-09-29 - 来自专栏生如夏花绚烂
Sass学习（一）--Sass入门
目录 常用命令 变量 嵌套css规则 群组选择器 子选择器，相邻，同级选择器 属性嵌套 import导入 嵌套导入 sass注释 sass乱码解决 常用命令 sass 命令 sass input.scss output.css :将sass文件输出到指定css文件 sass --watch input.scss:output.css:自动监视sass文件更新到指定css文件 sass --watch app /sasss:public/styles:sass监视一个目录里面的sass文件更新到指定目录 sass --update /sass:/css:将一个文件夹的所有scss文件编译到另一个一个目录 sass article a{ color:red; } article a:hover{ color:blue } 群组选择器 我们在编写css时有时会这样做 .con h1,.con h2 .con h3{ font-weight:400; } 而在sass中可以简写为 .con{ h1,h2,h3{ font-weight:400 } } 编译结果与上面一致
2K10编辑于 2022-09-08 - 来自专栏FreeSWITCH中文社区
Sass
如果你用了打包工具，比如Gulp、Webpack，又需要写比较多的样式的话，那用Sass来写CSS才是最好不过的。 相比较CSS，Sass能提供很多CSS无法达到的优越性。 sass的出现，让前段样式写起来更有结构。各种原因就是，CSS那么难用你怎么还在用CSS。 Sass让前端样式拥有了变量 CSS本身是缺少变量机制的，像每个网站都有自己的主色，如果没有变量的话，只写CSS，每次都只能拷贝颜色六位数，但有了变量就不一样了。就是在Sass底下。 使用时，只要对变量进行声明和引用即可，需要注意的一点是，在Sass中符号中划线和下划线是相同的。即a_b和a-b是相同的。 color: $nav-color; } Sass可以解决CSS的无层级嵌套 同样的代码，Sass可以在书写时将次级元素嵌套在上一级元素之间。
1.5K10发布于 2020-12-21 - 来自专栏404
node-sass update to dart-sass
// 卸载 node-sass npm uninstall node-sass // 安装 dart-sass npm install sass sass-loader -D 如果项目之前用到/deep /需要替换为::v-deep，否则会报错，全局搜索 /deep/ , 将项目里的 /deep/ 替换为 ::v-deep 弃用node-sass的理由： node-sass在npm安装的时候大概率的会安装出错 ，或下载时间过长 node-sass已停止更新 node-sass与dart-sass区别： node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass dart-sass 是用 drat VM 来编译 sass node-sass是自动编译实时的，dart-sass需要保存后才会生效 推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass
1.2K20编辑于 2022-04-25 - 来自专栏网络收集
编译sass
sass安装 Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。 要安装最新版本的Sass和Compass，你需要输入下面的命令： //安装如下(如mac安装遇到权限问题需加 sudo gem install sass) gem install sass gem install 命令帮助等命令： //更新sass gem update sass //查看sass版本 sass -v //查看sass帮助 sass -h 编译sass sass编译有很多种方式，如命令行编译模式 、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等 sass文件的目录，你也可以告诉sass监听整个目录： sass --watch app/sass:public/stylesheets 命令行编译配置选项; 命令行编译sass有配置选项，如编译过后css
96320编辑于 2022-05-13 - 来自专栏神光的编程秘籍
继往开来的 sass 3 代编译器：ruby sass、node-sass、dart-sass
node-sass 社区里用 c++ 实现了 sass 的编译器，叫做 LibSass，和 node 做了集成，就是 node-sass 这个包。 dart-sass dart-sass 毫无疑问是用 dart 来写的 sass 编译器。 dart-sass 代表着未来，也是被官方推荐的 sass 编译器。 只是需要 node-sass 和 node 版本的对应比较麻烦。 dart-sass 是用 dart 实现的 sass 编译器，提供的 dart-sass 的包是 js 的，由 dart 编译而来。 ruby sass 和 node-sass 都已经是历史，dart-sass 是 sass 编译器的未来。
2K10编辑于 2022-03-03 - 来自专栏全栈开发工程师
【Sass学习笔记】001-Sass简介
一、Sass简介 1 什么是 CSS 预处理器 我们来编写 Sass 代码，Sass 代码再转换成标准的 CSS 代码！ 用哪个好 1.4 示例代码 // 我们可以使用前面定义的变量 $color $color: red; .test { color: $color; } 2 什么是 Sass 2.1 官网描述 2.2 Sass 前世今生 Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍 ）并不能被大众接受，不过由于其强大的功能和 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同 4.1 Sass 和 CSS 写法有差别 Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。
57810编辑于 2025-01-06 - 来自专栏全栈开发工程师
【Sass学习笔记】002-Sass 环境安装
第四步（选）：通过 Compass 来安装 Sass 除了使用 gem 命令来安装 Sass 之外，还可以通过安装 compass 来安装 Sass，因为 Compass 是基于 Sass 开发的一个框架 第六步（选）：淘宝 RubyGems 镜像安装 Sass 除了下载 Sass 安装包到本地安装之外，碰到网络原因无法安装时还可以使用淘宝 RubyGems 镜像安装 Sass。 如果无误之后，执行下面的命令： gem install sass 2 查测 Sass 及更新 2.1 查测 Sass 通过上面的几种方法都可以安装 Sass，但是，我们要如何确认自己是否安装 Sass 维护 Sass 的团队会不断的为 Sass 添加新的功能，那么如何确保自己已安装的 Sass 也具有这些新的功能特性呢？ 那么怎么卸载 Sass 呢？ 其实他也就是一句命令的事情： gem uninstall sass 这样就卸载了 Sass ，但这行命令基本上是使用不上。
62410编辑于 2025-01-06 - 来自专栏网络收集
Sass学习
CSS预处理器语言有很多，最常见的有3种： （1）Sass； （2）Less； （3）Stylus； 这些CSS预处理语言都具备编程的特性，这种编程方式相对于纯CSS书写方式来说，具有更加简洁、适应性更强 2、什么是Sass？ Sass是功能最为强大、最成熟、并且是最为流行的CSS预处理器。因此，对于Sass、Less和Stylus这3个，我们还是建议大家学习Sass。 3、Sass和Less Sass和Less是当下最为流行的2门CSS预处理语言，也是国内外讨论最热的2个。 Sass和Less差别不大，语法也相近。 但是两者也有以下明显区别： （1）Sass由于是使用Ruby编写的，所以编译的时候是在服务器端处理；而Less由于是使用JavaScript编写的，所以编译的时候是在浏览器端处理； （2）Sass拥有更为强大的功能 4、Sass和Scss 在Sass中，有2种语法格式： （1）Sass格式； （2）Scss格式。也就是说，平常我们所说的Sass和Scss其实是同一个东西来的，统称为Sass。
94850编辑于 2022-04-17 - 来自专栏三木的博客
sass 概要
好在有了sass，写css不再死板。sass对css的增强如下： 宏定义 宏定义的优点在于一处定义，多处使用，需要修改的时候只需要修改定义的地方即可。 虽然sass没有明确的说明，但其实以下几种语法与C语言中的宏定义非常类似： 变量 sass中的变量适用于替换css中参数的值。 mixin triangle($color, $size, $direction) { display: block; height: 0; width: 0; border: $size/2 base-color, $i * 5%); } } css: ul:nth-child(3n + 1) { background-color: #004080; } ul:nth-child(3n + 2) 对css所做的一些增强，阐明了sass如何让css从简单的平铺式的书写方式演变成一种"编程语言"，希望读者可以在自己的前端项目中试一试sass，相信它会极大地提升你的开发效率。
1.3K10发布于 2020-02-18 - 来自专栏网络收集
Sass安装
5、Sass安装 NPM 安装 我们可以使用 npm（NPM 使用介绍）来安装 Sass。 npm install -g sass 注：国内 npm 建议使用淘宝镜像来安装，参考：NPM 国内慢的问题解决 Windows 上安装 我们可以使用 Windows 的包管理器 Chocolatey 来安装： choco install sass Mac OS X (Homebrew)安装 Mac OS 可以使用 Homebrew 包管理器来安装： brew install sass/sass /sass 更多安装方法可以查看官网：https://sass-lang.com/install 安装Sass和Compass sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
2.3K40编辑于 2022-05-13 - 来自专栏秋风的笔记
Node Sass 弃用，以 Dart Sass 代替
就在今天，Sass 官方团队正式宣布 Libsass 将弃用，以及基于它的 Node Sass 和 SassC，并且建议用户使用 Dart Sass。 之后 Node Sass 还维护吗？ Dart Sass 能满足我们的需求吗？ Dart Sass 的性能如何？ Dart Sass 带来的好处和坏处。 Dart Sass Dart Sass 可以编译为纯 JavaScript 编写的 sass 软件包上传到 npm 。 结果: 可以看到 Node Sass 性能确实非常好，也是官方提到的优势。而 Dart Sass 同步的方法 比 异步方法 性能略高 2 倍左右。 Dart Sass 纯 JS 的方式也可以让我们摆脱被 Node Sass 编译支配的恐惧，不用再担心 Node Sass 安装不成功的问题了，并且 Dart Sass 也在积极地处理它的性能问题。
4.7K10发布于 2020-11-09 - 来自专栏落花落雨不落叶
vue+sass 下sass不能运行问题
/node-sass/vendor' @ . /~/.npminstall/sass-loader/4.0.0/sass-loader!./~/vue-loader/lib/selector.js?type=style&index=0!. /src/components/footer.vue 4:14-273 13:2-17:4 14:20-279 我vue component 里面是这样用的： <style lang="scss"> .footer { margin-top: 3em; padding-top: 2em; border-top: 1px solid #ccc; text-align: center; babel-plugin-transform-runtime": "^6.0.0", "babel-preset-es2015": "^6.0.0", "babel-preset-stage-2"
1.4K80发布于 2018-05-16 - 来自专栏天天
sass语法
1.安装 2.Webstorm下设置sass 3.变量 1.以$开头；后边紧跟变量名； 例如： 1.1普通变量 $color:#333 .con{ background:$color 例如： $position：top； .header{ margin-#{$position}:20px } 4.计算功能 body{ margin：（14px/2）; top:50px+100px; right:$value*5; } 5.嵌套 5.1选择器嵌套 例如： div h{ font-size:16px; } 可以用sass写法： ; color:red; } right:{ width:2px; color:blue; } } 6.继承 例如： .class1{ border: 1px solid #333; } .class2{
1.1K40发布于 2018-09-29 - 来自专栏网络收集
Sass安装
5、Sass安装 NPM 安装 我们可以使用 npm（NPM 使用介绍）来安装 Sass。 来安装： choco install sass Mac OS X (Homebrew)安装 Mac OS 可以使用 Homebrew 包管理器来安装： brew install sass/sass/sass 更多安装方法可以查看官网：https://sass-lang.com/install 安装Sass和Compass sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。 要安装最新版本的Sass和Compass，你需要输入下面的命令： //安装如下(如mac安装遇到权限问题需加 sudo gem install sass) gem install sass gem install 命令帮助等命令： //更新sass gem update sass //查看sass版本 sass -v //查看sass帮助 sass -h
2.1K20编辑于 2022-04-18 - 来自专栏大前端_Web
SASS相关
/downloads 安装sass：gem install sass 或者安装compass(含sass)： gem install compass 取版本：sass -v 更新：gem update sass 卸载：gem uninstall sass 编译 命令： // 冒号前面是scss路径，后面需要生成的css路径 sass ---wath style\scss\:style\css\--style compressed 支持中文注释：lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass\engine.rb 在末尾加: Encoding.default_external auto|space|comma) //$newList --- 将两个列表合成一个列表 join( (1 2), (3,4) ) //1 2 3 4 join( (1,2), (3 4) ) //1,2,3,4 join(1, (2 3) ) //1 2 3 join(1, (2,3) ) //1,2,3 join(1,2) //1 2 append($list
1.2K10发布于 2018-09-27 - 来自专栏零域Blog
Sass 教程
格式为： map:(key1: value1,key2:value2,key3:value3); 。可通过 map-get(map,key) 取值。 关于map数据还有很多其他函数如 map-merge(map1,map2) ， map-keys(map) ， map-values( 定义 $heading: (h1: 2em, h2: 1.5em animation: motion 3s infinite; } @keyframes motion { ... } 我认为 @at-root 应用于 @keyframe 或许是 @at-root 最好的实践 使用继承的最佳实践 通常使用继承会让你的 css 美观、整洁。因为继承只会在生成 css 时复制选择器，而不会复制大段的 css 属性。 {$i} { width: 2em * $i; } } 生成 .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 {
6.4K10编辑于 2022-03-22 - 来自专栏网络收集
Sass简介
CSS预处理器语言有很多，最常见的有3种： （1）Sass； （2）Less； （3）Stylus； 这些CSS预处理语言都具备编程的特性，这种编程方式相对于纯CSS书写方式来说，具有更加简洁、适应性更强 2、什么是Sass？ Sass是功能最为强大、最成熟、并且是最为流行的CSS预处理器。因此，对于Sass、Less和Stylus这3个，我们还是建议大家学习Sass。 3、Sass和Less Sass和Less是当下最为流行的2门CSS预处理语言，也是国内外讨论最热的2个。 Sass和Less差别不大，语法也相近。 但是两者也有以下明显区别： （1）Sass由于是使用Ruby编写的，所以编译的时候是在服务器端处理；而Less由于是使用JavaScript编写的，所以编译的时候是在浏览器端处理； （2）Sass拥有更为强大的功能 所以小伙伴们，快快到Sass的碗里来！ 4、Sass和Scss 在Sass中，有2种语法格式：（1）Sass格式；（2）Scss格式。
81730编辑于 2022-05-13 - 来自专栏技术社区
了解sass
例子如下 // 继承 .class1{ float: left; } .class2{ @extend .class1; width: 200px; } 编译后生成 .class1, .class2 { float: left; } .class2 { width: 200px; } 五、运算 直接上例子 .container{ position: relative; height: (200px/2); width: 100px + 200px; left: 50px * 2; 也可插入普通css文件 @import "outer.css"; 自定义函数 通过@function 来自定义函数 @function higher($h){ @return $h * 2;
69320编辑于 2022-06-16
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号