目录
为什么引入css预处理器
可读性
嵌套：关系明朗
选择器
属性
伪类‘’
变量：语义明确
默认变量：美元符号 $ 变量名:值 !default
全局变量：:global { $global-x: }
变量插值：#{}
map键值对：$变量名:( key:值,...)
可维护性
混入指令/混合指令/宏指令@mixin：函数传参提高样式的复用率
不带参数混合宏
带参数混合宏
带特别多参数混合宏
调用混合宏@include
继承@extend：提高复用率
占位符 %placeholder：不产生代码的可继承样式
混合宏、继承、占位符
什么情况不适用
sass=scss
后缀扩展名
语法书写方式
sass和less
编译
Sass在服务端处理的
Less在客户端使用Less.js
语法
插值#{}
注释
加减法
乘法
除法
@if， @else if ，@else条件
@for
@while循环
@each循环
@import引入 SCSS 和 Sass
为什么引入css预处理器
提高CSS代码的可读性和可维护性
可读性
嵌套：关系明朗
选择器
#css
nav a {color:red;
}
header nav a {color:green;
}#scss
nav {a {color: red;header & {color:green;}}
}属性
#css
.box {border-top: 1px solid red;border-bottom: 1px solid green;
}#scss
.box {border: {top: 1px solid red;bottom: 1px solid green;}
}伪类‘’
.clearfix{&:after {clear:both;overflow: hidden;}
}变量：语义明确
默认变量：美元符号 $ 变量名:值 !default
$link-color: #3498db !default;a {color: $link-color; // 如果未定义 $link-color，则使用默认值 #3498db
}
全局变量：:global { $global-x: }
:global {$global-padding: 10px;
}.box {padding: $global-padding;
}
变量插值：#{}
$theme: light;body {background-color: #{$theme}-background; // 将变量插入到字符串中
}
map键值对：$变量名:( key:值,...)
$colors: (primary: #3498db,secondary: #2ecc71,accent: #e74c3c
);.box {background-color: map-get($colors, primary);
}
可维护性
混入指令/混合指令/宏指令@mixin：函数传参提高样式的复用率
相当于预先写好了一组样式，其它地方传参/直接引用
Vue中叫它混入指令，可以设置参数，复用重复代码块。
但会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时，不能将两个合成并集形式。
不带参数混合宏
@mixin border-radius{border-radius: 5px;
}带参数混合宏
# 带值参数
@mixin border-radius($radius){border-radius: $radius;
}
# 带默认值参数
@mixin border-radius($radius:5px){border-radius: $radius;
}
带特别多参数混合宏
当混合宏传的参数过多之时，可以使用“…”来替代
# 带多个参数
@mixin center($width,$height){width: $width;height: $height;margin-top: -($height) / 2;margin-left: -($width) / 2;
}
# 带特别多参数
@mixin box-shadow($shadows...){@if length($shadows) >= 1 {-webkit-box-shadow: $shadows;box-shadow: $shadows;} @else {$shadows: 0 0 2px rgba(#000,.25);-webkit-box-shadow: $shadow;box-shadow: $shadow;}
}调用混合宏@include
关键词“@include”来调用声明好的混合宏
button {@include border-radius;
}
.box {@include border-radius(3px);
}
.box-center {@include center(500px,300px);
}
.box {@include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}继承@extend：提高复用率
子类里继承了父类及其子类
.one{color: #000;
}
.one a{font-size: 10px;
}
.two{@extend .one;background-color: #fff;
}
编译出来的 CSS 会将选择器合并在一起，形成组合选择器.
.one, .two {color: #000;
}.one a, .two a {font-size: 10px;
}.two {background-color: #fff;
}
占位符 %placeholder：不产生代码的可继承样式
%声明的代码，如果不被 @extend 调用的话，不会产生任何代码
%mt5 {margin-top: 5px;
}
.btn {@extend %mt5;
}
.block {@extend %mt5;
}通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起.
.btn, .block {margin-top: 5px;
}混合宏、继承、占位符
什么情况不适用
越直观越好，运算类型（特别是map）类型的，尽量不要在实际项目中使用，后续维护成本很高的。
sass=scss
平时都称之为 Sass，
后缀扩展名
- Sass ：“.sass”，
- SCSS ：“.scss”
语法书写方式
- Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，
- SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
sass和less
编译
Sass在服务端处理的
Less在客户端使用Less.js
语法
插值#{}
（1）构建一个选择器
@mixin generate-sizes($class, $small, $medium, $big) {.#{$class}-small { font-size: $small; }.#{$class}-medium { font-size: $medium; }.#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);(2) 属性变量
$properties: (margin, padding);
@mixin set-value($side, $value) {@each $prop in $properties {#{$prop}-#{$side}: $value;}
}
.login-box {@include set-value(top, 14px);
}@mixin中插值不能作为赋值语句的值部分，只能用做属性名定义或者选择器构建时@include中不能使用插值
注释
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JS的注释方式，使用“//” 两者区别，
前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示
加减乘除连带单位一起计算
加减法
在变量或属性中都可以做加法运算，但对于携带不同类型的单位时，在 Sass 中计算会报错
.content {width: $full-width - $sidebar-width;
}字符串拼接
div {cursor: e + -resize;
}
编译后
div {cursor: e-resize;}乘法
当一个单位同时声明两个值时会有问题 只能有一个值带单位（比如 em ,px , %）
# 编译的时候报“20px*px isn't a valid CSS value.”错误信息。
.box {width:10px * 2px;
}
# 正确的写法
.box {width: 10px * 2;
}
除法
如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分
在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值
.box {width: (1000px / 100px);
}
编译后
.box {width: 10;
}@if， @else if ，@else条件
@mixin blockOrHidden($boolean:true) {@if $boolean {display: block;}@else {display: none;}
}
.block {@include blockOrHidden;
}
.hidden{@include blockOrHidden(false);
}
@for
@for $i from <start> through <end>
@for $i from <start> to <end>关键字 through 表示包括 end ，而 to 则不包括 end
@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}@while循环
@while $types > 0 {.while-#{$types} {width: $type-width + $types;}$types: $types - 1;
}@each循环
@each 循环就是去遍历一个列表，然后从列表中取出对应的值
@each $var in <list>
$list: adam john wynn mason kuroir;
@mixin author-images {@each $author in $list {.photo-#{$author} {background: url("/images/avatars/#{$author}.png") no-repeat;}}
}
.author-bio {@include author-images;
}@import引入 SCSS 和 Sass
Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一
Sass总结笔记 基础入门（超级直观细节） - 掘金
