sass常用记录
多写才能记住
基础的语法
还是要记一下用法
- 安装sass
- 监听，
sass --watch sass文件名:输出的css文件名
父选择器 &
注意的是&和相连的类名之间不能有空格，有空格就成了后代选择器了，
&会被替换成嵌套外层的父选择器，有一点特别的是，后面还可以跟后缀
.mod {
&.on {
color: green;
}
&-houzhui{
color:red;//后缀，编译完成就是.mod-houzhui
}
}
属性嵌套
.font-syle {
font:{
family: fantasy;
size: 25px;
weight: bold;
}
}
注释
-
/*hello*/会被完整输出到编译后的css文件中 -
//hello不会被输出到编译后的文件中
不同于css的语法
变量 $
//定义
$width: 4rem;
//使用
.main {
width: $width;
}
运算 +, -, *, /, %
插值语句
#{}插值语句可以在选择器或者属性名中使用变量，也就是把变量名放在里面
$name: meng;
p.#{$name} {
color: green;
}
//编译成
p.meng {
color: green;
}
@extend
使用场景就是a样式和b样式有相同的部分，但是也有不同的部分，那么这相同的部分就可以用继承的写法了
.same {
color: red;
font-size: 12px;
}
.a {
@extend .same;
}
//按道理来讲会被渲染成
.same .a {
color: red;
font-size: 12px;
}
定义混合样式 @mixin， 引用混合样式 @include
和
@extend的区别，一个是给自己套了一个选择器(@extend)，一个是把一些样式写在了自己的样式里(@mixin)，看代码看代码！！@mixin是解放生产力的一种做法
- 基本使用
@mixin large-text{
font: {
family: Arial;
size: 25px;
}
color: #ff0;
}
//使用
.title{
@include large-text;
padding: 5px;
}
- 进阶使用
@mixin large-text($color, $font-size) {
color: $color;
font-size: $font-size;
}
//使用
p {
@include large-text($color: #fff, $font-size: 20px)
}
//可以传变量， 变量也可以有默认值，当指令被引用的时候，如果没有给参数赋值，默认值生效，比如：
@mixin large-text($color, $font-size: 15px) {
color: $color;
font-size: $font-size;
}
