美文网首页
Sass 安装与使用

Sass 安装与使用

作者: 大孩子气 | 来源:发表于2018-02-28 17:37 被阅读0次

1.下载ruby( 注意勾选Add Ruby executables to your PATH)
2.找到安装目录 打开Start Command Prompt with Ruby
3.淘宝镜像 安装sass

移除默认源  gem sources --remove https://rubygems.org/
添加淘宝源  gem sources -a https://ruby.taobao.org/
查看源  gem sources -l

4.通过gem安装sass

安装 --- gem install sass
升级 --- gem update sass
查看命令 --- sass -v
帮助命令 --- sass -h

5.sass有两种后缀名文件sass和scss:推荐使用scss

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
} 

6.命令行编译
单文件转换
sass index.scss index.css
单文件监听
sass --watch index.scss:index.css
文件夹监听
sass --watch sass/index.scss:css/index.css
7.命令行其他配置
常用的有--style,--sourcemap,--debug-info

sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info

--style表示解析后的css是什么格式,有四种取值分别为: nestedexpandedcompactcompressed
--sourcemap表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为 .css.map文件。
--debug-info表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。

相关文章

  • 学习 Sass

    Sass的使用 安装Ruby 安装Sass ( vscsde可以使用Live Sass Compiler 插件 ...

  • webpack加载 Sass 文件和创建source map

    加载 Sass 需要sass-loader。(一定要安装了Sass才可以,如未安装,请先安装Sass) 安装 使用...

  • 安装-编译

    安装 安装node-sass来编译sass文件 安装ruby来编译sass文件 编译 node-sass 使用we...

  • Sass入门

    1.安装sass 安装sass需要ruby的环境使用gem 命令安装 Mac 使用MacBook的用户可以直接使用...

  • webpack 引入 sass

    使用sass或scss语法配置 安装sass依赖sass-loader和node-sass: 安装之后,可能会出现...

  • Sass 安装与使用

    1.下载ruby( 注意勾选Add Ruby executables to your PATH)2.找到安装目录 ...

  • Sass/Scss学习笔记

    Sass version 1.24.0 安装使用安装Sassnpm install -g sass编译单个文件sa...

  • 2、在vue中使用如sass等一些插件的安装

    1、为了使用sass,我们需要安装sass的依赖包 安装 node-sass 会出错的,原因是node-sass没...

  • Sass使用和核心语法

    一、Sass预处理使用1、VS Code中安装Sass插件 在 VS Code 中安装 Live Sass Com...

  • Sass

    安装: 需要Ruby环境,先确认是否安装了Ruby 安装Ruby 安装Sass 或者使用本地安装,下载sass到本...

网友评论

      本文标题:Sass 安装与使用

      本文链接:https://www.haomeiwen.com/subject/cxdixftx.html