我们平时都称之为 Sass，其实可分成sass和scss， 其中Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，以“.sass”后缀为扩展名；而 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的语法书写和我们的 CSS 语法书写方式非常类似，较为宽松，以“.scss”后缀为扩展名；二者可以说是一个东西
sass嵌套
- 选择器嵌套
这里的 & 代表 nav a ,理解起来有点 像js中this 的意思
<header>
<nav>
<a href="#">home</a>
<a href="#">page</a>
</nav>
</header>
nav a {
color:red;
}
header nav a {
color:green;
}nav {
a {
color: red;
header & {
color:green;
}
}
}- 属性嵌套(有相同的属性前缀)
如 font, background等，也有可能是 -webkit-
.box {
font-size: 12px;
font-weight: bold;
}.box {
font: {
size: 12px;
weight: bold;
}
}- 伪类嵌套
同上选择器嵌套一样 使用 & 关键字
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
}clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}占位符：
语法：%placeholder，
用法：占位符不被 @extend 调用不产生任何代码
%bg {
background-color: #FF0;
}
%w {
width: 100px;
}
.box {
@extend %w;
height: 100px;
@extend %bg;
}sass 语法
允许使用变量 以 $ 开头
$test: #ff9500
div{
color: $test;
}也可以字符串拼接
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}也可以加减乘除 简单计算
sass分享：
内容：全局、默认、局部变量
使用：默认变量 在局部中无效，覆盖 默认变量 不分上下顺序
<div class="box1">
<div class="box2">box2</div>
</div>$backgroundColor: #FF0; // 全局变量
$backgroundColor: #000 !default; // 默认变量
$color: #F0F;
.box1 {
$color: #CCC; // 局部变量
width: 100px;
height: 100px;
background-color: $backgroundColor; // #FF0
.box2 {
color: $color; // #CCC
}
}控制指令 (Control Directives)
混合指令
mixin 技术文档翻译 混合类型
mixing 混合 （mix 的现在分词）
mixin sass官方文档称 混合指令
@mixin 为定义混合指令
@include 为引用楼上定义的混合指令
<div class= "parent">
111
</div>
<div class= "child">
222
</div>
<div class= "test">
333
</div>
.parent {
color: red;
}
.child {
@extend .parent;
font-size: (21px * 3);
}
@minxin auto {
margin: 0 auto;
}
.test {
width: 200px;
@include auto;
}
sass 的 @if 控制指令
<div class="demo"></div>
单独使用@if：
当@if 的表达式不是false或者null时， 条件成立， 输出{} 内的代码
.demo{
$fx: bottom;
@if ($fx == top) {
border-color: transparent transparent pink transparent;
border-style: dashed dashed solid dashed;
}
@else if($fx == right){
border-color: transparent transparent transparent pink;
border-style: dashed dashed dashed solid;
}
@else if($fx == bottom){
border-color: pink transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
@else if($fx == left){
border-color: transparent pink transparent transparent;
border-style: dashed solid dashed dashed;
}
width: 0px;
height: 0px;
overflow: hidden;
border-width: 60px;
}
混合指令 + @if 指令
// 画三角形@mixin声明
@mixin sj($fx:top,$size:100px,$color:red){
@if ($fx == top) {
border-color: transparent transparent $color transparent;
border-style: dashed dashed solid dashed;
}
@else if($fx == right){
border-color: transparent transparent transparent $color;
border-style: dashed dashed dashed solid;
}
@else if($fx == bottom){
border-color: $color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
@else if($fx == left){
border-color: transparent $color transparent transparent;
border-style: dashed solid dashed dashed;
}
width: 0px;
height: 0px;
overflow: hidden;
border-width: $size;
}
//mixin的调用
.demo{
@include sj(left, 66px, pink);
}less 与sass有个很明显的区别
变量
咱们sass 变量用 $ 开头
less 是以 @ 开头的
sass语法 @for 控制指令
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动；
这个指令包含两种格式：
@for $var from through ，
或者
@for $var from to
<ul>
<li class="item-1">至尊魔法师</li>
<li class="item-2">王</li>
<li class="item-3">奇异博士</li>
<li class="item-4">莫度男爵</li>
<li class="item-5">哈姆雷特</li>
<li class="item-6">蜘蛛侠</li>
<li class="item-7">非人哉</li>
</ul>
from ... through
// 当使用 through 时，条件范围包含 与 的值
// 个人分析： 可以将一个页面，不同div中嵌套的元素设置样式，只要命名符合一定的规律
@for $i from 1 through 7 {
.item-#{$i} {
width: 6em * $i;
background: pink;
margin: 6px 0;
}
}from ... to
使用 to 时条件范围只包含 的值不包含 的值。另外，$var 可以是任何变量，比如 $i； 和 必须是整数值。
@for $i from 1 to 7 {
.item-#{$i} {
width: 6em * $i;
background: pink;
margin: 6px 0;
}
}
@each $usr in nezha, aolie, xiaoyu, xiaotian {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}@each 后面的 $usr 变量用于保存每次遍历到的元素，然后使用差值语法（#{var}）来拼接正确的图片路径
//@each 指令同样可以用于循环输出，和 @for 的差别在于，@each 通过遍历 list 或者 map 实现循环输出
// 如果遍历的对象是一个 map，那么我们就可以使用两个变量来存储元素的 key 和 value
$frz: ( usr1:xiaotian, usr2:sanyan, usr3:shancai, usr4:longnv );
@each $key, $usr in $frz {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
运算的坑
加号居然可以不需要空格隔开,但必须单位统一
$sidebar-width: 220px;
$content-width: 720px;
$gap-width: 20px;
$other-width: 2em;
.container {
// width: $sidebar-width+$content-width + $gap-width;
width: $sidebar-width + $other-width;
margin: 0 auto;
}
还可以做字符连接
- 如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。
- 如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。
p:before {
content: "bing" + jian;
font-family: sans- + "serif";
}编译后
p:before {
content: "bingjian";
font-family: sans-serif;
}减法 - 需要注意空格了，否则就完蛋喽
$full-width: 960px;
$sidebar-width: 200px;
.content {
width: $full-width - $sidebar-width;
}乘法
能够支持多种单位（比如 em ,px , %）；
如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可(多个乘数中只需要一个乘数提供单位，否则报错)。
.box {
width: 10px * 2;
}否则
.box {
width: 10px * 6px;
}error: 60px*px isn‘t a valid CSS value.
除法
众所周知“/”符号在 CSS 中已做为一种符号使用。其在 CSS 中通常起到分隔数字的用途，
因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，
编译时既得不到我们需要的效果，也不会报错。
需要给运算的外面添加一个小括号()才能执行除法运算
.box {
width: (100px / 2);
}总结: ”/ ”符号被当作除法运算符时有以下几种情况：
如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
如果数值被圆括号包围。
如果数值是另一个数学表达式的一部分。
p {
font: 10px/8px; // 纯 CSS，不是除法运算
$width: 1000px;
width: $width/2; // 使用了变量，是除法运算
width: round(1.5)/2; // 使用了函数，是除法运算
height: (500px/2); // 使用了圆括号，是除法运算
margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
还有一种情况
Sass 的除法运算还有一个情况。先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。
.box {
width: (1000px / 100px);?
}颜色运算 - 分段运算
所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：
p {
background-color: #012423 + #120923;
color: #324334 * 2
}
有顺工作
将所有的Mixins、Placeholder、Functions和变量放置在一起。将他们放置一起，可以确认他们可以很快的编写以及将来重复使用。
- 整站的元素应该放在一个base文件夹中。base文件夹应该包括全局的变量，如字体和颜色等
- 对于特定模块的Mixins、Functions 和变量，为了保证模块能正常运行，需要将这些集中放置在module文件中
限制嵌套
使用嵌套的黄金规则：
- 嵌套永远不要超过三个层级
- 确保输出的CSS简洁、可重用
- 使用嵌套是很有意义的，而不是默认选项
过度的嵌套会导致很多问题的发生,代码变得复杂，而且太过于依赖HTML结构。这样将导致后面的样式需要使用!important来覆盖
scss 基本用法
- 变量（局部/全局）声明：$+变量名：变量值；默认变量在变量名后加default，!global变成全局变量。
- 混合宏（可重用的代码块）：声明混合宏@mixin border-radius { }； 调用混合宏 @include。 border-radius; 声明的时候还可以带默认参数，调用可以传参。
- 继承： @extend .btn; 继承btn class。任何选择器都能继承，可以连续继承。
- 占位符%：占位符声明的代码如果不被@extend调用，就不会被编译产生css代码。
- 插值：#{$参数名}，插入传入或定义的参数。
- 注释：/* */ :会在编译出来的css文件中显示；//内容：不会显示。/!/：重要注释，任何style的css文件中都会有，一般放置css文件版权说明等信息。
- 加减法：同单位的数值之间可以做加减法。
- 乘除法：只能乘数值；如果除式中没有变量或者不是在一个数学表达式中（有加法减法等），就要将除式运算用小括号括起来，否则“/”不会被当做除号运算。
- 颜色运算：算术运算都支持颜色值，并且是分段计算的，01+05=06
- 字符串连接：+，$content: "Hello" + "" + "Sass!";cursor: e + -resize；有引号的字符串和没有引号的字符串相加，以左边字符有无引号为准。
- 父类选择器：&，表示引用父元素，
- if语法：@if,@else,
- 循环语法：@for,@while,@each,
- 函数：@function double ($number){ @return $number*2; }
- import：导入其他的scss
原文地址：https://www.cnblogs.com/yc8930143/p/10662255.html