- 综合排序
- 最热优先
- 最新优先
- 来自专栏神光的编程秘籍
继往开来的 sass 3 代编译器：ruby sass、node-sass、dart-sass
less、stylus 的编译器都是 js 写的，而 sass 就比较特殊了，3 代编译器都不是 js 写的。 今天，我们就来聊下 sass 的历史：sass 的 3 代编译器。 直到 2019 年 3 月，ruby sass 宣布不再维护，sass 最早的编译器退出历史舞台。 node-sass 社区里用 c++ 实现了 sass 的编译器，叫做 LibSass，和 node 做了集成，就是 node-sass 这个包。 dart-sass dart-sass 毫无疑问是用 dart 来写的 sass 编译器。 ruby sass 和 node-sass 都已经是历史，dart-sass 是 sass 编译器的未来。
2K10编辑于 2022-03-03 - 来自专栏河湾欢儿的专栏
sass
css，然后再拿过来使用，我们把它叫做预处理 less、sass的编译有两大类 第一类：基于node环境编译less 第二类：基于浏览器环境 less、sass是一门新的语法，不能被浏览器直接识别， Sass 和 SCSS 有什么区别？ 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
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入门
/sasss:public/styles:sass监视一个目录里面的sass文件更新到指定目录 sass --update /sass:/css:将一个文件夹的所有scss文件编译到另一个一个目录 sass 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 } } 编译结果与上面一致 还可以这样写 } article dl > dt {color: red; } 属性嵌套 在编写css时我们有时会这样写 #main{ border-top:1px solid red; border-left:3px :1px solid red; left:3px solid blue; bottom:4px solid orange } } 还可以指定例外规则 nav {
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
compass 在每一个安装过程中，你都会看到如下输出： Fetching: sass-3.x.x.gem (100%) Successfully installed sass-3.x.x Parsing documentation for sass-3.x.x Installing ri documentation for sass-3.x.x Done installing documentation for sass after 6 secon 1 gem installed 安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中： sass -v Sass 3.x.x (Selective 命令帮助等命令： //更新sass gem update sass //查看sass版本 sass -v //查看sass帮助 sass -h 编译sass sass编译有很多种方式，如命令行编译模式 sass文件的目录，你也可以告诉sass监听整个目录： sass --watch app/sass:public/stylesheets 命令行编译配置选项; 命令行编译sass有配置选项，如编译过后css
96320编辑于 2022-05-13 - 来自专栏前端架构
DarkMode(3)：sass函数实实现深色模式操作
》 sass颜色函数实现深色模式 在定义sass变量时，我们会有基准尺寸，如： $h1-font-size: $font-size-base * 2.5 ! default; $h3-font-size: $font-size-base * 1.75 ! default; 颜色，我们也可以定义基准颜色，主题色系，通过sass颜色函数，生成整个主题。 然后对基准颜色，进行处理，就生成另外一套主题 sass提供蛮多的颜色函数： https://sass-lang.com/documentation/modules/color 从大的方面主要分为RGB、 所以，对于目前前端所处的环境，其实也没有啥好讲的 先回去睡觉，明天再讲 转载本站文章《DarkMode(3)：sass函数实实现深色模式操作》, 请注明出处：https://www.zhoulujun.cn
1.6K10发布于 2020-12-11 - 来自专栏全栈开发工程师
【Sass学习笔记】001-Sass简介
一、Sass简介 1 什么是 CSS 预处理器 我们来编写 Sass 代码，Sass 代码再转换成标准的 CSS 代码！ 2.2 Sass 前世今生 Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍 ）并不能被大众接受，不过由于其强大的功能和 2.4 示例代码 $side : left; .rounded { border-#{$side}-radius: 5px; } 3 Sass 和 SCSS 有什么区别 3.1 概述 Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同 4.1 Sass 和 CSS 写法有差别 Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。
57810编辑于 2025-01-06 - 来自专栏全栈开发工程师
【Sass学习笔记】002-Sass 环境安装
如果无误之后，执行下面的命令： gem install sass 2 查测 Sass 及更新 2.1 查测 Sass 通过上面的几种方法都可以安装 Sass，但是，我们要如何确认自己是否安装 Sass [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A3Wge9b5-1652968389185)(image-20210625111939974-1624602182218. png)] 2.2 更新 Sass 维护 Sass 的团队会不断的为 Sass 添加新的功能，那么如何确保自己已安装的 Sass 也具有这些新的功能特性呢？ 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XVb7AR5T-1652968389185)(image-20210625112039545-1624602179738.png)] 3 卸载/删除 Sass 在常期使用的时候难免会碰到无法解决的问题，有时候可能需要卸载 Sass，然后再重新安装 Sass。
62410编辑于 2025-01-06 - 来自专栏三木的博客
sass 概要
好在有了sass，写css不再死板。sass对css的增强如下： 宏定义 宏定义的优点在于一处定义，多处使用，需要修改的时候只需要修改定义的地方即可。 虽然sass没有明确的说明，但其实以下几种语法与C语言中的宏定义非常类似： 变量 sass中的变量适用于替换css中参数的值。 $result: $result * $base; } @return $result; } .sidebar { float: left; margin-left: pow(4, 3) (3n + 1) { background-color: #004080; } ul:nth-child(3n + 2) { background-color: #004d99; } ul: nth-child(3n + 3) { background-color: #0059b3; } scss: @function scale-below($value, $base, $ratio
1.3K10发布于 2020-02-18 - 来自专栏网络收集
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差别不大，语法也相近。 ，如循环、函数、混合宏等，而less却没有； （3）Sass拥有成熟稳定的框架来辅助开发，特别是Compass，而less却没有； （4）Sass在国内外讨论热度最大，并且有一个稳定强大的团队在维护； Sass和Scss仅仅是Sass的两种语法格式罢了。 一、Sass格式 Sass格式，是Sass的“旧版本语法”。
94850编辑于 2022-04-17 - 来自专栏网络收集
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。 Sass 做一个基准测试。 之后 Node Sass 还维护吗？ Dart Sass 能满足我们的需求吗？ Dart Sass 的性能如何？ Dart Sass 带来的好处和坏处。 Dart Sass Dart Sass 可以编译为纯 JavaScript 编写的 sass 软件包上传到 npm 。 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!. 4:14-273 13:2-17:4 14:20-279 我vue component 里面是这样用的： <style lang="scss"> .footer { margin-top: 3em ,sass-loader,vue-style-loader，css-loader，分析了下，觉得是node-sass没安装好，所以我就卸载了node-sass，然后又重新安装（注意cnpm是需要使用npm 安装的，这个好像是淘宝的镜像，比较快）： npm remove node-sass cnpm install node-sass package.json里是这样写的： { "name": "hfutoj
1.4K80发布于 2018-05-16 - 来自专栏天天
sass语法
1.安装 2.Webstorm下设置sass 3.变量 1.以$开头；后边紧跟变量名； 例如： 1.1普通变量 $color:#333 .con{ background:$color ）; top:50px+100px; right:$value*5; } 5.嵌套 5.1选择器嵌套 例如： div h{ font-size:16px; } 可以用sass
1.1K40发布于 2018-09-29 - 来自专栏网络收集
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差别不大，语法也相近。 ，如循环、函数、混合宏等，而less却没有； （3）Sass拥有成熟稳定的框架来辅助开发，特别是Compass，而less却没有； （4）Sass在国内外讨论热度最大，并且有一个稳定强大的团队在维护； 也就是说，平常我们所说的Sass和Scss其实是同一个东西来的，统称为Sass。Sass和Scss仅仅是Sass的两种语法格式罢了。 一、Sass格式 Sass格式，是Sass的“旧版本语法”。
81730编辑于 2022-05-13 - 来自专栏大前端_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 = == > < >= <= 逻辑：or and for/while： @for $i from 1 through 3 {} //1~3 @for $i from ) ) //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
1.2K10发布于 2018-09-27 - 来自专栏零域Blog
Sass 教程
如果你熟悉 git 命令的话，你还可以从 sass 的 Git repository 来安装，git 的命令行为： git clone git://github.com/nex3/sass.git cd 格式为： map:(key1: value1,key2:value2,key3:value3); 。可通过 map-get(map,key) 取值。 最好的实践。 ,0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)); } @content @content 可以用来解决 css3 的 @media 等带来的问题。 使用继承的最佳实践 通常使用继承会让你的 css 美观、整洁。因为继承只会在生成 css 时复制选择器，而不会复制大段的 css 属性。
6.4K10编辑于 2022-03-22 - 来自专栏网络收集
Sass安装
更多安装方法可以查看官网：https://sass-lang.com/install 安装Sass和Compass sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。 compass 在每一个安装过程中，你都会看到如下输出： Fetching: sass-3.x.x.gem (100%) Successfully installed sass-3.x.x Parsing documentation for sass-3.x.x Installing ri documentation for sass-3.x.x Done installing documentation for sass after 6 secon 1 gem installed 安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中： sass -v Sass 3.x.x (Selective 命令帮助等命令： //更新sass gem update sass //查看sass版本 sass -v //查看sass帮助 sass -h
2.1K20编辑于 2022-04-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号