Sass入门:第二章

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Sass入门:第二章相关的知识,希望对你有一定的参考价值。

1.Sass语法格式

假设有这样一段CSS代码:

body{
    font : 100% Helvetica , sans-serif;
    color : #333;
}

Sass最初的语法格式

$font-stack : Helvetica , sans-serif
$primary-color : #333

body
    font : 100% $font-stack
    color : $primary-color

    这种语法格式没有CSS中常见的大括号和分号,容易出错。

而SCSS的语法格式

$font-stack : Helvetica , sans-serif;
$primary-color : #333;

body{
    font : 100% $font-stack;
    color : $primary-color;
}

    SCSS比Sass更接近CSS。

2.Sass编译

    使用Sass进行开发,项目中还是引用".css"文件,Sass只是一个预处理工具,只有在需要的时候,才有效。

  Sass编译有多种方法:

  ?命令编译

  ?GUI工具编译

  ?自动化编译

3.命令编译

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

  ?单文件编译:

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

  ?多文件编译:

sass sass/:css/

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

  ?缺点

  在实际的编译过程中,上面的命令只能一次性编译。每次保存".scss"文件之后,都要重新执行一次这样的命令。解决的方法是在编译Sass时,开启"watch"功能,这样只要你的代码进行任何修改都能自动监听到代码的变化,并且编译出来。

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

例如:假设要把项目中的"bootstrap.scss"编译出"bootstrap.css"文件,并且将编译出来的文件放在"css"文件夹中,可以在命令终端中执行:

sass --watch
sass / bootstrap.scss : css / bootstrap.css

  一旦bootstrap.scss文件有任何修改,只要重新保存了修改的文件,命令终端就能监听。

4.GUI界面工具编译

对于 GUI 界面编译工具,目前较为流行的主要有:

  ?Koala (http://koala-app.com/)
  ?Compass.app(http://compass.kkbox.com/)
  ?Scout(http://mhs.github.io/scout-app/)
  ?CodeKit(https://incident57.com/codekit/index.html
  ?Prepros(https://prepros.io/)
相比之下,推荐使用以下两个:

  ?Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
    ?CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

5.自动化编译

  ?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‘]);
}  

  ?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‘]);

6.常见编译错误

  ?字符编译错误:在Sass编译的过程中,需要将文件编码设置为"utf-8".

  ?路径中午字符错误:建议在项目中文件命名或者文件目录命名不要使用中文字符。

7.不同风格样式输出

  Sass中编译的风格主要包括以下几种:

  ?嵌套输出方式 nested

  ?展开输出方式 expanded

  ?紧凑输出方式 compact

  ?压缩输出方式 compressed

例如: 

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

(1)嵌套输出方式 nested

  在编译的时候带上参数 " --style nested ":

sass --watch test.scss:test.css --style nested

  编译出来的CSS样式风格:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

(2)展开输出方式 expanded:

  在编译的时候带上参数 " --style expanded":

sass --watch test.scss:test.css --style expanded

  编译出来的CSS样式风格:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

这个输出的CSS样式风格和nested类似,只是大括号另起一行。

(3)紧凑输出方式 compact:

  在编译的时候带上参数 " --style compact ":

sass --watch test.scss:test.css --style compact

  编译后的CSS样式:

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

适合喜欢单行CSS样式格式的朋友。

(4)压缩输出方式 compressed

  在编译的时候带上参数 " --style compressed ":

sass --watch test.scss:test.css --style compressed

  编译出来的CSS样式风格:

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

压缩输出方式会去掉标准的Sass和CSS注释以及空格。

9.Sass调试

  只要浏览器支持 "sourcemap" 功能就可以直接在浏览器中调试Sass文件。早一点的版本,需要在编译的时候添加 " --sourcemap "参数:

sass --watch --scss --sourcemap
style.scss : style.css

在Sass3.3版本之上,不需要添加这个参数:

sass --watch style.scss : style.css

在命令终端,你将看到一个信息:

>>> Change detected to: style.scss
write style.css
write style.css.map

就可以直接在浏览器调试Sass文件。

 

以上是关于Sass入门:第二章的主要内容,如果未能解决你的问题,请参考以下文章

1-6 Sass 语法编译调试

scss安装入门到使用高级语法

sass 语法

sass语法基础知识

SASS入门之SASS安装

Sass学习笔记之入门篇