Sass 是一个CSS 的扩展,在语法CSS语法的基础上,增加变量
,嵌套规则
, 混合
,导入
,函数
等功能
对CSS进行预处理的“中间语言”
文件格式
.sass
,.scss
scss
是对css的一种拓展,跟css很像,是开发中最常用的模式。
Sass从第三代开始,放弃了缩进风格,并且完全向下兼容普通的CSS代码。被称为scss
编译Sass
Node环境
sass app.sass app.css
sass --watch app.sass:app.css // 自动编译更新CSS
// 用来Sass命令来监视某个Sass文件的改动
sass --style expanded app.scss app.css // 编译的CSS格式更像是手写的CSS样式
工程化工具
Gulp插件:gulp-sass
var gulp = require('gulp'),
sass = require('gulp-sass'),
perfixer = require('gulp-autoprefixer'),
minifyCss = require('gulp-minify-css');
// 编译Sass 并添加CSS前缀 ,压缩
gulp.task('sass', function () {
gulp.src('*.sass')
.pipe(sass()) // 编译
.pipe(perfixer()) // 自动改名
.pipe(minifyCss()) // 压缩
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['sass']);
Sass编译后乱码,在Sass文件第一行添加 @charset "UTF-8"
。再进行编译。
变量
在SASS中是一个块级作用域,在块内部定义的变量,在外部访问不到,只能在内部访问。
定义:
$w: 100px;
使用:
width: $w;
父类选择器
在SASS中,可以通过&符号,在父选择器内部访问父选择器。
经常使用在伪类元素或伪样式中
div {
width: $w;
height: $h;
background: cyan;
&:hover {
background: khaki;
}
}
属性嵌套
Sass允许CSS属性嵌套,通常这种特性应用于复合属性。对属性嵌套,编译的时候,这些属性会根据嵌套层级来编译结果。
$w: 100px;
div {
width: $w;
height: $w;
background {
color: pink;
}
border: {
style: solid;
top: {
width: 5px;
color: tan;
}
left: {
width: 2px;
color: khaki;
}
}
}
编译之后结果:
div {
width: 100px;
height: 100px;
border-style: solid;
border-top-width: 5px;
border-top-color: tan;
border-left-width: 2px;
border-left-color: khaki; }
div background {
color: pink; }
混合
作用:继承复用
定义:@mixin names {}
使用: @include names
$w: 200px;
$h: 100px;
$color: cyan;
@mixin sayBor {
width: $w;
height: $h;
background: $color;
}
.head {
@include sayBor;
}
传参
可以对混合进行传递参数,和设置默认值。
@mixin sayBor($w: 300) {
width: $w;
height: $h;
background: $color;
}
.head {
@include sayBor(500);
}
多参数的使用
通过...
语法实现
@mixin sayBor( $shadow...) {
width: $w;
height: $h;
background: $color;
box-shadow: $shadow;
}
.head {
@include sayBor(2px 2px 10px red);
}
继承
实现对 class, 元素, id 或者自定义元素名称样式继承。
div {
width: 100px;
}
myDiv {
border: 1px solid tan;
}
#demo {
height: 200px;
}
.app {
background: tan;
}
p {
@extend div;
@extend myDiv;
@extend #demo;
@extend .app;
}
mixin与作用域
在sass中,定义在作用域内部的混合,在外部是无法访问的,只能在作用域内部访问
在sass中,定义在作用域内部的继承,在作用域外部是可以访问的,并且会继承整个文件中所有的选择器的样式,不论该选择器写在文件任何位置。编译之后会带有继承的层级选择器。
span {
.app {
background: tan;
}
}
p {
@extend .app; // 以继承的为父级
}
编译之后
span .app,
span p {
background: tan;
}
比较Less 的Mixin 和 SASS的继承:
Less中定义在作用域内部的混合,在作用域外部是不能直接访问。
SASS中定义在文件任何位置的继承,都可以直接访问。
比较Less的方法 和 SASS的Mixin
Less中定义在作用域内部的方法,在作用域外部不能直接访问,必须通过命名空间访问。
SASS定义在作用域内部的混合,只能在作用域内部访问,外部无法访问。
占位符
编译之后,样式会删除。占用SASS中的位置,使用其样式内容。
占位符,应用于元素选择器和自定义元素选择器。
%div {
width: 100px;
}
%myDiv {
border: 1px solid tan;
}
#demo {
height: 200px;
}
.app {
background: tan;
}
p {
@extend %div;
@extend %myDiv;
@extend #demo;
@extend .app;
}
编译结果:
p {
width: 100px; }
p {
border: 1px solid tan; }
#demo, p {
height: 200px; }
.app, p {
background: tan; }
运算
在sass中我们的运算是可以包含单位,此时我们的运算会对不同的单位做换算,通常默认单位是px。
当运算时,哪个单位在前面,得到结果就一哪个单位为最终单位。
在SASS中可以对CSS属性值进行运算。
除法元算特殊,因为CSS样式中有 font 属性样式。
必须加上
()
是变量或者函数返回的结果
除法是其它运算表达式中的一部分。
$w: 100px;
.box {
width: $w;
height: (100/2)px; // 尽量不要使用数字相除,编译之后单位与数字之间会有空格
height: 100px+2px;
font-size: round(5.5px)/2;
padding: ($w/20)px; // 加上括号之后,不需要加单位,会补默认单位,加上去变成 `px px`
}
色彩运算
在16进制的色彩模式中,进行运算时,是对每一个通道色彩单独运算,每个通道大于255或者小于0时候不会影响其它的通道颜色值。
在rgba模式下,进行色彩运算时,要求通明度必须保持一致,否则无法进行运算。
background: #948204 + #325;
color: rgb(10, 20, 20) - rgb(22, 2, 8);
border: 1px solid rgba(20, 2, 10, .4) * rgba(10, 34, 2, .4);
编译之后:
background: #c7a459;
color: #00120c;
border: 1px solid rgba(200, 68, 20, 0.4);
字符运算
+
:字符串拼接。
注意:没有''
来表示字符串
$cur: -drop;
div {
cursor: no + $cur;
}
插值
作用:动态创建一些值
语法:border-#{$key}
@mixin arrow ( $dir: top, $w: 1px, $c: #fff, $pos: absolute ) {
position: $pos;
border: $w solid transparent;
border-#{$dir}: $w solid $c;
font-size: 0;
}
if语句
语法:
通过@if
定义if语句
通过@else if
定义else if 语句
通过@else
定义 else 语句
使用关键字: or, and :表示 ||
和 &&
@mixin arrow ( $dir: top, $w: 1px, $c: #fff, $h: $w, $pos: absolute ) {
border: $w solid transparent;
@if $dir == top or $dir == bottom {
border-left-width: $h;
border-right-width: $h;
} @else {
border-top-width: $h;
border-right-width: $h;
}
position: $pos;
border-#{$dir}: $w solid $c;
font-size: 0;
}
for循环
语法: @for $i form strat through end {}
$i:循环变量
start: 起始值,包括自身
end:终止值,包括自身
.box {
height: 30px;
margin-bottom: 10px;
}
@for $i from 1 through 16 {
.item-#{$i} {
background: #101 * ($i-1);
}
}
while循环
语法:@while 循环条件 {}
当循环条件满足时,会执行该循环
$i: 1;
@while $i < 2 {
.item-#{$i} {
background: #111 * $i;
}
$i: $i + 2;
}
$j: 1;
@while $j < 21 {
.col-lg-#{$i} {
width: 100%/2 * $j;
}
$j: $j+1;
}
三元运算符
语法:通过if关键字实现。if(条件, true结果, false结果)
$isColor: true;
body {
background: if( $isColor, green, blue );
}