sass是啥
CSS 不是一个编程语言,可以用它来开发网页样式,但是没有办法用它进行编程。SASS 的
出现,让 CSS 实现了通过代码编程来实现的方式。
SASS 是一种 CSS 开发工具,提供了许多便利的写法,让CSS 的处理实现了可编程处理。
SASS 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性,可以生成风格良好的 CSS 样式表文件,易于组织和维护。
后缀
sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这 里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。
在此也建议使用后缀名为 scss 的文件,以避免 sass 后缀名的严格格式要求报错。
安装
1.ruby安装,用命令行gem install sass
编译
1.先进入包含.scss文件的文件夹
2.sass --watch example.scss:example.css --style
参数1
参数如下:
nested 嵌套
compact 紧凑 每个选择器代码在一行
expanded 扩展(完全格式化标准)
compressed 压缩一行
3。多文件编译
sass --watch .:css --style nested
中文注释问题
@charset "utf-8";
Sass-变量定义
变量
必须是$符号开头,后面紧跟变量名,变量名称和变量值之间要使用冒号:进行分隔(参考 CSS 属性和值的设定语法) ,如果值后面加上[!default]就表示默认值。
引用变量的值,直接使用变量名称,即可引用定义的变量的值
$w:200px;
$h:200px;
$color:red;
.box{
width: $w;
height: $h;
background: $color - 10;
}
特殊变量
一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果变量作为属性或者其他的特殊情况下,必须使用#{$variable}的形式进行调用。
$b:border;
$n:none;
.box1{
#{$b}:1px solid #f99;
#{$b}-color:red;
display: $n;
}
Sass-数组/map
map 就是列表项目中带名称的列表
定义数组: $map:(key1:value1, key2:value2, key3:value3)
length($map):获取 map 中的元素对个数
map-keys($map):获取指定$map 中所有的 key
map-values($map):获取指定$map 中所有的 value
map-values($map):获取指定$map 中所有的 value
map-merge($map1, $map2):将$map1 和$map2 合并在一起
map-remove($map, key):将指定名称的 key 从$map 中移除
Sass-嵌套
1.选择器嵌套,在嵌套的过程中,如果需要用到父元素,在 SASS 中通过&符号引用父属性
2.嵌套属性——不常用
选择器
.box2{
color:red;
p{
width: 10px;
height: 200px;
li{
color:red;
}
}
}
属性
.box3{
width: 200px;
height: 200px;
border:{
width: 20px;
style:dashed;
color:blue;
top:{
style:double;
}
bottom:{
color: red;
}
}
}
Sass-mixin函数
sass 中可以通过@mixin 声明混合,可以传递参数,参数名称以$开始,多个参数之间使用逗号分隔,@mixin 的混合代码块由@include 来调用。
@mixin top($co:red,$wb:50px){
border-color: transparent transparent $co transparent;
border-width: $wb;
border-style:solid;
}
.box4{
width: 0;
height: 0;
@include top();
}
Sass-语句
if语句
@if 指令是 SASS 中的一个控制指令,用于在表达式满足条件(true)的时候输出指定的
样式,在不满足条件(false)或者表达式为 null 的情况下输出其他的样式,里面不能定$n:200px;
m:600px;
s:red;
.box5{
@if
n<
m {
background: #99f;
} @else {
background: #f99;
}
width:$n;
height: $m;
background: $s;
}
for语句
@for $i from 1 through 5 {
.box_#{$i}{
width: 100px;
}
}
@for $j from 1 to 3{
.hezi_#{$j}{
height: 100px;
}
}
while语句
$a:1;
@while $a < 6 {
.hezi_#{$a}{
border-width: 100px;
}
$a:$a +1;
}
继承
在 SASS 中,通过继承/扩展来减少重复代码,可以让一个选择器去继承另一个选择中所有的样式。
.box5{
width: 100px;
height: 200px;
background: #f99;
}
.box6{
@extend .box5;
}
Sass-导入
CSS 本身包含一个指令@import,但是 CSS 中的@import 每次执行都会发送一次新的请求都会消耗一定的资源
Partials 这样的文件, 命名规范是以下划线开头的, 这样的 scss 文件不会被编译成 css文件。
Partials 是用来定义公共样式或者组件的样式的, 专门用于被其他的 scss 文件 import进行使用的
在 SCSS 文件中引入指令@import 在引入Partials 文件时,不需要添加下划线和扩展名。
自定义函数
函数的功能主要是数据的运算,SASS 中可以将一些值交给函数进行处理,具体的处理方式
@function add($n){
@return $n*10;
}
.box8{
width: add(50);
height: add(25);
background: #f99 + add(5);
}
颜色函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
background: lighten(#cc3, 10%) ;