美文网首页
sass学习2——编译、自动监视转换

sass学习2——编译、自动监视转换

作者: 哈哈乐乐WXT | 来源:发表于2018-09-20 15:29 被阅读6次

新建一个scss为后缀的文件 input.scss,代码如下

$blue:red; //color
.blue {
    color: $blue;
}

编译

执行命令行sass input.scss output.css

现在就编译好了一个output.css文件,建一个html的页面可以测试一下css文件的效果了

image.png

如果每次修改input.scss文件都要重新编译一下是不是很麻烦呢,现在有一个新 的命令可以自动检测scss文件的更新,同时可以自动编译css文件

自动检测

sass --watch input.scss:output.css
image.png

改动文件就会自动检测到啦

image.png

注意啦:ctrl+c可以终止检测

执行命令 sass --watch app/sass:public/stylesheets可以针对整个目录进行检测
使用 sass --help可以列出完整的帮助文档

相关文章

  • sass学习2——编译、自动监视转换

    新建一个scss为后缀的文件 input.scss,代码如下 编译 执行命令行sass input.scss ou...

  • Less

    如何使用less Koala自动监视编译/Webpack/FIS Sublime插件less2css自动编译 &&...

  • 使用compass

    1.编译sass -->css 按需编译 监听文件的变化,并且自动编译 2.局部文件 以_开头不会被编译成css ...

  • VS code自动将Sass编译为CSS 二

    要实现Sass到CSS的自动编译,在 VS code自动将Sass编译为CSS 一 的基础上我们还有几个步骤要完成...

  • 自动编译和变量

    1.监视 监视sass文件夹下的 .scss文件,编译成css文件夹下对应的.css文件 --style代表css...

  • 常用gulp插件

    sass的编译(gulp-sass)自动添加css前缀(gulp-autoprefixer)压缩css(gulp-...

  • gulp常用插件整理(持续更新)

    gulp常用插件整理 1.gulp-sass(sass编译) 2.gulp-compass(sass编译) 3.g...

  • gulp常用插件整理

    gulp常用插件整理 1.gulp-sass(sass编译) 2.gulp-compass(sass编译) 3.g...

  • 入门Sass——编译

    命令行编译 //单文件转换命令sass input.scss output.css //单文件监听命令sass -...

  • 前端自动化-sass篇

    1、Grunt 配置 Sass 编译的示例代码 2、Gulp 配置 Sass 编译的示例代码

网友评论

      本文标题:sass学习2——编译、自动监视转换

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