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:;
padding:;
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:;
padding:;
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:;
padding:;
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:; padding:; 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:;padding:;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. JAVA 入门第二章 (面对对象)

    本渣渣鸽了一个月终于有时间更新.因为有c++基础,学起来这章还是比较简单的,本章我觉得是程序猿质变课程,理解面向对象的思想,掌握面向对象的基本原则以及 Java 面向对象编程基本实现原理,熟练使用封装 ...

  2. RabbitMQ 消息队列 入门 第二章(交换类型fanout)

    1.安装完 RabbitMQ 之后,我们可以点击  http://localhost:15672/#/  默认账号:guest  密码: guest  在这上面我们可以查看执行情况.管理连接.管理队列 ...

  3. Linux基础入门 第二章 Linux终端和shell

    Linux终端 进入编辑IP地址命令:vi /etc/sysconfig/network-scripts/ifcfg-eth0 按键“i”:进行编辑 按键“ESC”:退出编辑  按键“:”:输入wq, ...

  4. MySQL----MySQL数据库入门----第二章 数据库和表的基本操作

    2.1 数据库和数据库表的创建 ①数据库的创建(在数据库系统中划分一块存储数据的空间): create database 数据库名称 [charset 字符集]: ②数据库表的创建 use 数据库名 ...

  5. java入门第二章——java编程基础

    习题 一.填空题 (p)1.java中的程序代码都必须在一个类中定义,类使用(class)关键字来定义. (p)2.布尔常量即布尔类型的两个值,分别是(true)和(false) (p18)3.jav ...

  6. ES6标准入门 第二章:块级作用域 以及 let和const命令

    一.块级作用域 1.为什么需要块级作用域? ES5中只有全局作用域和函数作用域,带来很多不合理的场景. (1)内层变量可能会覆盖外层变量: var tem = new Date(); function ...

  7. chomp/undef/标量 --Perl 入门第二章

    1.chomp 用途:去掉字符串 末尾的换行符 $text="a line of text \n" chomp($text) #去除行末的换行符 chomp()  --本质上是一个 ...

  8. C++ Primer Plus学习:第二章

    C++入门第二章:开始学习C++ 进入C++ 首先,以下是一个C++程序: //myfirst.cpp 显示一行文字 #include<iostream> //预处理器编译指令 int m ...

  9. Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用

    原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...

  10. Jenkins入门系列之——02第二章 Jenkins安装与配置

    2014-12-08:已不再担任SCM和CI的职位,Jenkins的文章如无必要不会再维护. 写的我想吐血,累死了. 网页看着不爽的,自己去下载PDF.有问题请留言! Jenkins入门系列之——03 ...

随机推荐

  1. 【CSS学习笔记】背景图片

    直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/ ...

  2. CSS属性之absolute

    0.脱离标准文档流 绝对定位的元素会脱离标准文档流,拥有z-index属性,并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素,这里就不过多介绍. 不过值得注意的是,虽然绝对定位元素脱离的标准 ...

  3. 50道java线程面试题

    50道Java线程面试题 下面是Java线程相关的热门面试题,你可以用它来好好准备面试. 1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序 ...

  4. html5之datalist标签

    当我看到这个标签的时候,其实我是很愤怒的.因为我以前实现过这个标签的功能,当时是无比的费劲.什么js库呀,function呀.我靠,统统去屎吧,哥有datalist了.那种感觉就好像自己千辛万苦去追去 ...

  5. 深入理解Hadoop集群和网络

    导读:云计算和Hadoop中网络是讨论得相对比较少的领域.本文原文由Dell企业技术专家Brad Hedlund撰写,他曾在思科工作多年,专长是数据中心.云网络等.文章素材基于作者自己的研究.实验和C ...

  6. C语言编程小tip

    1. 随机数产生 int rand(void)产生的随机数每次运行时都是与上一次相同,若要不同,用函数srand()初始化之. void srand(unsigned int seed)初始化随机数发 ...

  7. python从初识到精通1

    Python3 基本数据类型 Python 中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建. 在 Python 中,变量就是变量,它没有类型,我们所说的"类型& ...

  8. CodeForces 711A Bus to Udayland

    简单题. #pragma comment(linker, "/STACK:1024000000,1024000000") #include<cstdio> #inclu ...

  9. 在Eclipse中用TODO标签管理任务(Task)

    Elipse为Java项目的时候,有一个很人性化的“任务管理”功能,利用这个功能可以方便地将项目中一些需要处理的任务记录下来.先来看看“任务管理”是怎么使用的吧.下面这个类在Class和name 属性 ...

  10. Zeppelin0.6.2使用hive解释器

    Zeppelin0.6.2的jdbc Interpreter 配置 1.拷贝hive的配置文件hive-site.xml到zeppelin-0.6.2-bin-all/conf下. 2.进入conf下 ...