logo标签列表

将 SCSS 转换为 CSS。

csssass
66
1
https://sass2css.herokuapp.com/ - 0xdw
6个回答
92

如果您在 CodePen 中点击标题 CSS（SCSS）（不要使用齿轮更改预处理器），它将切换到已编译的 CSS 视图。

“Codepen

11
现在屏幕右侧有一个眼睛图标可以完成这项工作。 - antitoxic
3
你需要点击 CSS 标签页顶部附近的“查看编译”按钮。 - Jeremy C.
4
写作时，在 CSS 选项卡的右上角有一个“插入符号”，它能起到这个作用。从那里会出现一个下拉菜单，请选择“查看已编译的 CSS”。 - neophyte
在2020年，您可以单击CSS面板右上角的下箭头图标，打开下拉菜单，选择“查看已编译的CSS”。您可以切换回选择“查看未编译的CSS”。 - hoogw
89

在终端中，在包含样式表的文件夹中运行此命令：

sass --watch style.scss:style.css

来源：

http://sass-lang.com/

每当它注意到 .scss 文件中发生更改，它将更新您的 .css。

只有在您的 .scss 文件位于本地计算机上时才有效。尝试将代码复制到文件中并在本地运行它。

1
我在使用Windows7系统。我该去哪里找终端？难道这不是Linux的东西吗？正如你所看到的，我对sass和终端一无所知。 - Barbara
1
使用cmd，单击运行，然后输入cmd。按照网站上有关设置scss的说明操作。然后，您可以将所需文件保存在计算机上并将其转换为.css文件。 - joshuahornby10
哦，我明白了，谢谢。我希望有一个类似在线转换器的东西。这可能是我唯一使用sass的时候，所以我不想安装任何东西。不过还是谢谢你的帮助。 - Barbara
Sass错误：未定义的mixin 'backface-visibility'和Sass错误：不一致的缩进：使用5个空格进行缩进，但文档的其余部分使用2个空格进行缩进。奇怪的是，这些错误与我从http://cssconvert.mgwebsolutions.net/这里得到的相同。 - Barbara
好的。我最好的选择是查看这个网址：https://www.google.co.uk/search?q=online+scss+compiler&oq=online+scss+compiler&aqs=chrome.0.57j60l2.467&sugexp=chrome,mod=7&sourceid=chrome&ie=UTF-8，虽然似乎需要下载一些转换器。祝你好运。 - joshuahornby10
Codepen似乎正在转换它，那么为什么不直接从浏览器的开发者控制台中获取编译后的CSS呢？ - steveax
11
7

首先，如果您的计算机上没有安装Ruby，则需要安装它。

1. 打开终端窗口。 2. 运行命令 which ruby。

如果您看到路径类似于 /usr/bin/ruby，则表示已安装Ruby。如果您没有看到任何响应或收到错误消息，则表示未安装Ruby。 要验证您是否具有当前版本的Ruby，请运行命令ruby -v。

如果您的计算机上未安装Ruby，则

sudo apt-get install ruby2.0
sudo apt-get install ruby2.0-dev
sudo update-alternatives --install /usr/bin/gem gem /usr/bin/gem2.0 1

然后通过运行以下命令安装Sass gem

sudo gem install sass --no-user-install

然后复制或添加任何 .sass 文件并转到该文件路径，然后

sass --watch style.scss:style.css

每当它注意到 .scss 文件有更改时，它会更新您的 .css 文件

这仅在您的本地机器上使用 .scss 时有效。尝试将代码复制到文件中并在本地运行。

6

您可以使用sass /sassFile.scss /cssFile.css命令。

注意：在使用sass命令之前，您必须安装ruby并安装sass。

若要安装sass，请在安装ruby后在终端中键入gem install sass

提示：sass可将SCSS文件编译为CSS文件。

1

使用以下命令安装Ruby-sass
sudo apt-get -y update
sudo apt-get -y install ruby-full
sudo apt install ruby-sass
gem install bundler

示例
sass SCSS_FILE_PATH:CSS_FILE_PATH;

例如：sass mda/at-md-black.scss:css/at-md-black.css;

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接