首页 > 代码库 > Sass学习笔记之入门篇
Sass学习笔记之入门篇
Sass又名SCSS，是CSS预处理器之一，，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。以下是我的学习笔记。
Sass安装环境
1.安装sass(mac)
①：Ruby安装
②：安装sass
sudo gem install sass
可以通过 sass -v检测是否完成安装 
2.更新sass
gem update sass
3.卸载（删除）sass
gem uninstall sass
Sass编译调试
我们现在一般采用scss语法格式。SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式以“.scss”为扩展名。注意文件扩展名不能用.sass。
使用 Sass 进行开发,项目中还是引用“.css”文件.Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，它才有攻效。 Sass 开发之后，要让 Web 页面能调用 Sass 写好的东西，就得有一个编译过程。
编译方式
1.命令编译：命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。
①单文件编译：(开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：)
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css （style是文件的名字）②多文件编译：（对整个项目所有 Sass 文件编译成 CSS 文件，并且将这些 CSS 文件都放在项目中“css”文件夹中）
sass --watch sass/:css/2.GUI界面工具编译
- Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
- CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
3.自动化编译
以下分别通过Grunt和Gulp来配置Sass的编译
①：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‘]);
编译错误：
在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”，在项目中文件命名或者文件目录命名不要使用中文字符。
不同样式风格的输出方法
1、嵌套输出方式 nested，在编译的时候带上参数“ --style nested”:
sass --watch test.scss:test.css --style nested 
2、展开输出方式 expanded,在编译的时候带上参数“ --style expanded”:
sass --watch test.scss:test.css --style expanded
3、紧凑输出方式 compact，在编译的时候带上参数“ --style compact”:
sass --watch test.scss:test.css --style compact
4.压缩输出方式 compressed，在编译的时候带上参数“ --style compressed”:
sass --watch test.scss:test.css --style compressed 
一段时间之后，你实际上就不再需要写 CSS 代码了，只用写 Sass 代码。在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。
Sass的调试
这张图表示的是，在chrome浏览器上改动相应的scss的样式，效果会实时同步出来，并且改动的代码会保存到本地。实现的方法可以看这个教程。
现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数：
sass --watch --scss --sourcemap style.scss:style.css在 Sass3.3 版本之上，不需要添加这个参数也可以：
sass --watch style.scss:style.cssSass的基本特性-基础
变量
声明变量
定义之后可以在全局范围内使用。$fontSize: 12px;body{ font-size:$fontSize;}编译后的css代码：body{ font-size:12px;}
$baseLineHeight:1.5 !default;body{ line-height: $baseLineHeight; }编译后的css代码：body{ line-height:1.5;}
//SCSS$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量).block { color: $color;//调用全局变量}em { $color: red;//定义局部变量 a { color: $color;//调用局部变量 }}span { color: $color;//调用全局变量}
嵌套
应该少用。
1、选择器嵌套
假设我们有一段这样的结构：<header><nav> <a href=http://www.mamicode.com/“##”>Home>{ color:red;}header nav a { color:green;}那么在 Sass 中，就可以使用选择器的嵌套来实现：nav { a { color: red; header & { color:green; } } }2、属性嵌套
Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：.box { border-top: 1px solid red; border-bottom: 1px solid green;}在 Sass 中我们可以这样写：.box { border: { top: 1px solid red; bottom: 1px solid green; }}
3、伪类嵌套：伪类嵌套和属性嵌套非常类似，只不过它需要借助`&`符号一起配合使用
我们就拿经典的“clearfix”为例吧：.clearfix{&:before,&:after { content:""; display: table; }&:after { clear:both; overflow: hidden; }}编译出来的 CSS：clearfix:before, .clearfix:after { content: ""; display: table;}.clearfix:after { clear: both; overflow: hidden;}
混合宏
在 Sass 中，使用“@mixin”来声明一个混合宏
不带参数混合宏：@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px;}大括号里面是复用的样式代码。带参数混合宏：@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius;}
使用“@include”来调用一个混合宏
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px;}--------调用---------button { @include border-radius;}这个时候编译出来的 CSS:button { -webkit-border-radius: 3px; border-radius: 3px;}
混合宏的参数--传一个不带值的参数
在混合宏中，可以传一个不带任何值的参数，比如：@mixin border-radius($radius){ -webkit-border-radius: $radius; border-radius: $radius;}在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。在调用的时候可以给这个混合宏传一个参数值：.box { @include border-radius(3px);}编译出来的 CSS:.box { -webkit-border-radius: 3px; border-radius: 3px;}
混合宏的参数--传一个带值的参数
在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：@mixin border-radius($radius:3px){ -webkit-border-radius: $radius; border-radius: $radius;}在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:.btn { @include border-radius;}编译出来的 CSS:.btn { -webkit-border-radius: 3px; border-radius: 3px;}
混合宏的参数--传多个参数
Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：@mixin center($width,$height){ width: $width; height: $height; position: absolute; top: 50%; left: 50%; margin-top: -($height) / 2; margin-left: -($width) / 2;}.box-center { @include center(500px,300px);}编译出来 CSS:.box-center { width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -250px;}
扩展/继承
在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
//SCSS.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { background-color: #f36; color: #fff; @extend .btn;}.btn-second { background-color: orange; color: #fff; @extend .btn;}编译出来之后：//CSS.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { background-color: #f36; color: #fff;}.btn-second { background-clor: orange; color: #fff;}
占位符 %：通过 @extend 调用的占位符才会产生效果，编译出来的代码会将相同的代码合并在一起。
%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。//SCSS%mt5 { margin-top: 5px;}%pt5{ padding-top: 5px;}.btn { @extend %mt5; @extend %pt5;}.block { @extend %mt5; span { @extend %pt5; }}编译出来的CSS//CSS.btn, .block { margin-top: 5px;}.btn, .block span { padding-top: 5px;}从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。
混合宏 VS 继承 VS 占位符
他们各有各的优点与缺点，先来看看他们使用效果：
a) Sass 中的混合宏使用@mixin mt($var){ margin-top: $var; }.block { @include mt(5px); span { display:block; @include mt(5px); }}.header { color: orange; @include mt(5px); span{ display:block; @include mt(5px); }}---编译出来的结果---.block { margin-top: 5px; } .block span { display: block; margin-top: 5px; }.header { color: orange; margin-top: 5px; } .header span { display: block; margin-top: 5px; }总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
.mt{ margin-top: 5px; }.block { @extend .mt; span { display:block; @extend .mt; }}.header { color: orange; @extend .mt; span{ display:block; @extend .mt; }}----编辑以后----.mt, .block, .block span, .header, .header span { margin-top: 5px;}.block span { display: block;}.header { color: orange;}.header span { display: block;}总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
%mt{ margin-top: 5px; }.block { @extend %mt; span { display:block; @extend %mt; }}.header { color: orange; @extend %mt; span{ display:block; @extend %mt; }}-----编译以后-------.block, .block span, .header, .header span { margin-top: 5px;}.block span { display: block;}.header { color: orange;}.header span { display: block;}总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”
注释
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”2、类似 JavaScript 的注释方式，使用“//”两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：//定义一个占位符%mt5 { margin-top: 5px;}/*调用一个占位符*/.box { @extend %mt5;}编译出来的CSS.box { margin-top: 5px;}/*调用一个占位符*/
Sass的基本特性-运算
加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：.box { width: 20px + 8in;}编译出来的 CSS:.box { width: 788px;}但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：.box { width: 20px + 1em;}编译的时候，编译器会报错：“Incompatible units: ‘em‘ and ‘px‘.”总结：in mm cm pt pc px等绝对单位都能运算；ex em rem等相对当前字体的都不能运算能换算的都会换算成px像素长度不能换算的都会报编译错误有个例外就是不加单位的话就相当于0
Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：$full-width: 960px;$sidebar-width: 200px;.content { width: $full-width - $sidebar-width;}编译出来的 CSS 如下：.content { width: 760px;}
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：.box { width:10px * 2px; }编译的时候报“20px*px isn‘t a valid CSS value.”错误信息。如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：.box { width: 10px * 2;}编译出来的 CSS:.box { width: 20px;}
”/ ”符号被当作除法运算符时有以下几种情况：• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。• 如果数值被圆括号包围。• 如果数值是另一个数学表达式的一部分。如下所示：//SCSSp { font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算}编译出来的CSSp { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; }在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：.box { width: (1000px / 100px);}编译出来的CSS如下：.box { width: 10;}
Sass学习笔记之入门篇
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。