• Sass的的使用一


    sass -v 检测是否安装 Sass 成功

    gem update sass 更新 Sass

    gem uninstall sass 删除/卸载

    Sass 的编译有多种方法:

    1.命令编译
    2.GUI工具编译
    3.自动化编译

    命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入:

    单文件编译:sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

    这是对一个单文件进行编译,如果想对整个项目所有 Sass 文件编译成 CSS 文件,可以这样操作:

    多文件编译:sass sass/:css/

    上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

    缺点及解决方法:

    在实际编译过程中,你会发现上面的命令,只能一次性编译。每次个性保存“.scss”文件之后,都得重新执行一次这样的命令。如此操作太麻烦,其实还有一种方法,就是在编译 Sass 时,开启“watch”功能,这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:

    sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

    例如:

    可以在我们的命令终端中执行:

    sass --watch

    sass/bootstrap.scss:css/bootstrap.css

    GUI工具:

    Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
    CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)当然还有很多自己百度参考下 。

    自动化构建工具Grunt 和 Gulp 

    如果您正在使用其中的任何一种,那么你也可以通过他们来配置 Sass 的编译。这里仅列出两个示例代码(具体情况要根据您的项目环境来做一定的修改,不建议生搬硬套)

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

    module.exports = function(grunt) {
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
          dist: {
            files: {
              'style/style.css' : 'sass/style.scss'
            }
          }
        },
        watch: {
          css: {
            files: '**/*.scss',
            tasks: ['sass']
          }
        }
    });
      grunt.loadNpmTasks('grunt-contrib-sass');
      grunt.loadNpmTasks('grunt-contrib-watch');
      grunt.registerTask('default',['watch']);
    }

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

    var gulp = require('gulp');
    var sass = require('gulp-sass');

    gulp.task('sass', function () {
        gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
    });

    gulp.task('watch', function() {
      gulp.watch('scss/*.scss', ['sass']);
    });

    gulp.task('default', ['sass','watch']);

    [Sass]常见的编译错误
    在编译 Sass 代码时常常会碰到一些错误,让编译失败。这样的错误有系统造成的也有人为造成的,但大部分都是人为过失引起编译失败。

    而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中,是不是支持“GBK”编码的。所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”。

    另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败,在编译过程中都会有具体的说明,大家可以根据编译器提供的错误信息进行对应的修改。

  • 相关阅读:
    追随自己的价值观:用研经理 Anne Diaz 职业探索之路
    语义化版本(SemVer)的范围
    git如何放弃所有本地修改
    将本地已有的一个项目上传到新建的git仓库的方法
    using supervisord to run lsyncd script
    sersync下载安装及配置(有演示示例)
    sersync+rsync原理及部署
    Rsync+sersync 实现数据实时同步
    在分屏浏览中并排使用两个 Mac App
    MacOS 安装 Astah Professional 7.2
  • 原文地址:https://www.cnblogs.com/lhl66/p/7473279.html
Copyright © 2020-2023  润新知